@forgeroute/ui 0.4.5 → 0.4.6

package/fesm2022/forgeroute-ui.mjs

@@ -14030,8 +14030,10 @@ var RadioComponent = class RadioComponent {
 			alias: "disabled"
 		});
 		this.disabled = this._disabledInput;
-		this._labelId = `rd-${Math.random().toString(36).slice(2, 8)}-label`;
-		this._labelledBy = computed(() => this.label() && this.description() && !this.ariaLabel() ? this._labelId : null, ...ngDevMode ? [{ debugName: "_labelledBy" }] : /* istanbul ignore next */ []);
+		this.labelId = input("", ...ngDevMode ? [{ debugName: "labelId" }] : /* istanbul ignore next */ []);
+		this._generatedLabelId = `rd-${Math.random().toString(36).slice(2, 8)}-label`;
+		this._labelId = computed(() => this.labelId() || this._generatedLabelId, ...ngDevMode ? [{ debugName: "_labelId" }] : /* istanbul ignore next */ []);
+		this._labelledBy = computed(() => this.label() && this.description() && !this.ariaLabel() ? this._labelId() : null, ...ngDevMode ? [{ debugName: "_labelledBy" }] : /* istanbul ignore next */ []);
 		this._descriptionId = `rd-${Math.random().toString(36).slice(2, 8)}-desc`;
 		this._describedByIds = computed(() => {
 			return [this.describedBy(), this.description() ? this._descriptionId : ""].filter(Boolean).join(" ") || null;
@@ -14128,6 +14130,13 @@ var RadioComponent = class RadioComponent {
 					isSignal: true,
 					isRequired: false,
 					transformFunction: null
+				},
+				labelId: {
+					classPropertyName: "labelId",
+					publicName: "labelId",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
 				}
 			},
 			outputs: { selected: "selected" },
@@ -14152,7 +14161,7 @@ var RadioComponent = class RadioComponent {
         (change)="onChange($event)"
       />
       <span class="rd-text">
-        @if (label()) { <span class="rd-label" [id]="_labelId">{{ label() }}</span> }
+        @if (label()) { <span class="rd-label" [id]="_labelId()">{{ label() }}</span> }
         @if (description()) { <span class="rd-description" [id]="_descriptionId">{{ description() }}</span> }
         <ng-content />
       </span>
@@ -14195,7 +14204,7 @@ i0.ɵɵngDeclareClassMetadata({
         (change)="onChange($event)"
       />
       <span class="rd-text">
-        @if (label()) { <span class="rd-label" [id]="_labelId">{{ label() }}</span> }
+        @if (label()) { <span class="rd-label" [id]="_labelId()">{{ label() }}</span> }
         @if (description()) { <span class="rd-description" [id]="_descriptionId">{{ description() }}</span> }
         <ng-content />
       </span>
@@ -14285,6 +14294,14 @@ i0.ɵɵngDeclareClassMetadata({
 				required: false
 			}]
 		}],
+		labelId: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "labelId",
+				required: false
+			}]
+		}],
 		selected: [{
 			type: i0.Output,
 			args: ["selected"]
@@ -14352,6 +14369,9 @@ var RadioGroupComponent = class RadioGroupComponent {
 	get _name() {
 		return this.name() || this._generatedName;
 	}
+	_optionLabelId(index) {
+		return `${this._generatedName}-opt-${index}-label`;
+	}
 	constructor() {
 		this.label = input("", ...ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []);
 		this.options = input([], ...ngDevMode ? [{ debugName: "options" }] : /* istanbul ignore next */ []);
@@ -14567,9 +14587,10 @@ var RadioGroupComponent = class RadioGroupComponent {
             [invalid]="!!_activeError()"
             [describedBy]="(_activeError() || hint()) ? _descId : ''"
             [controls]="(_value() === opt.value && _nestedContent().has(opt.value)) ? _nestedId : ''"
+            [labelId]="_nestedContent().has(opt.value) ? _optionLabelId($index) : ''"
             (selected)="onSelect($event)" />
           @if (_value() === opt.value && _nestedContent().get(opt.value); as nested) {
-            <div class="rg-nested" [id]="_nestedId"><ng-container [ngTemplateOutlet]="nested" /></div>
+            <div class="rg-nested" role="group" [id]="_nestedId" [attr.aria-labelledby]="opt.label ? _optionLabelId($index) : null"><ng-container [ngTemplateOutlet]="nested" /></div>
           }
         }
       </div>
@@ -14596,7 +14617,8 @@ var RadioGroupComponent = class RadioGroupComponent {
 					"invalid",
 					"describedBy",
 					"controls",
-					"disabled"
+					"disabled",
+					"labelId"
 				],
 				outputs: ["selected"]
 			}, {
@@ -14670,9 +14692,10 @@ i0.ɵɵngDeclareClassMetadata({
             [invalid]="!!_activeError()"
             [describedBy]="(_activeError() || hint()) ? _descId : ''"
             [controls]="(_value() === opt.value && _nestedContent().has(opt.value)) ? _nestedId : ''"
+            [labelId]="_nestedContent().has(opt.value) ? _optionLabelId($index) : ''"
             (selected)="onSelect($event)" />
           @if (_value() === opt.value && _nestedContent().get(opt.value); as nested) {
-            <div class="rg-nested" [id]="_nestedId"><ng-container [ngTemplateOutlet]="nested" /></div>
+            <div class="rg-nested" role="group" [id]="_nestedId" [attr.aria-labelledby]="opt.label ? _optionLabelId($index) : null"><ng-container [ngTemplateOutlet]="nested" /></div>
           }
         }
       </div>
@@ -29099,7 +29122,8 @@ var RadioMatrixComponent = class RadioMatrixComponent {
 					"invalid",
 					"describedBy",
 					"controls",
-					"disabled"
+					"disabled",
+					"labelId"
 				],
 				outputs: ["selected"]
 			}],
@@ -29979,7 +30003,12 @@ var PdfHotspotComponent = class PdfHotspotComponent {
 		this.ariaLabel = input("", ...ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []);
 		this.image = input(null, ...ngDevMode ? [{ debugName: "image" }] : /* istanbul ignore next */ []);
 		this.imageAlt = input("Applied signature", ...ngDevMode ? [{ debugName: "imageAlt" }] : /* istanbul ignore next */ []);
+		this.scale = input(1, ...ngDevMode ? [{ debugName: "scale" }] : /* istanbul ignore next */ []);
 		this.activate = output();
+		this._scaleVar = computed(() => {
+			const s = this.scale();
+			return typeof s === "number" && Number.isFinite(s) && s > 0 && s !== 1 ? String(s) : null;
+		}, ...ngDevMode ? [{ debugName: "_scaleVar" }] : /* istanbul ignore next */ []);
 		this.fontSize = computed(() => Math.min(11, Math.max(7, this.height() * .25)), ...ngDevMode ? [{ debugName: "fontSize" }] : /* istanbul ignore next */ []);
 	}
 	static {
@@ -30076,6 +30105,13 @@ var PdfHotspotComponent = class PdfHotspotComponent {
 					isSignal: true,
 					isRequired: false,
 					transformFunction: null
+				},
+				scale: {
+					classPropertyName: "scale",
+					publicName: "scale",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
 				}
 			},
 			outputs: { activate: "activate" },
@@ -30084,7 +30120,8 @@ var PdfHotspotComponent = class PdfHotspotComponent {
 				"style.top.px": "y()",
 				"style.width.px": "width()",
 				"style.height.px": "height()",
-				"attr.data-state": "state()"
+				"attr.data-state": "state()",
+				"style.--ph-scale": "_scaleVar()"
 			} },
 			ngImport: i0,
 			template: `
@@ -30103,7 +30140,7 @@ var PdfHotspotComponent = class PdfHotspotComponent {
     }
   `,
 			isInline: true,
-			styles: [":host{position:absolute;display:block;box-sizing:border-box}.ph-image{display:block;width:100%;height:100%;object-fit:contain;object-position:left}.ph-button{position:relative;box-sizing:border-box;width:100%;height:100%;white-space:nowrap;font:inherit;font-weight:500;line-height:1;border:2px solid #d1d5db;background:#f3f4f6;color:#9ca3af;cursor:not-allowed;box-shadow:0 4px 10px #0000002e;transition:background-color .15s,border-color .15s}.ph-text{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:1.2}.ph-button.ph-ready{border-color:#2563eb;background:#dbeafe;color:#1d4ed8;cursor:pointer}.ph-button.ph-ready:hover{background:#bfdbfe}.ph-button.ph-ready.ph-warning{border-color:#f59e0b;background:#fffbeb;color:#b45309}.ph-button.ph-ready.ph-warning:hover{background:#fef3c7}.ph-button:focus-visible{outline:2px solid #2563eb;outline-offset:2px}@media(pointer:coarse){.ph-button:after{content:\"\";position:absolute;left:0;right:0;top:50%;height:100%;min-height:44px;transform:translateY(-50%)}}\n"],
+			styles: [":host{position:absolute;display:block;box-sizing:border-box}.ph-image{display:block;width:100%;height:100%;object-fit:contain;object-position:left}.ph-button{position:relative;box-sizing:border-box;width:100%;height:100%;white-space:nowrap;font:inherit;font-weight:500;line-height:1;border:2px solid #d1d5db;background:#f3f4f6;color:#9ca3af;cursor:not-allowed;box-shadow:0 4px 10px #0000002e;transition:background-color .15s,border-color .15s}.ph-text{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:1.2}.ph-button.ph-ready{border-color:#2563eb;background:#dbeafe;color:#1d4ed8;cursor:pointer}.ph-button.ph-ready:hover{background:#bfdbfe}.ph-button.ph-ready.ph-warning{border-color:#f59e0b;background:#fffbeb;color:#b45309}.ph-button.ph-ready.ph-warning:hover{background:#fef3c7}.ph-button:focus-visible{outline:2px solid #2563eb;outline-offset:2px}@media(pointer:coarse){.ph-button:after{content:\"\";position:absolute;left:0;right:0;top:50%;height:100%;min-height:calc(44px / var(--ph-scale, 1));transform:translateY(-50%)}}\n"],
 			changeDetection: i0.ChangeDetectionStrategy.OnPush
 		});
 	}
