@daffodil/design 0.69.0 → 0.70.0

package/fesm2022/daffodil-design-progress-bar-examples.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"daffodil-design-progress-bar-examples.mjs","sources":["../../../libs/design/progress-bar/examples/src/progress-bar-default/progress-bar-default.component.ts","../../../libs/design/progress-bar/examples/src/progress-bar-default/progress-bar-default.component.html","../../../libs/design/progress-bar/examples/src/progress-bar-default/progress-bar-default.module.ts","../../../libs/design/progress-bar/examples/src/progress-bar-indeterminate/progress-bar-indeterminate.component.ts","../../../libs/design/progress-bar/examples/src/progress-bar-indeterminate/progress-bar-indeterminate.component.html","../../../libs/design/progress-bar/examples/src/progress-bar-indeterminate/progress-bar-indeterminate.module.ts","../../../libs/design/progress-bar/examples/src/progress-bar-themes/progress-bar-themes.component.ts","../../../libs/design/progress-bar/examples/src/progress-bar-themes/progress-bar-themes.component.html","../../../libs/design/progress-bar/examples/src/progress-bar-themes/progress-bar-themes.module.ts","../../../libs/design/progress-bar/examples/src/public_api.ts","../../../libs/design/progress-bar/examples/src/daffodil-design-progress-bar-examples.ts"],"sourcesContent":["import {\n  ChangeDetectionStrategy,\n  Component,\n} from '@angular/core';\n\n@Component({\n  // eslint-disable-next-line @angular-eslint/component-selector\n  selector: 'progress-bar-default',\n  templateUrl: './progress-bar-default.component.html',\n  styles: [`\n    :host {\n      display: flex;\n      flex-direction: column;\n      gap: 8px;\n    }`],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class ProgressBarDefaultComponent {}\n","<daff-progress-bar percentage=\"25\">\n\t<label daffProgressBarLabel>Progress bar label</label>\n</daff-progress-bar>\n","import { NgModule } from '@angular/core';\n\nimport { DaffProgressBarModule } from '@daffodil/design/progress-bar';\n\nimport { ProgressBarDefaultComponent } from './progress-bar-default.component';\n\n@NgModule({\n  declarations: [\n    ProgressBarDefaultComponent,\n  ],\n  exports: [\n    ProgressBarDefaultComponent,\n  ],\n  imports: [\n    DaffProgressBarModule,\n  ],\n})\nexport class ProgressBarDefaultComponentModule { }\n","import {\n  ChangeDetectionStrategy,\n  Component,\n} from '@angular/core';\n\n@Component({\n  // eslint-disable-next-line @angular-eslint/component-selector\n  selector: 'progress-bar-indeterminate',\n  templateUrl: './progress-bar-indeterminate.component.html',\n  styles: [`\n    :host {\n      display: flex;\n      flex-direction: column;\n      gap: 8px;\n    }`],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class ProgressBarIndeterminateComponent {}\n","<daff-progress-bar indeterminate>\n\t<label daffProgressBarLabel>Progress bar label</label>\n</daff-progress-bar>","import { NgModule } from '@angular/core';\n\nimport { DaffProgressBarModule } from '@daffodil/design/progress-bar';\n\nimport { ProgressBarIndeterminateComponent } from './progress-bar-indeterminate.component';\n\n@NgModule({\n  declarations: [\n    ProgressBarIndeterminateComponent,\n  ],\n  exports: [\n    ProgressBarIndeterminateComponent,\n  ],\n  imports: [\n    DaffProgressBarModule,\n  ],\n})\nexport class ProgressBarIndeterminateComponentModule { }\n","import {\n  ChangeDetectionStrategy,\n  Component,\n} from '@angular/core';\nimport { FormControl } from '@angular/forms';\n\nimport { DaffPalette } from '@daffodil/design';\n\n@Component({\n  // eslint-disable-next-line @angular-eslint/component-selector\n  selector: 'progress-bar-themes',\n  templateUrl: './progress-bar-themes.component.html',\n  styles: [`\n    :host {\n      display: flex;\n      flex-direction: column;\n      align-items: flex-start;\n      gap: 16px;\n    }`],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class ProgressBarThemesComponent {\n  color: DaffPalette = 'primary';\n\n  colorControl: FormControl = new FormControl('');\n}\n","<daff-progress-bar percentage=\"25\" [color]=\"colorControl.value\">\n\t<label daffProgressBarLabel>Progress bar label</label>\n</daff-progress-bar>\n\n<select [formControl]=\"colorControl\">\n\t<option value=\"\">Default</option>\n\t<option value=\"primary\">Primary</option>\n\t<option value=\"secondary\">Secondary</option>\n\t<option value=\"tertiary\">Tertiary</option>\n\t<option value=\"theme\">Theme</option>\n\t<option value=\"theme-contrast\">Theme Contrast</option>\n\t<option value=\"white\">White</option>\n\t<option value=\"black\">Black</option>\n</select>","import { NgModule } from '@angular/core';\nimport { ReactiveFormsModule } from '@angular/forms';\n\nimport { DaffProgressBarModule } from '@daffodil/design/progress-bar';\n\nimport { ProgressBarThemesComponent } from './progress-bar-themes.component';\n\n@NgModule({\n  declarations: [\n    ProgressBarThemesComponent,\n  ],\n  exports: [\n    ProgressBarThemesComponent,\n  ],\n  imports: [\n    DaffProgressBarModule,\n    ReactiveFormsModule,\n  ],\n})\nexport class ProgressBarThemesComponentModule { }\n","import { ComponentExample } from '@daffodil/design';\n\nimport { ProgressBarDefaultComponent } from './progress-bar-default/progress-bar-default.component';\nimport { ProgressBarDefaultComponentModule } from './progress-bar-default/progress-bar-default.module';\nimport { ProgressBarIndeterminateComponent } from './progress-bar-indeterminate/progress-bar-indeterminate.component';\nimport { ProgressBarIndeterminateComponentModule } from './progress-bar-indeterminate/progress-bar-indeterminate.module';\nimport { ProgressBarThemesComponent } from './progress-bar-themes/progress-bar-themes.component';\nimport { ProgressBarThemesComponentModule } from './progress-bar-themes/progress-bar-themes.module';\n\nexport const PROGRESS_BAR_EXAMPLES: ComponentExample[] = [\n  { component: ProgressBarThemesComponent, module: ProgressBarThemesComponentModule },\n  { component: ProgressBarIndeterminateComponent, module: ProgressBarIndeterminateComponentModule },\n  { component: ProgressBarDefaultComponent, module: ProgressBarDefaultComponentModule },\n];\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}

package/fesm2022/daffodil-design-progress-bar.mjs

@@ -0,0 +1,178 @@
+import * as i1 from '@angular/common';
+import { CommonModule } from '@angular/common';
+import * as i0 from '@angular/core';
+import { EventEmitter, Component, ChangeDetectionStrategy, HostBinding, Input, Output, NgModule } from '@angular/core';
+import { coerceBooleanProperty } from '@angular/cdk/coercion';
+import { daffColorMixin } from '@daffodil/design';
+import { trigger, state, style, transition, animate } from '@angular/animations';
+
+const daffProgressBarAnimation = {
+    fill: trigger('fill', [
+        state('*', style({ transform: 'scaleX(calc({{ percentage }}/100))' }), { params: { percentage: 0 } }),
+        transition('void <=> *', animate(0)),
+        transition('* <=> *', animate(1000)),
+    ]),
+};
+
+/**
+ * An _elementRef and an instance of renderer2 are needed for the Colorable mixin
+ */
+class DaffProgressBarBase {
+    constructor(_elementRef, _renderer) {
+        this._elementRef = _elementRef;
+        this._renderer = _renderer;
+    }
+}
+const _daffProgressBarBase = daffColorMixin(DaffProgressBarBase, 'primary');
+const clamp = (number, min, max) => Math.min(Math.max(number, min), max);
+/**
+ * @inheritdoc
+ */
+class DaffProgressBarComponent extends _daffProgressBarBase {
+    /**
+     * @docs-private
+     */
+    get indeterminateClass() {
+        return this._indeterminate;
+    }
+    get role() {
+        return 'progressbar';
+    }
+    get ariaLabel() {
+        return this._indeterminate ? 'loading' : null;
+    }
+    get ariaValueNow() {
+        return this.percentage;
+    }
+    constructor(_changeDetectorRef, elementRef, renderer) {
+        super(elementRef, renderer);
+        this._changeDetectorRef = _changeDetectorRef;
+        this.elementRef = elementRef;
+        this.renderer = renderer;
+        /**
+         * @docs-private
+         */
+        this.class = true;
+        this.ariaValueMin = '0';
+        this.ariaValueMax = '100';
+        this._percentage = 0;
+        this._indeterminate = false;
+        /**
+         * An event that emits each time the progression reaches 100%
+         * and the animation is finished
+         */
+        this.finished = new EventEmitter();
+    }
+    /**
+     * Sets the percentage completion of the progression,
+     * expressed as a whole number between 0 and 100.
+     *
+     */
+    get percentage() {
+        return this._percentage;
+    }
+    ;
+    set percentage(val) {
+        this._percentage = clamp(val, 0, 100);
+        this._changeDetectorRef.markForCheck();
+    }
+    /**
+     * Property to set the animation of a progress bar to
+     * run for an indefinite amount of time.
+     *
+     * See: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/progress
+     **/
+    get indeterminate() {
+        return this._indeterminate;
+    }
+    set indeterminate(value) {
+        this._indeterminate = coerceBooleanProperty(value);
+    }
+    /**
+     * Calculates when the progress animation is fully completed
+     *
+     * @param event: AnimationEvent
+     */
+    onAnimationComplete(event) {
+        // @ts-expect-error: @angular/animations typing error on event.toState as string
+        // See: https://github.com/angular/angular/issues/26507
+        if (event.toState === '100' || event.toState === 100) {
+            this.finished.emit();
+        }
+    }
+    /**
+     * @docs-private
+     */
+    get fillState() {
+        return {
+            value: this.percentage,
+            params: {
+                percentage: this.percentage,
+            },
+        };
+    }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: DaffProgressBarComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.1", type: DaffProgressBarComponent, selector: "daff-progress-bar", inputs: { color: "color", percentage: "percentage", indeterminate: "indeterminate" }, outputs: { finished: "finished" }, host: { properties: { "class.daff-progress-bar": "this.class", "class.indeterminate": "this.indeterminateClass", "role": "this.role", "attr.aria-label": "this.ariaLabel", "attr.aria-valuemin": "this.ariaValueMin", "attr.aria-valuemax": "this.ariaValueMax", "attr.aria-valuenow": "this.ariaValueNow" } }, usesInheritance: true, ngImport: i0, template: "<ng-content select=\"label[daffProgressBarLabel]\"></ng-content>\n<div class=\"daff-progress-bar__track\">\n\t<div *ngIf=\"!indeterminate\" class=\"daff-progress-bar__fill\" [@fill]=\"fillState\" (@fill.done)=\"onAnimationComplete($event)\"></div>\n\t<div *ngIf=\"indeterminate\" class=\"daff-progress-bar__fill indeterminate-bar\"></div>\n</div>", styles: [":host(.daff-progress-bar){display:flex;flex-direction:column;align-items:flex-start;gap:8px;width:100%}:host(.daff-progress-bar) ::ng-deep .daff-progress-bar__label{font-size:.875rem;line-height:1rem}:host(.daff-progress-bar) .daff-progress-bar__track{height:4px;position:relative;width:100%}:host(.daff-progress-bar) .daff-progress-bar__fill{height:4px;width:100%;transform:scaleX(0);transform-origin:0 center}:host(.daff-progress-bar).indeterminate{overflow:hidden}:host(.daff-progress-bar).indeterminate .indeterminate-bar{height:100%;width:100%;animation:indeterminate-animation 1.5s infinite linear;transform-origin:0% 50%}@keyframes indeterminate-animation{0%{transform:translate(0) scaleX(0)}20%{transform:translate(0) scaleX(25%)}to{transform:translate(100%) scaleX(25%)}}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], animations: [
+            daffProgressBarAnimation.fill,
+        ], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: DaffProgressBarComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'daff-progress-bar', changeDetection: ChangeDetectionStrategy.OnPush, inputs: ['color'], animations: [
+                        daffProgressBarAnimation.fill,
+                    ], template: "<ng-content select=\"label[daffProgressBarLabel]\"></ng-content>\n<div class=\"daff-progress-bar__track\">\n\t<div *ngIf=\"!indeterminate\" class=\"daff-progress-bar__fill\" [@fill]=\"fillState\" (@fill.done)=\"onAnimationComplete($event)\"></div>\n\t<div *ngIf=\"indeterminate\" class=\"daff-progress-bar__fill indeterminate-bar\"></div>\n</div>", styles: [":host(.daff-progress-bar){display:flex;flex-direction:column;align-items:flex-start;gap:8px;width:100%}:host(.daff-progress-bar) ::ng-deep .daff-progress-bar__label{font-size:.875rem;line-height:1rem}:host(.daff-progress-bar) .daff-progress-bar__track{height:4px;position:relative;width:100%}:host(.daff-progress-bar) .daff-progress-bar__fill{height:4px;width:100%;transform:scaleX(0);transform-origin:0 center}:host(.daff-progress-bar).indeterminate{overflow:hidden}:host(.daff-progress-bar).indeterminate .indeterminate-bar{height:100%;width:100%;animation:indeterminate-animation 1.5s infinite linear;transform-origin:0% 50%}@keyframes indeterminate-animation{0%{transform:translate(0) scaleX(0)}20%{transform:translate(0) scaleX(25%)}to{transform:translate(100%) scaleX(25%)}}\n"] }]
+        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: i0.Renderer2 }], propDecorators: { class: [{
+                type: HostBinding,
+                args: ['class.daff-progress-bar']
+            }], indeterminateClass: [{
+                type: HostBinding,
+                args: ['class.indeterminate']
+            }], role: [{
+                type: HostBinding,
+                args: ['role']
+            }], ariaLabel: [{
+                type: HostBinding,
+                args: ['attr.aria-label']
+            }], ariaValueMin: [{
+                type: HostBinding,
+                args: ['attr.aria-valuemin']
+            }], ariaValueMax: [{
+                type: HostBinding,
+                args: ['attr.aria-valuemax']
+            }], ariaValueNow: [{
+                type: HostBinding,
+                args: ['attr.aria-valuenow']
+            }], percentage: [{
+                type: Input
+            }], indeterminate: [{
+                type: Input
+            }], finished: [{
+                type: Output
+            }] } });
+
+class DaffProgressBarModule {
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: DaffProgressBarModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.1.1", ngImport: i0, type: DaffProgressBarModule, declarations: [DaffProgressBarComponent], imports: [CommonModule], exports: [DaffProgressBarComponent] }); }
+    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: DaffProgressBarModule, imports: [CommonModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: DaffProgressBarModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [
+                        CommonModule,
+                    ],
+                    declarations: [
+                        DaffProgressBarComponent,
+                    ],
+                    exports: [
+                        DaffProgressBarComponent,
+                    ],
+                }]
+        }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { DaffProgressBarComponent, DaffProgressBarModule, clamp };
+//# sourceMappingURL=daffodil-design-progress-bar.mjs.map

