@kirbydesign/designsystem 11.11.4 → 12.0.0-dev-286cdc0

package/fesm2022/kirbydesign-designsystem-progress-circle.mjs

@@ -1,159 +1,210 @@
-import * as i0 from '@angular/core';
-import { HostBinding, Input, ChangeDetectionStrategy, Component } from '@angular/core';
-import { ThemeColorDirective } from '@kirbydesign/designsystem/shared';
-
-class ProgressCircleRingComponent {
-    constructor() {
-        this.value = 0;
-        this.themeColor = 'success';
-    }
-    ngAfterViewInit() {
-        this.viewInitialized = true;
-    }
-    get _diameter() {
-        return this.radius * 2;
-    }
-    get _centerRadius() {
-        return this.radius - this.strokeWidth / 2;
-    }
-    get _centerCircumference() {
-        return this._centerRadius * 2 * Math.PI;
-    }
-    get _progress() {
-        const valueWithinBounds = this.value < this.upperBound || this.value > 99;
-        const _value = valueWithinBounds ? this.value : this.upperBound;
-        const progressPercentage = _value / 100;
-        return this._centerCircumference * progressPercentage;
-    }
-    get _remainder() {
-        return this._centerCircumference - this._progress;
-    }
-    get _progressStrokeWidth() {
-        // Do not render stroke if progress is 0, otherwise it will show as a dot
-        if (this._progress === 0)
-            return 0;
-        return this.strokeWidth;
-    }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: ProgressCircleRingComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.18", type: ProgressCircleRingComponent, isStandalone: true, selector: "kirby-progress-circle-ring", inputs: { radius: "radius", value: "value", themeColor: "themeColor", strokeWidth: "strokeWidth", upperBound: "upperBound" }, host: { properties: { "class.view-initialized": "this.viewInitialized", "style.width.px": "this._diameter", "style.height.px": "this._diameter" } }, ngImport: i0, template: "<svg [attr.width]=\"_diameter\" [attr.height]=\"_diameter\" aria-hidden=\"true\">\n  <circle\n    shape-rendering=\"geometricPrecision\"\n    class=\"circle\"\n    fill=\"transparent\"\n    [attr.stroke-width]=\"strokeWidth\"\n    [attr.r]=\"_centerRadius\"\n    [attr.cx]=\"radius\"\n    [attr.cy]=\"radius\"\n  />\n  <circle\n    shape-rendering=\"geometricPrecision\"\n    class=\"progress\"\n    fill=\"transparent\"\n    stroke-linecap=\"round\"\n    [attr.stroke-width]=\"_progressStrokeWidth\"\n    [attr.r]=\"_centerRadius\"\n    [attr.cx]=\"radius\"\n    [attr.cy]=\"radius\"\n    [attr.stroke-dasharray]=\"[_progress, _remainder]\"\n  />\n</svg>\n", styles: [".kirby-line-clamp{display:-webkit-box;-webkit-line-clamp:var(--line-clamp, none);-webkit-box-orient:vertical;overflow:hidden}svg{rotate:-90deg}.circle{stroke:var(--kirby-semi-light)}:host.success{--kirby-progress-circle-stroke-color: var(--kirby-success-shade)}:host.warning{--kirby-progress-circle-stroke-color: var(--kirby-warning-shade)}:host.danger{--kirby-progress-circle-stroke-color: var(--kirby-danger)}:host.view-initialized .progress{transition-property:stroke-dasharray,stroke;transition-duration:1s;transition-timing-function:ease;transform-origin:50% 50%;stroke:var(--kirby-progress-circle-stroke-color, var(--kirby-success))}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: ProgressCircleRingComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'kirby-progress-circle-ring', changeDetection: ChangeDetectionStrategy.OnPush, template: "<svg [attr.width]=\"_diameter\" [attr.height]=\"_diameter\" aria-hidden=\"true\">\n  <circle\n    shape-rendering=\"geometricPrecision\"\n    class=\"circle\"\n    fill=\"transparent\"\n    [attr.stroke-width]=\"strokeWidth\"\n    [attr.r]=\"_centerRadius\"\n    [attr.cx]=\"radius\"\n    [attr.cy]=\"radius\"\n  />\n  <circle\n    shape-rendering=\"geometricPrecision\"\n    class=\"progress\"\n    fill=\"transparent\"\n    stroke-linecap=\"round\"\n    [attr.stroke-width]=\"_progressStrokeWidth\"\n    [attr.r]=\"_centerRadius\"\n    [attr.cx]=\"radius\"\n    [attr.cy]=\"radius\"\n    [attr.stroke-dasharray]=\"[_progress, _remainder]\"\n  />\n</svg>\n", styles: [".kirby-line-clamp{display:-webkit-box;-webkit-line-clamp:var(--line-clamp, none);-webkit-box-orient:vertical;overflow:hidden}svg{rotate:-90deg}.circle{stroke:var(--kirby-semi-light)}:host.success{--kirby-progress-circle-stroke-color: var(--kirby-success-shade)}:host.warning{--kirby-progress-circle-stroke-color: var(--kirby-warning-shade)}:host.danger{--kirby-progress-circle-stroke-color: var(--kirby-danger)}:host.view-initialized .progress{transition-property:stroke-dasharray,stroke;transition-duration:1s;transition-timing-function:ease;transform-origin:50% 50%;stroke:var(--kirby-progress-circle-stroke-color, var(--kirby-success))}\n"] }]
-        }], propDecorators: { radius: [{
-                type: Input
-            }], value: [{
-                type: Input
-            }], themeColor: [{
-                type: Input
-            }], strokeWidth: [{
-                type: Input
-            }], upperBound: [{
-                type: Input
-            }], viewInitialized: [{
-                type: HostBinding,
-                args: ['class.view-initialized']
-            }], _diameter: [{
-                type: HostBinding,
-                args: ['style.width.px']
-            }, {
-                type: HostBinding,
-                args: ['style.height.px']
-            }] } });
-
-class ProgressCircleComponent {
-    get _cssSize() {
-        return this.size;
-    }
-    constructor(elementRef, changeDetectorRef) {
-        this.elementRef = elementRef;
-        this.changeDetectorRef = changeDetectorRef;
-        this.SIZE_CONFIG = {
-            sm: { diameter: 40, strokeWidth: 3, upperBound: 95 },
-            md: { diameter: 56, strokeWidth: 4, upperBound: 96 },
-            lg: { diameter: 96, strokeWidth: 6, upperBound: 97 },
-        };
-        this.role = 'progressbar';
-        this.value = 0;
-        this.size = 'md';
-        this.themeColor = 'success';
-        this.onIntersectionChange = (entries) => {
-            this.hasElementBeenVisible = entries && entries.some((entry) => entry.isIntersecting);
-            if (this.hasElementBeenVisible) {
-                this.unobserve();
-                this.changeDetectorRef.markForCheck();
-            }
-        };
-    }
-    ngAfterViewInit() {
-        if (!this.observer) {
-            this.observer = new IntersectionObserver(this.onIntersectionChange, {
-                threshold: 0.5,
-            });
-            this.observer.observe(this.elementRef.nativeElement);
-        }
-    }
-    ngOnDestroy() {
-        this.unobserve();
-    }
-    unobserve() {
-        if (this.observer) {
-            this.observer.unobserve(this.elementRef.nativeElement);
-            // Safari does not support "disconnect", see: https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API#Browser_compatibility
-            if (typeof this.observer.disconnect === 'function') {
-                this.observer.disconnect();
-            }
-        }
-    }
-    get _diameter() {
-        return this.SIZE_CONFIG[this.size].diameter;
-    }
-    get _shownValue() {
-        // This is needed to make an animation [0 -> value] when element is shown to the user
-        return this.hasElementBeenVisible ? this.value : 0;
-    }
-    get _radius() {
-        return this._diameter / 2;
-    }
-    get _strokeWidth() {
-        return this.SIZE_CONFIG[this.size].strokeWidth;
-    }
-    get _upperBound() {
-        // This is needed to make sure that an input value close to 100 is not shown as 100
-        return this.SIZE_CONFIG[this.size].upperBound;
-    }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: ProgressCircleComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.18", type: ProgressCircleComponent, isStandalone: true, selector: "kirby-progress-circle", inputs: { value: "value", size: "size", themeColor: "themeColor" }, host: { properties: { "attr.role": "this.role", "attr.aria-valuenow": "this.value", "class": "this._cssSize", "style.width.px": "this._diameter", "style.height.px": "this._diameter" } }, ngImport: i0, template: "<div class=\"transcluded-content\">\n  <ng-content></ng-content>\n</div>\n<kirby-progress-circle-ring\n  [themeColor]=\"themeColor\"\n  [value]=\"_shownValue\"\n  [radius]=\"_radius\"\n  [strokeWidth]=\"_strokeWidth\"\n  [upperBound]=\"_upperBound\"\n></kirby-progress-circle-ring>\n", styles: [".kirby-line-clamp{display:-webkit-box;-webkit-line-clamp:var(--line-clamp, none);-webkit-box-orient:vertical;overflow:hidden}:host{display:inline-block;position:relative}.transcluded-content,kirby-progress-circle-ring{position:absolute;top:0;left:0}kirby-progress-circle-ring{z-index:2}.transcluded-content{width:100%;height:100%;display:flex;justify-content:center;align-items:center;z-index:1;border-radius:50%;overflow:hidden}\n"], dependencies: [{ kind: "component", type: ProgressCircleRingComponent, selector: "kirby-progress-circle-ring", inputs: ["radius", "value", "themeColor", "strokeWidth", "upperBound"] }, { kind: "directive", type: ThemeColorDirective, selector: "kirby-avatar[themeColor],             kirby-card[themeColor],             kirby-icon[themeColor],             kirby-progress-circle-ring[themeColor],             kirby-modal-footer[themeColor],             kirby-empty-state[themeColor]", inputs: ["themeColor"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: ProgressCircleComponent, decorators: [{
-            type: Component,
-            args: [{ imports: [ProgressCircleRingComponent, ThemeColorDirective], selector: 'kirby-progress-circle', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"transcluded-content\">\n  <ng-content></ng-content>\n</div>\n<kirby-progress-circle-ring\n  [themeColor]=\"themeColor\"\n  [value]=\"_shownValue\"\n  [radius]=\"_radius\"\n  [strokeWidth]=\"_strokeWidth\"\n  [upperBound]=\"_upperBound\"\n></kirby-progress-circle-ring>\n", styles: [".kirby-line-clamp{display:-webkit-box;-webkit-line-clamp:var(--line-clamp, none);-webkit-box-orient:vertical;overflow:hidden}:host{display:inline-block;position:relative}.transcluded-content,kirby-progress-circle-ring{position:absolute;top:0;left:0}kirby-progress-circle-ring{z-index:2}.transcluded-content{width:100%;height:100%;display:flex;justify-content:center;align-items:center;z-index:1;border-radius:50%;overflow:hidden}\n"] }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }], propDecorators: { role: [{
-                type: HostBinding,
-                args: ['attr.role']
-            }], value: [{
-                type: HostBinding,
-                args: ['attr.aria-valuenow']
-            }, {
-                type: Input
-            }], size: [{
-                type: Input
-            }], themeColor: [{
-                type: Input
-            }], _cssSize: [{
-                type: HostBinding,
-                args: ['class']
-            }], _diameter: [{
-                type: HostBinding,
-                args: ['style.width.px']
-            }, {
-                type: HostBinding,
-                args: ['style.height.px']
-            }] } });
-
-/**
- * Generated bundle index. Do not edit.
- */
-
+import * as i0 from "@angular/core";
+import { ChangeDetectionStrategy, Component, HostBinding, Input } from "@angular/core";
+import { ThemeColorDirective } from "@kirbydesign/designsystem/shared";
+var ProgressCircleRingComponent = class ProgressCircleRingComponent {
+	constructor() {
+		this.UPPER_AND_LOWER_BOUND_GAP = 2.5;
+		this.value = 0;
+		this.themeColor = "success";
+		this.size = "md";
+	}
+	get _sizeClass() {
+		return this.size;
+	}
+	ngAfterViewInit() {
+		this.viewInitialized = true;
+	}
+	get _progress() {
+		if (this.value <= 0) return 0;
+		if (this.value >= 100) return 100;
+		return Math.min(this.value, 100 - this.UPPER_AND_LOWER_BOUND_GAP);
+	}
+	get _linecap() {
+		return this._progress <= 0 || this._progress >= 100 ? "butt" : "round";
+	}
+	get _remainder() {
+		return 100 - this._progress;
+	}
+	static {
+		this.ɵfac = i0.ɵɵngDeclareFactory({
+			minVersion: "12.0.0",
+			version: "22.2.3",
+			ngImport: i0,
+			type: ProgressCircleRingComponent,
+			deps: [],
+			target: i0.ɵɵFactoryTarget.Component
+		});
+	}
+	static {
+		this.ɵcmp = i0.ɵɵngDeclareComponent({
+			minVersion: "14.0.0",
+			version: "22.2.3",
+			type: ProgressCircleRingComponent,
+			isStandalone: true,
+			selector: "kirby-progress-circle-ring",
+			inputs: {
+				value: "value",
+				themeColor: "themeColor",
+				size: "size"
+			},
+			host: { properties: {
+				"class": "this._sizeClass",
+				"class.view-initialized": "this.viewInitialized"
+			} },
+			ngImport: i0,
+			template: "<svg width=\"100%\" height=\"100%\" aria-hidden=\"true\">\n  <circle\n    shape-rendering=\"geometricPrecision\"\n    class=\"circle\"\n    fill=\"transparent\"\n    cx=\"50%\"\n    cy=\"50%\"\n  />\n  <circle\n    shape-rendering=\"geometricPrecision\"\n    class=\"progress\"\n    fill=\"transparent\"\n    pathLength=\"100\"\n    cx=\"50%\"\n    cy=\"50%\"\n    [attr.stroke-linecap]=\"_linecap\"\n    [attr.stroke-dasharray]=\"_progress + ' ' + _remainder\"\n  />\n</svg>\n",
+			styles: [".kirby-line-clamp{display:-webkit-box;-webkit-line-clamp:var(--line-clamp, none);-webkit-box-orient:vertical;overflow:hidden}:host{width:100%;height:100%}:host.success{--kirby-progress-circle-stroke-color: var(--kirby-color-border-success-loud)}:host.warning{--kirby-progress-circle-stroke-color: var(--kirby-color-border-warning-loud)}:host.danger{--kirby-progress-circle-stroke-color: var(--kirby-color-border-danger-loud)}:host.view-initialized .progress{transition-property:stroke-dasharray,stroke;transition-duration:var(--kirby-transition-duration-extra-long);transition-timing-function:var(--kirby-transition-easing-enter-exit);transform-origin:50% 50%;stroke:var(--kirby-progress-circle-stroke-color, var(--kirby-color-border-success-loud))}svg{rotate:-90deg}.circle,.progress{r:calc(50% - var(--kirby-progress-circle-stroke-width, 4px) / 2);stroke-width:var(--kirby-progress-circle-stroke-width, 4px)}.circle{stroke:var(--kirby-color-border-base-quiet)}\n"],
+			changeDetection: i0.ChangeDetectionStrategy.OnPush
+		});
+	}
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.3",
+	ngImport: i0,
+	type: ProgressCircleRingComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "kirby-progress-circle-ring",
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			template: "<svg width=\"100%\" height=\"100%\" aria-hidden=\"true\">\n  <circle\n    shape-rendering=\"geometricPrecision\"\n    class=\"circle\"\n    fill=\"transparent\"\n    cx=\"50%\"\n    cy=\"50%\"\n  />\n  <circle\n    shape-rendering=\"geometricPrecision\"\n    class=\"progress\"\n    fill=\"transparent\"\n    pathLength=\"100\"\n    cx=\"50%\"\n    cy=\"50%\"\n    [attr.stroke-linecap]=\"_linecap\"\n    [attr.stroke-dasharray]=\"_progress + ' ' + _remainder\"\n  />\n</svg>\n",
+			styles: [".kirby-line-clamp{display:-webkit-box;-webkit-line-clamp:var(--line-clamp, none);-webkit-box-orient:vertical;overflow:hidden}:host{width:100%;height:100%}:host.success{--kirby-progress-circle-stroke-color: var(--kirby-color-border-success-loud)}:host.warning{--kirby-progress-circle-stroke-color: var(--kirby-color-border-warning-loud)}:host.danger{--kirby-progress-circle-stroke-color: var(--kirby-color-border-danger-loud)}:host.view-initialized .progress{transition-property:stroke-dasharray,stroke;transition-duration:var(--kirby-transition-duration-extra-long);transition-timing-function:var(--kirby-transition-easing-enter-exit);transform-origin:50% 50%;stroke:var(--kirby-progress-circle-stroke-color, var(--kirby-color-border-success-loud))}svg{rotate:-90deg}.circle,.progress{r:calc(50% - var(--kirby-progress-circle-stroke-width, 4px) / 2);stroke-width:var(--kirby-progress-circle-stroke-width, 4px)}.circle{stroke:var(--kirby-color-border-base-quiet)}\n"]
+		}]
+	}],
+	propDecorators: {
+		value: [{ type: Input }],
+		themeColor: [{ type: Input }],
+		size: [{ type: Input }],
+		_sizeClass: [{
+			type: HostBinding,
+			args: ["class"]
+		}],
+		viewInitialized: [{
+			type: HostBinding,
+			args: ["class.view-initialized"]
+		}]
+	}
+});
+var ProgressCircleComponent = class ProgressCircleComponent {
+	get _cssSize() {
+		return this.size;
+	}
+	constructor(elementRef, changeDetectorRef) {
+		this.elementRef = elementRef;
+		this.changeDetectorRef = changeDetectorRef;
+		this.role = "progressbar";
+		this.value = 0;
+		this.size = "md";
+		this.themeColor = "success";
+		this.onIntersectionChange = (entries) => {
+			this.hasElementBeenVisible = entries && entries.some((entry) => entry.isIntersecting);
+			if (this.hasElementBeenVisible) {
+				this.unobserve();
+				this.changeDetectorRef.markForCheck();
+			}
+		};
+	}
+	ngAfterViewInit() {
+		if (!this.observer) {
+			this.observer = new IntersectionObserver(this.onIntersectionChange, { threshold: .5 });
+			this.observer.observe(this.elementRef.nativeElement);
+		}
+	}
+	ngOnDestroy() {
+		this.unobserve();
+	}
+	unobserve() {
+		if (this.observer) {
+			this.observer.unobserve(this.elementRef.nativeElement);
+			if (typeof this.observer.disconnect === "function") this.observer.disconnect();
+		}
+	}
+	get _shownValue() {
+		return this.hasElementBeenVisible ? this.value : 0;
+	}
+	static {
+		this.ɵfac = i0.ɵɵngDeclareFactory({
+			minVersion: "12.0.0",
+			version: "22.2.3",
+			ngImport: i0,
+			type: ProgressCircleComponent,
+			deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }],
+			target: i0.ɵɵFactoryTarget.Component
+		});
+	}
+	static {
+		this.ɵcmp = i0.ɵɵngDeclareComponent({
+			minVersion: "14.0.0",
+			version: "22.2.3",
+			type: ProgressCircleComponent,
+			isStandalone: true,
+			selector: "kirby-progress-circle",
+			inputs: {
+				value: "value",
+				size: "size",
+				themeColor: "themeColor"
+			},
+			host: { properties: {
+				"attr.role": "this.role",
+				"attr.aria-valuenow": "this.value",
+				"class": "this._cssSize"
+			} },
+			ngImport: i0,
+			template: "<div class=\"transcluded-content\">\n  <ng-content></ng-content>\n</div>\n<kirby-progress-circle-ring\n  [themeColor]=\"themeColor\"\n  [value]=\"_shownValue\"\n  [size]=\"size\"\n></kirby-progress-circle-ring>\n",
+			styles: [":host{display:inline-block;position:relative;overflow:hidden;width:var(--kirby-progress-circle-size);height:var(--kirby-progress-circle-size)}:host(.sm){--kirby-progress-circle-stroke-width: 3px;--kirby-progress-circle-size: clamp(var(--kirby-spacing-xl), 2.5em, var(--kirby-spacing-xxxl))}:host(.md){--kirby-progress-circle-stroke-width: 4px;--kirby-progress-circle-size: var(--kirby-spacing-xxxl)}:host(.lg){--kirby-progress-circle-stroke-width: 6px;--kirby-progress-circle-size: calc(var(--kirby-spacing-xxxl) + var(--kirby-spacing-xl))}:host(.sm) .transcluded-content{font-size:var(--kirby-font-size-xs)}:host(.md) .transcluded-content,:host(.lg) .transcluded-content{font-size:var(--kirby-font-size-s)}.transcluded-content,kirby-progress-circle-ring{position:absolute;top:0;left:0}kirby-progress-circle-ring{z-index:calc(var(--kirby-z-index-default) + 1)}.transcluded-content{width:100%;height:100%;display:flex;justify-content:center;align-items:center;z-index:var(--kirby-z-index-default);border-radius:var(--kirby-border-radius-circle);overflow:hidden}\n"],
+			dependencies: [{
+				kind: "component",
+				type: ProgressCircleRingComponent,
+				selector: "kirby-progress-circle-ring",
+				inputs: [
+					"value",
+					"themeColor",
+					"size"
+				]
+			}, {
+				kind: "directive",
+				type: ThemeColorDirective,
+				selector: "kirby-avatar[themeColor],             kirby-card[themeColor],             kirby-icon[themeColor],             kirby-progress-circle-ring[themeColor],             kirby-modal-footer[themeColor],             kirby-empty-state[themeColor]",
+				inputs: ["themeColor"]
+			}],
+			changeDetection: i0.ChangeDetectionStrategy.OnPush
+		});
+	}
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.3",
+	ngImport: i0,
+	type: ProgressCircleComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			imports: [ProgressCircleRingComponent, ThemeColorDirective],
+			selector: "kirby-progress-circle",
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			template: "<div class=\"transcluded-content\">\n  <ng-content></ng-content>\n</div>\n<kirby-progress-circle-ring\n  [themeColor]=\"themeColor\"\n  [value]=\"_shownValue\"\n  [size]=\"size\"\n></kirby-progress-circle-ring>\n",
+			styles: [":host{display:inline-block;position:relative;overflow:hidden;width:var(--kirby-progress-circle-size);height:var(--kirby-progress-circle-size)}:host(.sm){--kirby-progress-circle-stroke-width: 3px;--kirby-progress-circle-size: clamp(var(--kirby-spacing-xl), 2.5em, var(--kirby-spacing-xxxl))}:host(.md){--kirby-progress-circle-stroke-width: 4px;--kirby-progress-circle-size: var(--kirby-spacing-xxxl)}:host(.lg){--kirby-progress-circle-stroke-width: 6px;--kirby-progress-circle-size: calc(var(--kirby-spacing-xxxl) + var(--kirby-spacing-xl))}:host(.sm) .transcluded-content{font-size:var(--kirby-font-size-xs)}:host(.md) .transcluded-content,:host(.lg) .transcluded-content{font-size:var(--kirby-font-size-s)}.transcluded-content,kirby-progress-circle-ring{position:absolute;top:0;left:0}kirby-progress-circle-ring{z-index:calc(var(--kirby-z-index-default) + 1)}.transcluded-content{width:100%;height:100%;display:flex;justify-content:center;align-items:center;z-index:var(--kirby-z-index-default);border-radius:var(--kirby-border-radius-circle);overflow:hidden}\n"]
+		}]
+	}],
+	ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }],
+	propDecorators: {
+		role: [{
+			type: HostBinding,
+			args: ["attr.role"]
+		}],
+		value: [{
+			type: HostBinding,
+			args: ["attr.aria-valuenow"]
+		}, { type: Input }],
+		size: [{ type: Input }],
+		themeColor: [{ type: Input }],
+		_cssSize: [{
+			type: HostBinding,
+			args: ["class"]
+		}]
+	}
+});
 export { ProgressCircleComponent, ProgressCircleRingComponent };