@@ -30124,7 +30161,8 @@ i0.ɵɵngDeclareClassMetadata({
 				"[style.top.px]": "y()",
 				"[style.width.px]": "width()",
 				"[style.height.px]": "height()",
-				"[attr.data-state]": "state()"
+				"[attr.data-state]": "state()",
+				"[style.--ph-scale]": "_scaleVar()"
 			},
 			template: `
     @if (state() === 'signed' && image()) {
@@ -30141,7 +30179,7 @@ i0.ɵɵngDeclareClassMetadata({
         (click)="activate.emit()"><span class="ph-text">{{ state() === 'blocked' ? blockedLabel() : label() }}</span></button>
     }
   `,
-			styles: [":host{position:absolute;display:block;box-sizing:border-box}.ph-image{display:block;width:100%;height:100%;object-fit:contain;object-position:left}.ph-button{position:relative;box-sizing:border-box;width:100%;height:100%;white-space:nowrap;font:inherit;font-weight:500;line-height:1;border:2px solid #d1d5db;background:#f3f4f6;color:#9ca3af;cursor:not-allowed;box-shadow:0 4px 10px #0000002e;transition:background-color .15s,border-color .15s}.ph-text{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:1.2}.ph-button.ph-ready{border-color:#2563eb;background:#dbeafe;color:#1d4ed8;cursor:pointer}.ph-button.ph-ready:hover{background:#bfdbfe}.ph-button.ph-ready.ph-warning{border-color:#f59e0b;background:#fffbeb;color:#b45309}.ph-button.ph-ready.ph-warning:hover{background:#fef3c7}.ph-button:focus-visible{outline:2px solid #2563eb;outline-offset:2px}@media(pointer:coarse){.ph-button:after{content:\"\";position:absolute;left:0;right:0;top:50%;height:100%;min-height:44px;transform:translateY(-50%)}}\n"]
+			styles: [":host{position:absolute;display:block;box-sizing:border-box}.ph-image{display:block;width:100%;height:100%;object-fit:contain;object-position:left}.ph-button{position:relative;box-sizing:border-box;width:100%;height:100%;white-space:nowrap;font:inherit;font-weight:500;line-height:1;border:2px solid #d1d5db;background:#f3f4f6;color:#9ca3af;cursor:not-allowed;box-shadow:0 4px 10px #0000002e;transition:background-color .15s,border-color .15s}.ph-text{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:1.2}.ph-button.ph-ready{border-color:#2563eb;background:#dbeafe;color:#1d4ed8;cursor:pointer}.ph-button.ph-ready:hover{background:#bfdbfe}.ph-button.ph-ready.ph-warning{border-color:#f59e0b;background:#fffbeb;color:#b45309}.ph-button.ph-ready.ph-warning:hover{background:#fef3c7}.ph-button:focus-visible{outline:2px solid #2563eb;outline-offset:2px}@media(pointer:coarse){.ph-button:after{content:\"\";position:absolute;left:0;right:0;top:50%;height:100%;min-height:calc(44px / var(--ph-scale, 1));transform:translateY(-50%)}}\n"]
 		}]
 	}],
 	propDecorators: {
@@ -30233,6 +30271,14 @@ i0.ɵɵngDeclareClassMetadata({
 				required: false
 			}]
 		}],
+		scale: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "scale",
+				required: false
+			}]
+		}],
 		activate: [{
 			type: i0.Output,
 			args: ["activate"]