package/fesm2022/daffodil-design-progress-bar.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"daffodil-design-progress-bar.mjs","sources":["../../../libs/design/progress-bar/src/animation/progress-bar-animation.ts","../../../libs/design/progress-bar/src/progress-bar.component.ts","../../../libs/design/progress-bar/src/progress-bar.component.html","../../../libs/design/progress-bar/src/progress-bar.module.ts","../../../libs/design/progress-bar/src/daffodil-design-progress-bar.ts"],"sourcesContent":["import {\n  animate,\n  state,\n  style,\n  transition,\n  trigger,\n  AnimationTriggerMetadata,\n} from '@angular/animations';\n\nexport const daffProgressBarAnimation: {\n  readonly fill: AnimationTriggerMetadata;\n} = {\n  fill: trigger('fill', [\n    state('*', style({ transform: 'scaleX(calc({{ percentage }}/100))' }), { params: { percentage: 0 }}),\n    transition('void <=> *', animate(0)),\n    transition('* <=> *', animate(1000)),\n  ]),\n};\n","import { AnimationEvent } from '@angular/animations';\nimport { coerceBooleanProperty } from '@angular/cdk/coercion';\nimport {\n  Component,\n  Input,\n  ChangeDetectionStrategy,\n  ElementRef,\n  Output,\n  EventEmitter,\n  Renderer2,\n  HostBinding,\n  ChangeDetectorRef,\n} from '@angular/core';\n\nimport {\n  daffColorMixin,\n  DaffColorable,\n} from '@daffodil/design';\n\nimport { daffProgressBarAnimation } from './animation/progress-bar-animation';\n\n/**\n * An _elementRef and an instance of renderer2 are needed for the Colorable mixin\n */\nclass DaffProgressBarBase{\n  constructor(public _elementRef: ElementRef, public _renderer: Renderer2) {}\n}\n\nconst _daffProgressBarBase = daffColorMixin(DaffProgressBarBase, 'primary');\n\nexport const clamp = (number: number, min: number, max: number) => Math.min(Math.max(number, min), max);\n\n/**\n * @inheritdoc\n */\n@Component({\n  selector: 'daff-progress-bar',\n  templateUrl: './progress-bar.component.html',\n  styleUrls: ['./progress-bar.component.scss'],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  //todo(damienwebdev): remove once decorators hit stage 3 - https://github.com/microsoft/TypeScript/issues/7342\n  // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property\n  inputs: ['color'],\n  animations: [\n    daffProgressBarAnimation.fill,\n  ],\n})\nexport class DaffProgressBarComponent extends _daffProgressBarBase implements DaffColorable {\n\n  /**\n   * @docs-private\n   */\n  @HostBinding('class.daff-progress-bar') class = true;\n\n  /**\n   * @docs-private\n   */\n  @HostBinding('class.indeterminate') get indeterminateClass() {\n    return this._indeterminate;\n  }\n\n  @HostBinding('role') get role() {\n    return 'progressbar';\n  }\n\n  @HostBinding('attr.aria-label') get ariaLabel() {\n    return this._indeterminate ? 'loading' : null;\n  }\n\n  @HostBinding('attr.aria-valuemin') ariaValueMin = '0';\n  @HostBinding('attr.aria-valuemax') ariaValueMax = '100';\n  @HostBinding('attr.aria-valuenow') get ariaValueNow() {\n    return this.percentage;\n  }\n\n  constructor(\n    private _changeDetectorRef: ChangeDetectorRef,\n    private elementRef: ElementRef,\n    private renderer: Renderer2,\n  ) {\n    super(elementRef, renderer);\n  }\n\n  private _percentage = 0;\n  private _indeterminate = false;\n\n  /**\n   * Sets the percentage completion of the progression,\n   * expressed as a whole number between 0 and 100.\n   *\n   */\n  @Input() get percentage(): number {\n    return this._percentage;\n  };\n  set percentage(val: number) {\n    this._percentage = clamp(val, 0, 100);\n    this._changeDetectorRef.markForCheck();\n  }\n\n  /**\n   * Property to set the animation of a progress bar to\n   * run for an indefinite amount of time.\n   *\n   * See: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/progress\n   **/\n  @Input() get indeterminate() {\n    return this._indeterminate;\n  }\n  set indeterminate(value: any) {\n\t  this._indeterminate = coerceBooleanProperty(value);\n  }\n\n  /**\n   * An event that emits each time the progression reaches 100%\n   * and the animation is finished\n   */\n  @Output() finished: EventEmitter<void> = new EventEmitter();\n\n  /**\n   * Calculates when the progress animation is fully completed\n   *\n   * @param event: AnimationEvent\n   */\n  onAnimationComplete(event: AnimationEvent): void {\n    // @ts-expect-error: @angular/animations typing error on event.toState as string\n    // See: https://github.com/angular/angular/issues/26507\n    if(event.toState === '100' || event.toState === 100) {\n      this.finished.emit();\n    }\n  }\n\n  /**\n   * @docs-private\n   */\n  get fillState(): any {\n    return {\n      value: this.percentage,\n      params: {\n        percentage: this.percentage,\n      },\n    };\n  }\n}\n","<ng-content select=\"label[daffProgressBarLabel]\"></ng-content>\n<div class=\"daff-progress-bar__track\">\n\t<div *ngIf=\"!indeterminate\" class=\"daff-progress-bar__fill\" [@fill]=\"fillState\" (@fill.done)=\"onAnimationComplete($event)\"></div>\n\t<div *ngIf=\"indeterminate\" class=\"daff-progress-bar__fill indeterminate-bar\"></div>\n</div>","import { CommonModule } from '@angular/common';\nimport { NgModule } from '@angular/core';\n\nimport { DaffProgressBarComponent } from './progress-bar.component';\n\n@NgModule({\n  imports: [\n    CommonModule,\n  ],\n  declarations: [\n    DaffProgressBarComponent,\n  ],\n  exports: [\n    DaffProgressBarComponent,\n  ],\n})\nexport class DaffProgressBarModule { }\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public_api';\n"],"names":[],"mappings":"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"}

package/fesm2022/daffodil-design.mjs

@@ -1038,7 +1038,8 @@ class DaffProgressIndicatorBase {
 }
 const _daffProgressIndicatorBase = daffColorMixin(DaffProgressIndicatorBase, 'primary');
 /**
- * @inheritdoc
+ * @deprecated in v1.0.0
+ * Use `DaffProgressBarComponent` instead.
  */
 class DaffProgressIndicatorComponent extends _daffProgressIndicatorBase {
     /**