@flywheel-io/vision 21.0.0-beta.6 → 21.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -1495,7 +1495,7 @@ class FwProgressSpinnerComponent {
|
|
|
1495
1495
|
return (this._strokeWidth / this.diameter) * 100;
|
|
1496
1496
|
}
|
|
1497
1497
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: FwProgressSpinnerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1498
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.11", type: FwProgressSpinnerComponent, isStandalone: true, selector: "fw-progress-spinner", inputs: { mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, showValue: { classPropertyName: "showValue", publicName: "showValue", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: false, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "progressbar", "tabindex": "-1" }, properties: { "class.progress-indeterminate": "mode() === \"indeterminate\"", "class.progress-small": "size() === \"small\"", "class.progress-show-value": "this.showValue
|
|
1498
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.11", type: FwProgressSpinnerComponent, isStandalone: true, selector: "fw-progress-spinner", inputs: { mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, showValue: { classPropertyName: "showValue", publicName: "showValue", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: false, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "progressbar", "tabindex": "-1" }, properties: { "class.progress-indeterminate": "mode() === \"indeterminate\"", "class.progress-small": "size() === \"small\"", "class.progress-show-value": "this.showValue", "style.width.px": "diameter", "style.height.px": "diameter", "attr.aria-valuemin": "0", "attr.aria-valuemax": "100", "attr.aria-valuenow": "mode() === \"determinate\" ? value : null", "attr.mode": "mode()" }, classAttribute: "fw-progress-spinner" }, viewQueries: [{ propertyName: "_determinateCircle", first: true, predicate: ["determinateSpinner"], descendants: true }], ngImport: i0, template: "<ng-template #circle>\n <svg\n [attr.viewBox]=\"_viewBox()\"\n [ngClass]=\"['progress-indeterminate-circle-graphic', color()]\"\n xmlns=\"http://www.w3.org/2000/svg\"\n focusable=\"false\"\n >\n <circle\n [attr.r]=\"_circleRadius()\"\n [style.stroke-dasharray.px]=\"_strokeCircumference()\"\n [style.stroke-dashoffset.px]=\"_strokeDashOffset()\"\n [style.stroke-width.%]=\"_circleStrokeWidth()\"\n class=\"progress-indeterminate-track\"\n cx=\"50%\"\n cy=\"50%\"\n />\n <circle\n [attr.r]=\"_circleRadius()\"\n [style.stroke-dasharray.px]=\"_strokeCircumference()\"\n [style.stroke-dashoffset.px]=\"_strokeCircumference() / 2\"\n [style.stroke-width.%]=\"_circleStrokeWidth()\"\n cx=\"50%\"\n cy=\"50%\"\n />\n </svg>\n</ng-template>\n\n<div class=\"progress-determinate-container\" aria-hidden=\"true\" #determinateSpinner>\n <svg\n [attr.viewBox]=\"_viewBox()\"\n [ngClass]=\"['progress-determinate-circle-graphic', color()]\"\n xmlns=\"http://www.w3.org/2000/svg\"\n focusable=\"false\"\n >\n <circle\n [attr.r]=\"_circleRadius()\"\n [style.stroke-dasharray.px]=\"_strokeCircumference()\"\n [style.stroke-dashoffset.px]=\"_strokeDashOffset()\"\n [style.stroke-width.%]=\"_circleStrokeWidth()\"\n class=\"progress-determinate-track\"\n cx=\"50%\"\n cy=\"50%\"\n />\n <circle\n [attr.r]=\"_circleRadius()\"\n [style.stroke-dasharray.px]=\"_strokeCircumference()\"\n [style.stroke-dashoffset.px]=\"_strokeDashOffset()\"\n [style.stroke-width.%]=\"_circleStrokeWidth()\"\n class=\"progress-determinate-circle\"\n cx=\"50%\"\n cy=\"50%\"\n />\n </svg>\n</div>\n<div class=\"progress-indeterminate-container\" aria-hidden=\"true\">\n <div class=\"progress-spinner-layer\">\n <div class=\"progress-circle-clipper progress-circle-left\">\n <ng-container [ngTemplateOutlet]=\"circle\"></ng-container>\n </div>\n <div class=\"progress-circle-clipper progress-circle-right\">\n <ng-container [ngTemplateOutlet]=\"circle\"></ng-container>\n </div>\n </div>\n</div>\n@if (showValue()) {\n <p [ngClass]=\"['progress-label', 'size-' + size(), 'mode-' + mode()]\">{{ value }}%</p>\n}\n", styles: [".fw-progress-spinner{display:block;overflow:hidden;line-height:0;position:relative;direction:ltr;transition:opacity .25s cubic-bezier(.4,0,.6,1)}.fw-progress-spinner.progress-small.progress-show-value{overflow:visible}.progress-determinate-container,.progress-indeterminate-circle-graphic,.progress-indeterminate-container,.progress-spinner-layer{position:absolute;width:100%;height:100%}.progress-determinate-container{transform:rotate(-90deg)}.progress-indeterminate .progress-determinate-container{opacity:0}.progress-indeterminate-container{font-size:0;letter-spacing:0;white-space:nowrap;opacity:0}.progress-indeterminate .progress-indeterminate-container{opacity:1;animation:progress-container-rotate 1.5682353s linear infinite}.progress-determinate-circle-graphic,.progress-indeterminate-circle-graphic{fill:transparent;stroke:var(--primary-base);stroke-linecap:round}.progress-determinate-circle-graphic.secondary,.progress-indeterminate-circle-graphic.secondary{stroke:var(--secondary-base)}.progress-determinate-circle-graphic.red,.progress-indeterminate-circle-graphic.red{stroke:var(--red-base)}.progress-determinate-circle-graphic.slate,.progress-indeterminate-circle-graphic.slate{stroke:var(--slate-base)}.progress-determinate-circle-graphic.orange,.progress-indeterminate-circle-graphic.orange{stroke:var(--orange-base)}.progress-determinate-circle-graphic.green,.progress-indeterminate-circle-graphic.green{stroke:var(--green-base)}.progress-determinate-circle{transition:stroke-dashoffset .5s cubic-bezier(0,0,.2,1)}.progress-determinate-track,.progress-indeterminate-track{fill:transparent;stroke:var(--separations-divider);stroke-dasharray:100px!important;stroke-dashoffset:0!important;transition:none}.progress-gap-patch .progress-indeterminate-circle-graphic{left:-900%;width:2000%;transform:rotate(180deg)}.progress-circle-clipper .progress-indeterminate-circle-graphic{width:200%}.progress-circle-right .progress-indeterminate-circle-graphic{left:-100%}.progress-indeterminate .progress-circle-left .progress-indeterminate-circle-graphic{animation:progress-left-spin 1333ms cubic-bezier(.4,0,.2,1) infinite both}.progress-indeterminate .progress-circle-right .progress-indeterminate-circle-graphic{animation:progress-right-spin 1333ms cubic-bezier(.4,0,.2,1) infinite both}.progress-circle-clipper{display:inline-flex;position:relative;width:50%;height:100%;overflow:hidden}.progress-indeterminate .progress-spinner-layer{animation:progress-spinner-layer-rotate 5332ms cubic-bezier(.4,0,.2,1) infinite both}.progress-label{margin:0;font-size:8px;line-height:120%;font-weight:500;width:24px;color:var(--typography-muted);position:absolute;top:calc(50% - 4px);right:calc(50% - 12px);text-align:center}.progress-label.size-small{right:-24px}.progress-label.size-large{font-size:12px;top:calc(50% - 6px)}.progress-label.size-extra-large{font-size:16px;width:40px;top:calc(50% - 8px);right:calc(50% - 20px)}@keyframes progress-container-rotate{to{transform:rotate(360deg)}}@keyframes progress-spinner-layer-rotate{12.5%{transform:rotate(135deg)}25%{transform:rotate(270deg)}37.5%{transform:rotate(405deg)}50%{transform:rotate(540deg)}62.5%{transform:rotate(675deg)}75%{transform:rotate(810deg)}87.5%{transform:rotate(945deg)}to{transform:rotate(1080deg)}}@keyframes progress-left-spin{0%{transform:rotate(260deg)}50%{transform:rotate(130deg)}to{transform:rotate(260deg)}}@keyframes progress-right-spin{0%{transform:rotate(-260deg)}50%{transform:rotate(-130deg)}to{transform:rotate(-260deg)}}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
1499
1499
|
}
|
|
1500
1500
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: FwProgressSpinnerComponent, decorators: [{
|
|
1501
1501
|
type: Component,
|
|
@@ -1505,16 +1505,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImpo
|
|
|
1505
1505
|
tabindex: '-1',
|
|
1506
1506
|
'[class.progress-indeterminate]': 'mode() === "indeterminate"',
|
|
1507
1507
|
'[class.progress-small]': 'size() === "small"',
|
|
1508
|
-
'[class.progress-show-value]': 'this.showValue
|
|
1508
|
+
'[class.progress-show-value]': 'this.showValue',
|
|
1509
1509
|
'[style.width.px]': 'diameter',
|
|
1510
1510
|
'[style.height.px]': 'diameter',
|
|
1511
|
-
'[style.--progress-size]': 'diameter + "px"',
|
|
1512
|
-
'[style.--progress-active-indicator-width]': 'diameter + "px"',
|
|
1511
|
+
// '[style.--progress-size]': 'diameter + "px"',
|
|
1512
|
+
// '[style.--progress-active-indicator-width]': 'diameter + "px"',
|
|
1513
1513
|
'[attr.aria-valuemin]': '0',
|
|
1514
1514
|
'[attr.aria-valuemax]': '100',
|
|
1515
1515
|
'[attr.aria-valuenow]': 'mode() === "determinate" ? value : null',
|
|
1516
1516
|
'[attr.mode]': 'mode()',
|
|
1517
|
-
}, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [NgClass, NgTemplateOutlet], template: "<ng-template #circle>\n <svg\n [attr.viewBox]=\"_viewBox()\"\n [ngClass]=\"['progress-indeterminate-circle-graphic', color()]\"\n xmlns=\"http://www.w3.org/2000/svg\"\n focusable=\"false\"\n >\n <circle\n [attr.r]=\"_circleRadius()\"\n [style.stroke-dasharray.px]=\"_strokeCircumference()\"\n [style.stroke-dashoffset.px]=\"_strokeDashOffset()\"\n [style.stroke-width.%]=\"_circleStrokeWidth()\"\n class=\"progress-indeterminate-track\"\n cx=\"50%\"\n cy=\"50%\"\n />\n <circle\n [attr.r]=\"_circleRadius()\"\n [style.stroke-dasharray.px]=\"_strokeCircumference()\"\n [style.stroke-dashoffset.px]=\"_strokeCircumference() / 2\"\n [style.stroke-width.%]=\"_circleStrokeWidth()\"\n cx=\"50%\"\n cy=\"50%\"\n />\n </svg>\n</ng-template>\n\n<div class=\"progress-determinate-container\" aria-hidden=\"true\" #determinateSpinner>\n <svg\n [attr.viewBox]=\"_viewBox()\"\n [ngClass]=\"['progress-determinate-circle-graphic', color()]\"\n xmlns=\"http://www.w3.org/2000/svg\"\n focusable=\"false\"\n >\n <circle\n [attr.r]=\"_circleRadius()\"\n [style.stroke-dasharray.px]=\"_strokeCircumference()\"\n [style.stroke-dashoffset.px]=\"_strokeDashOffset()\"\n [style.stroke-width.%]=\"_circleStrokeWidth()\"\n class=\"progress-determinate-track\"\n cx=\"50%\"\n cy=\"50%\"\n />\n <circle\n [attr.r]=\"_circleRadius()\"\n [style.stroke-dasharray.px]=\"_strokeCircumference()\"\n [style.stroke-dashoffset.px]=\"_strokeDashOffset()\"\n [style.stroke-width.%]=\"_circleStrokeWidth()\"\n class=\"progress-determinate-circle\"\n cx=\"50%\"\n cy=\"50%\"\n />\n </svg>\n</div>\n<div class=\"progress-indeterminate-container\" aria-hidden=\"true\">\n <div class=\"progress-spinner-layer\">\n <div class=\"progress-circle-clipper progress-circle-left\">\n <ng-container [ngTemplateOutlet]=\"circle\"></ng-container>\n </div>\n <div class=\"progress-circle-clipper progress-circle-right\">\n <ng-container [ngTemplateOutlet]=\"circle\"></ng-container>\n </div>\n </div>\n</div>\n@if (showValue()) {\n <p [ngClass]=\"['progress-label', 'size-' + size(), 'mode-' + mode()]\">{{ value }}%</p>\n}\n", styles: [".fw-progress-spinner{display:block;overflow:
|
|
1517
|
+
}, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [NgClass, NgTemplateOutlet], template: "<ng-template #circle>\n <svg\n [attr.viewBox]=\"_viewBox()\"\n [ngClass]=\"['progress-indeterminate-circle-graphic', color()]\"\n xmlns=\"http://www.w3.org/2000/svg\"\n focusable=\"false\"\n >\n <circle\n [attr.r]=\"_circleRadius()\"\n [style.stroke-dasharray.px]=\"_strokeCircumference()\"\n [style.stroke-dashoffset.px]=\"_strokeDashOffset()\"\n [style.stroke-width.%]=\"_circleStrokeWidth()\"\n class=\"progress-indeterminate-track\"\n cx=\"50%\"\n cy=\"50%\"\n />\n <circle\n [attr.r]=\"_circleRadius()\"\n [style.stroke-dasharray.px]=\"_strokeCircumference()\"\n [style.stroke-dashoffset.px]=\"_strokeCircumference() / 2\"\n [style.stroke-width.%]=\"_circleStrokeWidth()\"\n cx=\"50%\"\n cy=\"50%\"\n />\n </svg>\n</ng-template>\n\n<div class=\"progress-determinate-container\" aria-hidden=\"true\" #determinateSpinner>\n <svg\n [attr.viewBox]=\"_viewBox()\"\n [ngClass]=\"['progress-determinate-circle-graphic', color()]\"\n xmlns=\"http://www.w3.org/2000/svg\"\n focusable=\"false\"\n >\n <circle\n [attr.r]=\"_circleRadius()\"\n [style.stroke-dasharray.px]=\"_strokeCircumference()\"\n [style.stroke-dashoffset.px]=\"_strokeDashOffset()\"\n [style.stroke-width.%]=\"_circleStrokeWidth()\"\n class=\"progress-determinate-track\"\n cx=\"50%\"\n cy=\"50%\"\n />\n <circle\n [attr.r]=\"_circleRadius()\"\n [style.stroke-dasharray.px]=\"_strokeCircumference()\"\n [style.stroke-dashoffset.px]=\"_strokeDashOffset()\"\n [style.stroke-width.%]=\"_circleStrokeWidth()\"\n class=\"progress-determinate-circle\"\n cx=\"50%\"\n cy=\"50%\"\n />\n </svg>\n</div>\n<div class=\"progress-indeterminate-container\" aria-hidden=\"true\">\n <div class=\"progress-spinner-layer\">\n <div class=\"progress-circle-clipper progress-circle-left\">\n <ng-container [ngTemplateOutlet]=\"circle\"></ng-container>\n </div>\n <div class=\"progress-circle-clipper progress-circle-right\">\n <ng-container [ngTemplateOutlet]=\"circle\"></ng-container>\n </div>\n </div>\n</div>\n@if (showValue()) {\n <p [ngClass]=\"['progress-label', 'size-' + size(), 'mode-' + mode()]\">{{ value }}%</p>\n}\n", styles: [".fw-progress-spinner{display:block;overflow:hidden;line-height:0;position:relative;direction:ltr;transition:opacity .25s cubic-bezier(.4,0,.6,1)}.fw-progress-spinner.progress-small.progress-show-value{overflow:visible}.progress-determinate-container,.progress-indeterminate-circle-graphic,.progress-indeterminate-container,.progress-spinner-layer{position:absolute;width:100%;height:100%}.progress-determinate-container{transform:rotate(-90deg)}.progress-indeterminate .progress-determinate-container{opacity:0}.progress-indeterminate-container{font-size:0;letter-spacing:0;white-space:nowrap;opacity:0}.progress-indeterminate .progress-indeterminate-container{opacity:1;animation:progress-container-rotate 1.5682353s linear infinite}.progress-determinate-circle-graphic,.progress-indeterminate-circle-graphic{fill:transparent;stroke:var(--primary-base);stroke-linecap:round}.progress-determinate-circle-graphic.secondary,.progress-indeterminate-circle-graphic.secondary{stroke:var(--secondary-base)}.progress-determinate-circle-graphic.red,.progress-indeterminate-circle-graphic.red{stroke:var(--red-base)}.progress-determinate-circle-graphic.slate,.progress-indeterminate-circle-graphic.slate{stroke:var(--slate-base)}.progress-determinate-circle-graphic.orange,.progress-indeterminate-circle-graphic.orange{stroke:var(--orange-base)}.progress-determinate-circle-graphic.green,.progress-indeterminate-circle-graphic.green{stroke:var(--green-base)}.progress-determinate-circle{transition:stroke-dashoffset .5s cubic-bezier(0,0,.2,1)}.progress-determinate-track,.progress-indeterminate-track{fill:transparent;stroke:var(--separations-divider);stroke-dasharray:100px!important;stroke-dashoffset:0!important;transition:none}.progress-gap-patch .progress-indeterminate-circle-graphic{left:-900%;width:2000%;transform:rotate(180deg)}.progress-circle-clipper .progress-indeterminate-circle-graphic{width:200%}.progress-circle-right .progress-indeterminate-circle-graphic{left:-100%}.progress-indeterminate .progress-circle-left .progress-indeterminate-circle-graphic{animation:progress-left-spin 1333ms cubic-bezier(.4,0,.2,1) infinite both}.progress-indeterminate .progress-circle-right .progress-indeterminate-circle-graphic{animation:progress-right-spin 1333ms cubic-bezier(.4,0,.2,1) infinite both}.progress-circle-clipper{display:inline-flex;position:relative;width:50%;height:100%;overflow:hidden}.progress-indeterminate .progress-spinner-layer{animation:progress-spinner-layer-rotate 5332ms cubic-bezier(.4,0,.2,1) infinite both}.progress-label{margin:0;font-size:8px;line-height:120%;font-weight:500;width:24px;color:var(--typography-muted);position:absolute;top:calc(50% - 4px);right:calc(50% - 12px);text-align:center}.progress-label.size-small{right:-24px}.progress-label.size-large{font-size:12px;top:calc(50% - 6px)}.progress-label.size-extra-large{font-size:16px;width:40px;top:calc(50% - 8px);right:calc(50% - 20px)}@keyframes progress-container-rotate{to{transform:rotate(360deg)}}@keyframes progress-spinner-layer-rotate{12.5%{transform:rotate(135deg)}25%{transform:rotate(270deg)}37.5%{transform:rotate(405deg)}50%{transform:rotate(540deg)}62.5%{transform:rotate(675deg)}75%{transform:rotate(810deg)}87.5%{transform:rotate(945deg)}to{transform:rotate(1080deg)}}@keyframes progress-left-spin{0%{transform:rotate(260deg)}50%{transform:rotate(130deg)}to{transform:rotate(260deg)}}@keyframes progress-right-spin{0%{transform:rotate(-260deg)}50%{transform:rotate(-130deg)}to{transform:rotate(-260deg)}}\n"] }]
|
|
1518
1518
|
}], propDecorators: { _determinateCircle: [{
|
|
1519
1519
|
type: ViewChild,
|
|
1520
1520
|
args: ['determinateSpinner']
|