@onemrvapublic/design-system-demos 22.0.1 → 22.0.2-develop.1

package/browser/assets/json/button-loading.json

@@ -1 +1 @@
-{"demo-button-loading.component.html":"@if (type() === 'contained') {\n  <button\n    mat-flat-button\n    color=\"accent\"\n    [disabled]=\"disabled()\"\n    [loading]=\"loading\"\n    (click)=\"send()\"\n  >\n    @if (loading) {\n      <ng-container>Loading ...</ng-container>\n    } @else {\n      <ng-container>Send</ng-container>\n    }\n  </button>\n} @else if (type() === 'outlined') {\n  <button\n    mat-stroked-button\n    color=\"primary\"\n    [disabled]=\"disabled()\"\n    [loading]=\"loading\"\n    (click)=\"send()\"\n  >\n    @if (loading) {\n      <ng-container>Loading ...</ng-container>\n    } @else {\n      <ng-container>Send</ng-container>\n    }\n  </button>\n}\n","demo-button-loading.component.ts":"import { Component, OnInit, ViewEncapsulation, input } from '@angular/core';\n\nimport { MatIconModule } from '@angular/material/icon';\nimport { MatButtonModule } from '@angular/material/button';\nimport { OnemrvaMatSpinnerModule } from '@onemrvapublic/design-system/mat-spinner';\nimport { DemoComponentBase } from '../../_demo/demo-component-base';\n\n@Component({\n  selector: 'app-demo-button-loading',\n  standalone: true,\n  imports: [MatIconModule, MatButtonModule, OnemrvaMatSpinnerModule],\n  templateUrl: 'demo-button-loading.component.html',\n\n  encapsulation: ViewEncapsulation.None,\n})\nexport class DemoButtonLoadingComponent\n  extends DemoComponentBase\n  implements OnInit\n{\n  readonly type = input<'outlined' | 'contained'>('contained');\n\n  readonly disabled = input(false);\n\n  loading = false;\n\n  send() {\n    this.loading = true;\n    setTimeout(() => {\n      this.loading = false;\n    }, 3000);\n  }\n\n  ngOnInit(): void {\n    this.send();\n  }\n}\n"}
+{"demo-button-loading.component.html":"@if (type() === 'contained') {\n  <button\n    mat-flat-button\n    color=\"accent\"\n    [disabled]=\"disabled()\"\n    [loading]=\"loading()\"\n    (click)=\"send()\"\n  >\n    @if (loading()) {\n      <ng-container>Loading ...</ng-container>\n    } @else {\n      <ng-container>Send</ng-container>\n    }\n  </button>\n} @else if (type() === 'outlined') {\n  <button\n    mat-stroked-button\n    color=\"primary\"\n    [disabled]=\"disabled()\"\n    [loading]=\"loading()\"\n    (click)=\"send()\"\n  >\n    @if (loading()) {\n      <ng-container>Loading ...</ng-container>\n    } @else {\n      <ng-container>Send</ng-container>\n    }\n  </button>\n}\n\n<!-- Before in the panel we had an error with the button because there was a conflict in projection-->\n<!--<onemrva-mat-panel>-->\n<!--  <onemrva-mat-panel-content>-->\n<!--    <button-->\n<!--      mat-stroked-button-->\n<!--      color=\"primary\"-->\n<!--      [disabled]=\"disabled()\"-->\n<!--      [loading]=\"loading()\"-->\n<!--      (click)=\"send()\"-->\n<!--    >-->\n<!--      @if (loading()) {-->\n<!--        <ng-container>Loading ...</ng-container>-->\n<!--      } @else {-->\n<!--        <ng-container>Send</ng-container>-->\n<!--      }-->\n<!--    </button>-->\n<!--  </onemrva-mat-panel-content>-->\n<!--</onemrva-mat-panel>-->\n","demo-button-loading.component.ts":"import {\n  ChangeDetectionStrategy,\n  Component,\n  DestroyRef,\n  ViewEncapsulation,\n  inject,\n  input,\n  signal,\n} from '@angular/core';\n\nimport { MatButtonModule } from '@angular/material/button';\nimport { MatIconModule } from '@angular/material/icon';\nimport { OnemrvaMatSpinnerModule } from '@onemrvapublic/design-system/mat-spinner';\nimport {\n  OnemrvaMatPanelComponent,\n  OnemrvaMatPanelContentComponent,\n} from '@onemrvapublic/design-system/mat-panel';\nimport { DemoComponentBase } from '../../_demo/demo-component-base';\n\n@Component({\n  selector: 'app-demo-button-loading',\n  imports: [MatIconModule, MatButtonModule, OnemrvaMatSpinnerModule],\n  templateUrl: 'demo-button-loading.component.html',\n  encapsulation: ViewEncapsulation.None,\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class DemoButtonLoadingComponent extends DemoComponentBase {\n  readonly type = input<'outlined' | 'contained'>('contained');\n  readonly disabled = input(false);\n\n  readonly loading = signal(false);\n\n  private timer?: ReturnType<typeof setTimeout>;\n\n  constructor() {\n    super();\n    inject(DestroyRef).onDestroy(() => clearTimeout(this.timer));\n    this.send(); // demo auto-starts\n  }\n\n  send(): void {\n    if (this.loading()) return;\n    this.loading.set(true);\n    clearTimeout(this.timer);\n    this.timer = setTimeout(() => this.loading.set(false), 30000);\n  }\n}\n"}