-//# sourceMappingURL=kirbydesign-designsystem-progress-circle.mjs.map
+
+//# sourceMappingURL=kirbydesign-designsystem-progress-circle.mjs.map

package/fesm2022/kirbydesign-designsystem-progress-circle.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"kirbydesign-designsystem-progress-circle.mjs","sources":["../../progress-circle/src/progress-circle-ring.component.ts","../../progress-circle/src/progress-circle-ring.component.html","../../progress-circle/src/progress-circle.component.ts","../../progress-circle/src/progress-circle.component.html","../../progress-circle/src/kirbydesign-designsystem-progress-circle.ts"],"sourcesContent":["import {\n  AfterViewInit,\n  ChangeDetectionStrategy,\n  Component,\n  HostBinding,\n  Input,\n} from '@angular/core';\n\n@Component({\n  selector: 'kirby-progress-circle-ring',\n  templateUrl: './progress-circle-ring.component.html',\n  styleUrls: ['./progress-circle-ring.component.scss'],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class ProgressCircleRingComponent implements AfterViewInit {\n  @Input() radius: number; // The desired outer radius of the SVG circle\n  @Input() value: number = 0;\n  @Input() themeColor: 'success' | 'warning' | 'danger' = 'success';\n  @Input() strokeWidth: number;\n  @Input() upperBound: number;\n\n  @HostBinding('class.view-initialized')\n  viewInitialized;\n\n  ngAfterViewInit(): void {\n    this.viewInitialized = true;\n  }\n\n  @HostBinding('style.width.px')\n  @HostBinding('style.height.px')\n  get _diameter(): number {\n    return this.radius * 2;\n  }\n\n  get _centerRadius(): number {\n    return this.radius - this.strokeWidth / 2;\n  }\n\n  get _centerCircumference(): number {\n    return this._centerRadius * 2 * Math.PI;\n  }\n\n  get _progress(): number {\n    const valueWithinBounds = this.value < this.upperBound || this.value > 99;\n    const _value = valueWithinBounds ? this.value : this.upperBound;\n    const progressPercentage = _value / 100;\n    return this._centerCircumference * progressPercentage;\n  }\n\n  get _remainder(): number {\n    return this._centerCircumference - this._progress;\n  }\n\n  get _progressStrokeWidth(): number {\n    // Do not render stroke if progress is 0, otherwise it will show as a dot\n    if (this._progress === 0) return 0;\n\n    return this.strokeWidth;\n  }\n}\n","<svg [attr.width]=\"_diameter\" [attr.height]=\"_diameter\" aria-hidden=\"true\">\n  <circle\n    shape-rendering=\"geometricPrecision\"\n    class=\"circle\"\n    fill=\"transparent\"\n    [attr.stroke-width]=\"strokeWidth\"\n    [attr.r]=\"_centerRadius\"\n    [attr.cx]=\"radius\"\n    [attr.cy]=\"radius\"\n  />\n  <circle\n    shape-rendering=\"geometricPrecision\"\n    class=\"progress\"\n    fill=\"transparent\"\n    stroke-linecap=\"round\"\n    [attr.stroke-width]=\"_progressStrokeWidth\"\n    [attr.r]=\"_centerRadius\"\n    [attr.cx]=\"radius\"\n    [attr.cy]=\"radius\"\n    [attr.stroke-dasharray]=\"[_progress, _remainder]\"\n  />\n</svg>\n","import {\n  AfterViewInit,\n  ChangeDetectionStrategy,\n  ChangeDetectorRef,\n  Component,\n  ElementRef,\n  HostBinding,\n  Input,\n  OnDestroy,\n} from '@angular/core';\nimport { ThemeColorDirective } from '@kirbydesign/designsystem/shared';\nimport { ProgressCircleRingComponent } from './progress-circle-ring.component';\n\n@Component({\n  imports: [ProgressCircleRingComponent, ThemeColorDirective],\n  selector: 'kirby-progress-circle',\n  templateUrl: './progress-circle.component.html',\n  styleUrls: ['./progress-circle.component.scss'],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class ProgressCircleComponent implements AfterViewInit, OnDestroy {\n  readonly SIZE_CONFIG = {\n    sm: { diameter: 40, strokeWidth: 3, upperBound: 95 },\n    md: { diameter: 56, strokeWidth: 4, upperBound: 96 },\n    lg: { diameter: 96, strokeWidth: 6, upperBound: 97 },\n  };\n\n  @HostBinding('attr.role') readonly role = 'progressbar';\n  @HostBinding('attr.aria-valuenow')\n  @Input()\n  value: number = 0;\n  @Input() size: 'sm' | 'md' | 'lg' = 'md';\n  @Input() themeColor: 'success' | 'warning' | 'danger' = 'success';\n\n  @HostBinding('class')\n  get _cssSize() {\n    return this.size;\n  }\n\n  private hasElementBeenVisible?: boolean;\n  private observer: IntersectionObserver;\n\n  constructor(\n    private elementRef: ElementRef<HTMLElement>,\n    private changeDetectorRef: ChangeDetectorRef\n  ) {}\n\n  ngAfterViewInit(): void {\n    if (!this.observer) {\n      this.observer = new IntersectionObserver(this.onIntersectionChange, {\n        threshold: 0.5,\n      });\n      this.observer.observe(this.elementRef.nativeElement);\n    }\n  }\n\n  ngOnDestroy(): void {\n    this.unobserve();\n  }\n\n  private onIntersectionChange = (entries: IntersectionObserverEntry[]) => {\n    this.hasElementBeenVisible = entries && entries.some((entry) => entry.isIntersecting);\n    if (this.hasElementBeenVisible) {\n      this.unobserve();\n      this.changeDetectorRef.markForCheck();\n    }\n  };\n\n  private unobserve() {\n    if (this.observer) {\n      this.observer.unobserve(this.elementRef.nativeElement);\n      // Safari does not support \"disconnect\", see: https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API#Browser_compatibility\n      if (typeof this.observer.disconnect === 'function') {\n        this.observer.disconnect();\n      }\n    }\n  }\n\n  @HostBinding('style.width.px')\n  @HostBinding('style.height.px')\n  get _diameter(): number {\n    return this.SIZE_CONFIG[this.size].diameter;\n  }\n\n  get _shownValue() {\n    // This is needed to make an animation [0 -> value] when element is shown to the user\n    return this.hasElementBeenVisible ? this.value : 0;\n  }\n\n  get _radius() {\n    return this._diameter / 2;\n  }\n\n  get _strokeWidth() {\n    return this.SIZE_CONFIG[this.size].strokeWidth;\n  }\n\n  get _upperBound() {\n    // This is needed to make sure that an input value close to 100 is not shown as 100\n    return this.SIZE_CONFIG[this.size].upperBound;\n  }\n}\n","<div class=\"transcluded-content\">\n  <ng-content></ng-content>\n</div>\n<kirby-progress-circle-ring\n  [themeColor]=\"themeColor\"\n  [value]=\"_shownValue\"\n  [radius]=\"_radius\"\n  [strokeWidth]=\"_strokeWidth\"\n  [upperBound]=\"_upperBound\"\n></kirby-progress-circle-ring>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public_api';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"kirbydesign-designsystem-progress-circle.mjs","names":[],"sources":["../../progress-circle/src/progress-circle-ring.component.ts","../../progress-circle/src/progress-circle-ring.component.html","../../progress-circle/src/progress-circle.component.ts","../../progress-circle/src/progress-circle.component.html"],"sourcesContent":["import {\n  AfterViewInit,\n  ChangeDetectionStrategy,\n  Component,\n  HostBinding,\n  Input,\n} from '@angular/core';\n\n@Component({\n  selector: 'kirby-progress-circle-ring',\n  templateUrl: './progress-circle-ring.component.html',\n  styleUrls: ['./progress-circle-ring.component.scss'],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class ProgressCircleRingComponent implements AfterViewInit {\n  private readonly UPPER_AND_LOWER_BOUND_GAP = 2.5;\n\n  @Input() value: number = 0;\n  @Input() themeColor: 'success' | 'warning' | 'danger' = 'success';\n  @Input() size: 'sm' | 'md' | 'lg' = 'md';\n\n  @HostBinding('class')\n  get _sizeClass() {\n    return this.size;\n  }\n\n  @HostBinding('class.view-initialized')\n  viewInitialized;\n\n  ngAfterViewInit(): void {\n    this.viewInitialized = true;\n  }\n\n  get _progress(): number {\n    if (this.value <= 0) return 0;\n    if (this.value >= 100) return 100;\n    return Math.min(this.value, 100 - this.UPPER_AND_LOWER_BOUND_GAP);\n  }\n\n  get _linecap(): 'butt' | 'round' {\n    return this._progress <= 0 || this._progress >= 100 ? 'butt' : 'round';\n  }\n\n  get _remainder(): number {\n    return 100 - this._progress;\n  }\n}\n","<svg width=\"100%\" height=\"100%\" aria-hidden=\"true\">\n  <circle\n    shape-rendering=\"geometricPrecision\"\n    class=\"circle\"\n    fill=\"transparent\"\n    cx=\"50%\"\n    cy=\"50%\"\n  />\n  <circle\n    shape-rendering=\"geometricPrecision\"\n    class=\"progress\"\n    fill=\"transparent\"\n    pathLength=\"100\"\n    cx=\"50%\"\n    cy=\"50%\"\n    [attr.stroke-linecap]=\"_linecap\"\n    [attr.stroke-dasharray]=\"_progress + ' ' + _remainder\"\n  />\n</svg>\n","import {\n  AfterViewInit,\n  ChangeDetectionStrategy,\n  ChangeDetectorRef,\n  Component,\n  ElementRef,\n  HostBinding,\n  Input,\n  OnDestroy,\n} from '@angular/core';\nimport { ThemeColorDirective } from '@kirbydesign/designsystem/shared';\nimport { ProgressCircleRingComponent } from './progress-circle-ring.component';\n\n@Component({\n  imports: [ProgressCircleRingComponent, ThemeColorDirective],\n  selector: 'kirby-progress-circle',\n  templateUrl: './progress-circle.component.html',\n  styleUrls: ['./progress-circle.component.scss'],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class ProgressCircleComponent implements AfterViewInit, OnDestroy {\n  @HostBinding('attr.role') readonly role = 'progressbar';\n  @HostBinding('attr.aria-valuenow')\n  @Input()\n  value: number = 0;\n  @Input() size: 'sm' | 'md' | 'lg' = 'md';\n  @Input() themeColor: 'success' | 'warning' | 'danger' = 'success';\n\n  @HostBinding('class')\n  get _cssSize() {\n    return this.size;\n  }\n\n  private hasElementBeenVisible?: boolean;\n  private observer: IntersectionObserver;\n\n  constructor(\n    private elementRef: ElementRef<HTMLElement>,\n    private changeDetectorRef: ChangeDetectorRef\n  ) {}\n\n  ngAfterViewInit(): void {\n    if (!this.observer) {\n      this.observer = new IntersectionObserver(this.onIntersectionChange, {\n        threshold: 0.5,\n      });\n      this.observer.observe(this.elementRef.nativeElement);\n    }\n  }\n\n  ngOnDestroy(): void {\n    this.unobserve();\n  }\n\n  private onIntersectionChange = (entries: IntersectionObserverEntry[]) => {\n    this.hasElementBeenVisible = entries && entries.some((entry) => entry.isIntersecting);\n    if (this.hasElementBeenVisible) {\n      this.unobserve();\n      this.changeDetectorRef.markForCheck();\n    }\n  };\n\n  private unobserve() {\n    if (this.observer) {\n      this.observer.unobserve(this.elementRef.nativeElement);\n      // Safari does not support \"disconnect\", see: https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API#Browser_compatibility\n      if (typeof this.observer.disconnect === 'function') {\n        this.observer.disconnect();\n      }\n    }\n  }\n\n  get _shownValue() {\n    // This is needed to make an animation [0 -> value] when element is shown to the user\n    return this.hasElementBeenVisible ? this.value : 0;\n  }\n}\n","<div class=\"transcluded-content\">\n  <ng-content></ng-content>\n</div>\n<kirby-progress-circle-ring\n  [themeColor]=\"themeColor\"\n  [value]=\"_shownValue\"\n  [size]=\"size\"\n></kirby-progress-circle-ring>\n"],"mappings":"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"}