herum-shared 1.0.8 → 1.0.10
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.
- package/fesm2022/herum-shared-atoms.mjs +2 -2
- package/fesm2022/herum-shared-atoms.mjs.map +1 -1
- package/fesm2022/herum-shared-constants.mjs +1 -1
- package/fesm2022/herum-shared-constants.mjs.map +1 -1
- package/fesm2022/herum-shared.mjs +21 -21
- package/fesm2022/herum-shared.mjs.map +1 -1
- package/index.d.ts +4 -4
- package/package.json +1 -1
|
@@ -1408,30 +1408,30 @@ class QuizMultiAnswerQuestionComponent {
|
|
|
1408
1408
|
}
|
|
1409
1409
|
ngOnChanges(changes) {
|
|
1410
1410
|
if (changes['question'] && this.question) {
|
|
1411
|
-
|
|
1412
|
-
|
|
1413
|
-
|
|
1414
|
-
|
|
1411
|
+
this.answersForm = this.fb.group({});
|
|
1412
|
+
this.question.closedContent.answers?.forEach((answer, index) => {
|
|
1413
|
+
const controlName = this.answerControlNamePrefix + index;
|
|
1414
|
+
this.answersForm.addControl(controlName, new FormControl(this.getFormControlValue(index)));
|
|
1415
|
+
if (Object.keys(this.answersForm.controls).length && changes['question'].currentValue.id !== changes['question'].previousValue?.id) {
|
|
1415
1416
|
this.answersForm.get(controlName).valueChanges
|
|
1416
1417
|
.pipe(takeUntil(this.destroySubject$))
|
|
1417
1418
|
.subscribe((isChosen) => this._onAnswersChange(this.question.closedContent.answers[index], isChosen));
|
|
1418
|
-
}
|
|
1419
|
-
|
|
1420
|
-
else {
|
|
1421
|
-
this.question.closedContent.answers.forEach((answer, index) => {
|
|
1422
|
-
const controlName = `${this.controlNamePrefix}${index}`;
|
|
1419
|
+
}
|
|
1420
|
+
else {
|
|
1423
1421
|
this.answersForm.controls[controlName].setValue(this.getFormControlValue(index), { emitEvent: false });
|
|
1424
|
-
}
|
|
1425
|
-
}
|
|
1426
|
-
if (this.areAnswersRevealed || this.isCheckingMode)
|
|
1422
|
+
}
|
|
1423
|
+
});
|
|
1424
|
+
if (this.areAnswersRevealed || this.isCheckingMode) {
|
|
1427
1425
|
this.setAnswerTypeAttributes();
|
|
1428
|
-
|
|
1426
|
+
}
|
|
1427
|
+
if (this.correctAnswerCount === null || this.correctAnswerCount === undefined) {
|
|
1429
1428
|
this.correctAnswerCount = this.question.closedContent.answers.filter(answer => answer.isCorrect).length;
|
|
1429
|
+
}
|
|
1430
1430
|
}
|
|
1431
1431
|
}
|
|
1432
1432
|
setAnswerTypeAttributes() {
|
|
1433
1433
|
this.answerTypeAttributes = this.question.closedContent.answers.map((answer, index) => {
|
|
1434
|
-
const answerForm = this.answersForm.value[`${this.
|
|
1434
|
+
const answerForm = this.answersForm.value[`${this.answerControlNamePrefix}` + index];
|
|
1435
1435
|
return (!answerForm.type && this.iAnswerCorrect(answer.id, this.quizData)) ?
|
|
1436
1436
|
'correct-not-selected' :
|
|
1437
1437
|
answerForm.type + '-' + (answerForm.isChecked ? 'selected' : '');
|
|
@@ -1474,8 +1474,8 @@ class QuizMultiAnswerQuestionComponent {
|
|
|
1474
1474
|
isChecked: this._isAnswerChecked(id)
|
|
1475
1475
|
};
|
|
1476
1476
|
}
|
|
1477
|
-
get
|
|
1478
|
-
return '
|
|
1477
|
+
get answerControlNamePrefix() {
|
|
1478
|
+
return 'answerControlName';
|
|
1479
1479
|
}
|
|
1480
1480
|
;
|
|
1481
1481
|
get isBlocked() {
|
|
@@ -1486,11 +1486,11 @@ class QuizMultiAnswerQuestionComponent {
|
|
|
1486
1486
|
this.destroySubject$.complete();
|
|
1487
1487
|
}
|
|
1488
1488
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: QuizMultiAnswerQuestionComponent, deps: [{ token: i1$3.FormBuilder }], target: i0.ɵɵFactoryTarget.Component });
|
|
1489
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.17", type: QuizMultiAnswerQuestionComponent, isStandalone: false, selector: "quiz-multi-answer-question", inputs: { question: "question", quizData: "quizData", userAnswers: "userAnswers", isCheckingMode: "isCheckingMode", areAnswersRevealed: "areAnswersRevealed", areAnswersBlocked: "areAnswersBlocked", correctAnswerCount: "correctAnswerCount" }, outputs: { onAnswersChange: "onAnswersChange", onValidationChange: "onValidationChange" }, viewQueries: [{ propertyName: "checkboxes", predicate: HerumCheckboxComponent$1, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"main-container\">\r\n <p class=\"correct-answer-count\">\u05D9\u05E9 \u05DC\u05E1\u05DE\u05DF {{ correctAnswerCount }} \u05EA\u05E9\u05D5\u05D1\u05D5\u05EA</p>\r\n\r\n <form *ngIf=\"question.closedContent.answers\" [formGroup]=\"answersForm\" class=\"answers-container\">\r\n <div class=\"answer-item\" *ngFor=\"let answer of question.closedContent.answers;let i=index\">\r\n <div class=\"answer-container\" [ngClass]=\"{'revealed-answers':(areAnswersRevealed || isCheckingMode)}\"\r\n [attr.type]=\"(areAnswersRevealed || isCheckingMode) ? answerTypeAttributes[i] : ''\"\r\n
|
|
1489
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.17", type: QuizMultiAnswerQuestionComponent, isStandalone: false, selector: "quiz-multi-answer-question", inputs: { question: "question", quizData: "quizData", userAnswers: "userAnswers", isCheckingMode: "isCheckingMode", areAnswersRevealed: "areAnswersRevealed", areAnswersBlocked: "areAnswersBlocked", correctAnswerCount: "correctAnswerCount" }, outputs: { onAnswersChange: "onAnswersChange", onValidationChange: "onValidationChange" }, viewQueries: [{ propertyName: "checkboxes", predicate: HerumCheckboxComponent$1, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"main-container\">\r\n <p class=\"correct-answer-count\">\u05D9\u05E9 \u05DC\u05E1\u05DE\u05DF {{ correctAnswerCount }} \u05EA\u05E9\u05D5\u05D1\u05D5\u05EA</p>\r\n\r\n <form *ngIf=\"question.closedContent.answers\" [formGroup]=\"answersForm\" class=\"answers-container\">\r\n <div class=\"answer-item\" *ngFor=\"let answer of question.closedContent.answers;let i=index\">\r\n <div class=\"answer-container\" [ngClass]=\"{'revealed-answers':(areAnswersRevealed || isCheckingMode)}\"\r\n [attr.type]=\"(areAnswersRevealed || isCheckingMode) ? answerTypeAttributes[i] : ''\"\r\n includes-additional-option-text=\"false\">\r\n <herum-checkbox [isBlocked]=\"isBlocked\" [formControlName]=\"answerControlNamePrefix + i\"\r\n [id]=\"answerControlNamePrefix + i\">\r\n </herum-checkbox>\r\n\r\n <p class=\"answer-text cursor-pointer\" [ngClass]=\"{'cursor-pointer':!isBlocked}\"\r\n (click)=\"_onAnswerClicked(i)\">{{ answer.content }}</p>\r\n </div>\r\n\r\n <span *ngIf=\"answer.note && (areAnswersRevealed || isCheckingMode)\" class=\"answer-note\">\r\n {{ answer.note }}\r\n </span>\r\n </div>\r\n </form>\r\n</div>", styles: [".answer-text{line-height:1;font-size:14px;font-weight:700}.correct-answer-count{margin-block-end:0;font-size:14px}.answers-container,.main-container{display:flex;flex-direction:column;gap:8px;width:100%}.answer-container{display:flex;align-items:center;gap:8px}.answer-container,.answer-note{flex:1}\n", ".quiz-container{display:flex;flex-direction:column;gap:16px}.quiz-container p,.quiz-container b,.quiz-container span{font-size:16px;margin-bottom:.25rem}.quiz-container .quiz-title{font-weight:700}.quiz-container .error-message{color:var(--error-color);font-weight:700}.quiz-container .answer-item{display:flex;flex-direction:row;gap:8px}.answers-container{display:flex;flex-direction:column;gap:16px}.answers-container .answer-item{display:flex;flex-direction:row;gap:8px}.answers-container .answer-note{background-color:var(--light-text-color);border-radius:var(border-radius);font-size:14px}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: HerumCheckboxComponent, selector: "herum-checkbox", inputs: ["type", "isChecked", "isBlocked"], outputs: ["checkedEmitter"] }] });
|
|
1490
1490
|
}
|
|
1491
1491
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: QuizMultiAnswerQuestionComponent, decorators: [{
|
|
1492
1492
|
type: Component,
|
|
1493
|
-
args: [{ standalone: false, selector: 'quiz-multi-answer-question', template: "<div class=\"main-container\">\r\n <p class=\"correct-answer-count\">\u05D9\u05E9 \u05DC\u05E1\u05DE\u05DF {{ correctAnswerCount }} \u05EA\u05E9\u05D5\u05D1\u05D5\u05EA</p>\r\n\r\n <form *ngIf=\"question.closedContent.answers\" [formGroup]=\"answersForm\" class=\"answers-container\">\r\n <div class=\"answer-item\" *ngFor=\"let answer of question.closedContent.answers;let i=index\">\r\n <div class=\"answer-container\" [ngClass]=\"{'revealed-answers':(areAnswersRevealed || isCheckingMode)}\"\r\n [attr.type]=\"(areAnswersRevealed || isCheckingMode) ? answerTypeAttributes[i] : ''\"\r\n
|
|
1493
|
+
args: [{ standalone: false, selector: 'quiz-multi-answer-question', template: "<div class=\"main-container\">\r\n <p class=\"correct-answer-count\">\u05D9\u05E9 \u05DC\u05E1\u05DE\u05DF {{ correctAnswerCount }} \u05EA\u05E9\u05D5\u05D1\u05D5\u05EA</p>\r\n\r\n <form *ngIf=\"question.closedContent.answers\" [formGroup]=\"answersForm\" class=\"answers-container\">\r\n <div class=\"answer-item\" *ngFor=\"let answer of question.closedContent.answers;let i=index\">\r\n <div class=\"answer-container\" [ngClass]=\"{'revealed-answers':(areAnswersRevealed || isCheckingMode)}\"\r\n [attr.type]=\"(areAnswersRevealed || isCheckingMode) ? answerTypeAttributes[i] : ''\"\r\n includes-additional-option-text=\"false\">\r\n <herum-checkbox [isBlocked]=\"isBlocked\" [formControlName]=\"answerControlNamePrefix + i\"\r\n [id]=\"answerControlNamePrefix + i\">\r\n </herum-checkbox>\r\n\r\n <p class=\"answer-text cursor-pointer\" [ngClass]=\"{'cursor-pointer':!isBlocked}\"\r\n (click)=\"_onAnswerClicked(i)\">{{ answer.content }}</p>\r\n </div>\r\n\r\n <span *ngIf=\"answer.note && (areAnswersRevealed || isCheckingMode)\" class=\"answer-note\">\r\n {{ answer.note }}\r\n </span>\r\n </div>\r\n </form>\r\n</div>", styles: [".answer-text{line-height:1;font-size:14px;font-weight:700}.correct-answer-count{margin-block-end:0;font-size:14px}.answers-container,.main-container{display:flex;flex-direction:column;gap:8px;width:100%}.answer-container{display:flex;align-items:center;gap:8px}.answer-container,.answer-note{flex:1}\n", ".quiz-container{display:flex;flex-direction:column;gap:16px}.quiz-container p,.quiz-container b,.quiz-container span{font-size:16px;margin-bottom:.25rem}.quiz-container .quiz-title{font-weight:700}.quiz-container .error-message{color:var(--error-color);font-weight:700}.quiz-container .answer-item{display:flex;flex-direction:row;gap:8px}.answers-container{display:flex;flex-direction:column;gap:16px}.answers-container .answer-item{display:flex;flex-direction:row;gap:8px}.answers-container .answer-note{background-color:var(--light-text-color);border-radius:var(border-radius);font-size:14px}\n"] }]
|
|
1494
1494
|
}], ctorParameters: () => [{ type: i1$3.FormBuilder }], propDecorators: { question: [{
|
|
1495
1495
|
type: Input
|
|
1496
1496
|
}], quizData: [{
|
|
@@ -7111,11 +7111,11 @@ class NumericSliderComponent {
|
|
|
7111
7111
|
};
|
|
7112
7112
|
}
|
|
7113
7113
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: NumericSliderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
7114
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.17", type: NumericSliderComponent, isStandalone: false, selector: "numeric-slider", inputs: { min: "min", max: "max", value: "value", disabled: "disabled", creationMode: "creationMode", visualTickSegments: "visualTickSegments" }, outputs: { valueChange: "valueChange", inputsValidationChange: "inputsValidationChange" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"numeric-slider\" [ngClass]=\"{ 'disabled': disabled && !creationMode, 'creation-mode': creationMode }\">\r\n @if (!creationMode) {\r\n <div class=\"slider-shell\">\r\n <div class=\"value-bubble\" [ngStyle]=\"bubbleStyle\">\r\n <span class=\"text\">{{ value }}</span>\r\n </div>\r\n\r\n <input class=\"slider-input\" type=\"range\" [min]=\"min\" [max]=\"max\" [value]=\"value\" [disabled]=\"disabled\"\r\n [ngStyle]=\"trackStyle\" (input)=\"_onInput($event)\" (mouseup)=\"_onEmitValue()\">\r\n </div>\r\n } @else {\r\n <div class=\"creation-container\">\r\n <div class=\"labels\">\r\n <span class=\"label\">\u05DE\u05D9\u05E0\u05D9\u05DE\u05D5\u05DD</span>\r\n <span class=\"label\">\u05DE\u05E7\u05E1\u05D9\u05DE\u05D5\u05DD</span>\r\n </div>\r\n\r\n <div class=\"slider-shell\" [ngStyle]=\"creationTrackStyle\">\r\n <div class=\"track\"></div>\r\n <input class=\"slider-input slider-input-range\" type=\"range\" [max]=\"max\" [value]=\"max\" disabled=\"true\">\r\n <input class=\"slider-input slider-input-range\" type=\"range\" [min]=\"min\" [value]=\"min\" disabled=\"true\">\r\n </div>\r\n </div>\r\n }\r\n\r\n <div class=\"ticks\"> @for (tick of ticks; track $index) {\r\n @if (!creationMode || !tick.isEdge) {\r\n <div class=\"tick\" [style.left.%]=\"tick.offsetPercent\">\r\n @if (!tick.isEdge) {\r\n <span class=\"tick-mark\"></span>\r\n }\r\n <span class=\"tick-label\" [class.edge-tick]=\"tick.isEdge\">{{ tick.value }}</span>\r\n </div>\r\n }\r\n }\r\n </div>\r\n\r\n @if (creationMode) {\r\n <div class=\"inputs\">\r\n <herum-input-field class=\"input\" [type]=\"'number'\" [inputValue]=\"min\" [maxValue]=\"max - 1\"\r\n (inputValueEmitter)=\"_creationValueChange($event, 'min')\" (isValidChange)=\"_isValidChange($event, 'min')\">\r\n </herum-input-field>\r\n\r\n <herum-input-field class=\"input\" [type]=\"'number'\" [inputValue]=\"max\" [minValue]=\"min + 1\"\n (inputValueEmitter)=\"_creationValueChange($event, 'max')\" (isValidChange)=\"_isValidChange($event, 'max')\">\n </herum-input-field>\n </div>\r\n }\r\n</div>\n", styles: [":host{display:block;width:100%}.numeric-slider{--thumb-size: 16px;--bubble-height: 40px;--bubble-tail-height: 5px;--slider-progress-color: var(--secondary-color);--slider-fill-color: var(--disable-color);--input-width: 80px;--track-height: 8px;width:100%;min-width:320px}.numeric-slider.creation-mode .ticks{width:calc(100% - var(--input-width));margin-inline:calc(var(--input-width) / 2)}.numeric-slider.creation-mode .ticks .tick{top:-5px;bottom:3px}.numeric-slider .creation-container{display:flex;flex-direction:column;gap:8px}.numeric-slider .creation-container .labels{display:flex;justify-content:space-between;align-items:center;width:calc(100% - var(--thumb-size));margin-inline:calc(var(--thumb-size) / 2)}.numeric-slider .creation-container .labels .label{color:var(--icons-color);font-size:14px;font-weight:700}.numeric-slider .creation-container .slider-shell{width:calc(100% - var(--input-width));margin-inline:calc(var(--input-width) * .5)}.numeric-slider .creation-container .slider-shell .track{position:absolute;inset-inline:0;top:50%;transform:translateY(-50%);height:var(--track-height);background:var(--slider-fill-color);border-radius:var(--border-radius)}.numeric-slider .creation-container .slider-shell .slider-input-range{position:absolute;inset:0}.numeric-slider .creation-container .slider-shell .slider-input{cursor:default}.numeric-slider .creation-container .slider-shell .slider-input::-webkit-slider-thumb{cursor:default}.numeric-slider .slider-shell{position:relative;padding-top:24px}.numeric-slider .inputs{display:flex;justify-content:space-between;margin-inline:calc(var(--input-width) / -2) calc(var(--input-width) / 2);margin-top:8px}.numeric-slider .inputs .input{width:var(--input-width);transform:translate(-50%)}.numeric-slider .value-bubble{position:absolute;top:-16px;transform:translate(-50%);width:52px;height:var(--bubble-height);pointer-events:none}.numeric-slider .value-bubble:before{content:\"\";position:absolute;inset:0;background:var(--secondary-color);-webkit-mask-image:url(/assets/hadracha/general/numericSliderBubble.svg);mask-image:url(/assets/hadracha/general/numericSliderBubble.svg);-webkit-mask-size:100% 100%;mask-size:100% 100%}.numeric-slider .value-bubble .text{position:absolute;top:0;left:0;width:100%;height:calc(var(--bubble-height) - var(--bubble-tail-height));display:flex;align-items:center;justify-content:center;text-align:center;color:var(--light-background-color);font-size:14px;font-weight:400;line-height:1}.numeric-slider .slider-input{position:relative;width:100%;appearance:none;-webkit-appearance:none;direction:rtl;cursor:pointer;z-index:1;background:transparent}.numeric-slider .slider-input::-webkit-slider-runnable-track{height:var(--track-height);border-radius:var(--border-radius);background:linear-gradient(90deg,var(--slider-fill-color) 0,var(--slider-fill-color) var(--slider-progress),var(--slider-progress-color) var(--slider-progress),var(--slider-progress-color) 100%)}.numeric-slider .slider-input::-webkit-slider-thumb{position:relative;-webkit-appearance:none;width:var(--thumb-size);height:var(--thumb-size);margin-top:-4px;border-radius:50%;background-color:var(--light-background-color);border:1.5px solid var(--secondary-text-color);cursor:grab}.numeric-slider .ticks{position:relative;width:calc(100% - var(--thumb-size));margin-inline:calc(var(--thumb-size) / 2);direction:ltr;height:30px;top:-3px}.numeric-slider .tick{position:absolute;top:-2px;bottom:0;transform:translate(-50%);display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:0}.numeric-slider .tick .tick-mark{width:1.5px;height:8px;background:var(--secondary-text-color)}.numeric-slider .tick .tick-label{color:var(--secondary-text-color);line-height:1;margin-top:auto;text-align:center;line-height:normal;font-weight:400;font-size:12px}.numeric-slider .tick .edge-tick{font-weight:700;font-size:14px;color:var(--icons-color)}.numeric-slider.disabled{--slider-progress-color: var(--disable-color);--slider-fill-color: var(--slider-disabled-fill-color)}.numeric-slider.disabled .slider-input{cursor:default}.numeric-slider.disabled .slider-input::-webkit-slider-thumb{cursor:default}.numeric-slider.disabled .tick .edge-tick{color:var(--slider-disabled-fill-color)}.numeric-slider.disabled .value-bubble:before{background:var(--disable-color)}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: HerumInputFieldComponent, selector: "herum-input-field", inputs: ["type", "placeholder", "disabled", "isBlocked", "isValid", "errorMsg", "showErrorMsgGap", "inputValue", "isLoading", "id", "debounceTime", "minValue", "maxValue", "isBlurred", "touched", "ltrMode", "preventMacroKeysPressEvent"], outputs: ["inputValueEmitter", "isValidChange"] }] });
|
|
7114
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.17", type: NumericSliderComponent, isStandalone: false, selector: "numeric-slider", inputs: { min: "min", max: "max", value: "value", disabled: "disabled", creationMode: "creationMode", visualTickSegments: "visualTickSegments" }, outputs: { valueChange: "valueChange", inputsValidationChange: "inputsValidationChange" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"numeric-slider\" [ngClass]=\"{ 'disabled': disabled && !creationMode, 'creation-mode': creationMode }\">\r\n @if (!creationMode) {\r\n <div class=\"slider-shell\">\r\n <div class=\"value-bubble\" [ngStyle]=\"bubbleStyle\">\r\n <span class=\"text\">{{ value }}</span>\r\n </div>\r\n\r\n <input class=\"slider-input\" type=\"range\" [min]=\"min\" [max]=\"max\" [value]=\"value\" [disabled]=\"disabled\"\r\n [ngStyle]=\"trackStyle\" (input)=\"_onInput($event)\" (mouseup)=\"_onEmitValue()\">\r\n </div>\r\n } @else {\r\n <div class=\"creation-container\">\r\n <div class=\"labels\">\r\n <span class=\"label\">\u05DE\u05D9\u05E0\u05D9\u05DE\u05D5\u05DD</span>\r\n <span class=\"label\">\u05DE\u05E7\u05E1\u05D9\u05DE\u05D5\u05DD</span>\r\n </div>\r\n\r\n <div class=\"slider-shell\" [ngStyle]=\"creationTrackStyle\">\r\n <div class=\"track\"></div>\r\n <input class=\"slider-input slider-input-range\" type=\"range\" [max]=\"max\" [value]=\"max\" disabled=\"true\">\r\n <input class=\"slider-input slider-input-range\" type=\"range\" [min]=\"min\" [value]=\"min\" disabled=\"true\">\r\n </div>\r\n </div>\r\n }\r\n\r\n <div class=\"ticks\"> @for (tick of ticks; track $index) {\r\n @if (!creationMode || !tick.isEdge) {\r\n <div class=\"tick\" [style.left.%]=\"tick.offsetPercent\">\r\n @if (!tick.isEdge) {\r\n <span class=\"tick-mark\"></span>\r\n }\r\n <span class=\"tick-label\" [class.edge-tick]=\"tick.isEdge\">{{ tick.value }}</span>\r\n </div>\r\n }\r\n }\r\n </div>\r\n\r\n @if (creationMode) {\r\n <div class=\"inputs\">\r\n <herum-input-field class=\"input\" [type]=\"'number'\" [inputValue]=\"min\" [maxValue]=\"max - 1\"\r\n (inputValueEmitter)=\"_creationValueChange($event, 'min')\" (isValidChange)=\"_isValidChange($event, 'min')\">\r\n </herum-input-field>\r\n\r\n <herum-input-field class=\"input\" [type]=\"'number'\" [inputValue]=\"max\" [minValue]=\"min + 1\"\r\n (inputValueEmitter)=\"_creationValueChange($event, 'max')\" (isValidChange)=\"_isValidChange($event, 'max')\">\r\n </herum-input-field>\r\n </div>\r\n }\r\n</div>\r\n", styles: [":host{display:block;width:100%}.numeric-slider{--thumb-size: 16px;--bubble-height: 40px;--bubble-tail-height: 5px;--slider-progress-color: var(--secondary-color);--slider-fill-color: var(--disable-color);--input-width: 80px;--track-height: 8px;width:100%;min-width:320px}.numeric-slider.creation-mode .ticks{width:calc(100% - var(--input-width));margin-inline:calc(var(--input-width) / 2)}.numeric-slider.creation-mode .ticks .tick{top:-5px;bottom:3px}.numeric-slider .creation-container{display:flex;flex-direction:column;gap:8px}.numeric-slider .creation-container .labels{display:flex;justify-content:space-between;align-items:center;width:calc(100% - var(--thumb-size));margin-inline:calc(var(--thumb-size) / 2)}.numeric-slider .creation-container .labels .label{color:var(--icons-color);font-size:14px;font-weight:700}.numeric-slider .creation-container .slider-shell{width:calc(100% - var(--input-width));margin-inline:calc(var(--input-width) * .5)}.numeric-slider .creation-container .slider-shell .track{position:absolute;inset-inline:0;top:50%;transform:translateY(-50%);height:var(--track-height);background:var(--slider-fill-color);border-radius:var(--border-radius)}.numeric-slider .creation-container .slider-shell .slider-input-range{position:absolute;inset:0}.numeric-slider .creation-container .slider-shell .slider-input{cursor:default}.numeric-slider .creation-container .slider-shell .slider-input::-webkit-slider-thumb{cursor:default}.numeric-slider .slider-shell{position:relative;padding-top:24px}.numeric-slider .inputs{display:flex;justify-content:space-between;margin-inline:calc(var(--input-width) / -2) calc(var(--input-width) / 2);margin-top:8px}.numeric-slider .inputs .input{width:var(--input-width);transform:translate(-50%)}.numeric-slider .value-bubble{position:absolute;top:-16px;transform:translate(-50%);width:52px;height:var(--bubble-height);pointer-events:none}.numeric-slider .value-bubble:before{content:\"\";position:absolute;inset:0;background:var(--secondary-color);-webkit-mask-image:url(/assets/hadracha/general/numericSliderBubble.svg);mask-image:url(/assets/hadracha/general/numericSliderBubble.svg);-webkit-mask-size:100% 100%;mask-size:100% 100%}.numeric-slider .value-bubble .text{position:absolute;top:0;left:0;width:100%;height:calc(var(--bubble-height) - var(--bubble-tail-height));display:flex;align-items:center;justify-content:center;text-align:center;color:var(--light-background-color);font-size:14px;font-weight:400;line-height:1}.numeric-slider .slider-input{position:relative;width:100%;appearance:none;-webkit-appearance:none;direction:rtl;cursor:pointer;z-index:1;background:transparent}.numeric-slider .slider-input::-webkit-slider-runnable-track{height:var(--track-height);border-radius:var(--border-radius);background:linear-gradient(90deg,var(--slider-fill-color) 0,var(--slider-fill-color) var(--slider-progress),var(--slider-progress-color) var(--slider-progress),var(--slider-progress-color) 100%)}.numeric-slider .slider-input::-webkit-slider-thumb{position:relative;-webkit-appearance:none;width:var(--thumb-size);height:var(--thumb-size);margin-top:-4px;border-radius:50%;background-color:var(--light-background-color);border:1.5px solid var(--secondary-text-color);cursor:grab}.numeric-slider .ticks{position:relative;width:calc(100% - var(--thumb-size));margin-inline:calc(var(--thumb-size) / 2);direction:ltr;height:30px;top:-3px}.numeric-slider .tick{position:absolute;top:-2px;bottom:0;transform:translate(-50%);display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:0}.numeric-slider .tick .tick-mark{width:1.5px;height:8px;background:var(--secondary-text-color)}.numeric-slider .tick .tick-label{color:var(--secondary-text-color);line-height:1;margin-top:auto;text-align:center;line-height:normal;font-weight:400;font-size:12px}.numeric-slider .tick .edge-tick{font-weight:700;font-size:14px;color:var(--icons-color)}.numeric-slider.disabled{--slider-progress-color: var(--disable-color);--slider-fill-color: var(--slider-disabled-fill-color)}.numeric-slider.disabled .slider-input{cursor:default}.numeric-slider.disabled .slider-input::-webkit-slider-thumb{cursor:default}.numeric-slider.disabled .tick .edge-tick{color:var(--slider-disabled-fill-color)}.numeric-slider.disabled .value-bubble:before{background:var(--disable-color)}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: HerumInputFieldComponent, selector: "herum-input-field", inputs: ["type", "placeholder", "disabled", "isBlocked", "isValid", "errorMsg", "showErrorMsgGap", "inputValue", "isLoading", "id", "debounceTime", "minValue", "maxValue", "isBlurred", "touched", "ltrMode", "preventMacroKeysPressEvent"], outputs: ["inputValueEmitter", "isValidChange"] }] });
|
|
7115
7115
|
}
|
|
7116
7116
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: NumericSliderComponent, decorators: [{
|
|
7117
7117
|
type: Component,
|
|
7118
|
-
args: [{ standalone: false, selector: 'numeric-slider', template: "<div class=\"numeric-slider\" [ngClass]=\"{ 'disabled': disabled && !creationMode, 'creation-mode': creationMode }\">\r\n @if (!creationMode) {\r\n <div class=\"slider-shell\">\r\n <div class=\"value-bubble\" [ngStyle]=\"bubbleStyle\">\r\n <span class=\"text\">{{ value }}</span>\r\n </div>\r\n\r\n <input class=\"slider-input\" type=\"range\" [min]=\"min\" [max]=\"max\" [value]=\"value\" [disabled]=\"disabled\"\r\n [ngStyle]=\"trackStyle\" (input)=\"_onInput($event)\" (mouseup)=\"_onEmitValue()\">\r\n </div>\r\n } @else {\r\n <div class=\"creation-container\">\r\n <div class=\"labels\">\r\n <span class=\"label\">\u05DE\u05D9\u05E0\u05D9\u05DE\u05D5\u05DD</span>\r\n <span class=\"label\">\u05DE\u05E7\u05E1\u05D9\u05DE\u05D5\u05DD</span>\r\n </div>\r\n\r\n <div class=\"slider-shell\" [ngStyle]=\"creationTrackStyle\">\r\n <div class=\"track\"></div>\r\n <input class=\"slider-input slider-input-range\" type=\"range\" [max]=\"max\" [value]=\"max\" disabled=\"true\">\r\n <input class=\"slider-input slider-input-range\" type=\"range\" [min]=\"min\" [value]=\"min\" disabled=\"true\">\r\n </div>\r\n </div>\r\n }\r\n\r\n <div class=\"ticks\"> @for (tick of ticks; track $index) {\r\n @if (!creationMode || !tick.isEdge) {\r\n <div class=\"tick\" [style.left.%]=\"tick.offsetPercent\">\r\n @if (!tick.isEdge) {\r\n <span class=\"tick-mark\"></span>\r\n }\r\n <span class=\"tick-label\" [class.edge-tick]=\"tick.isEdge\">{{ tick.value }}</span>\r\n </div>\r\n }\r\n }\r\n </div>\r\n\r\n @if (creationMode) {\r\n <div class=\"inputs\">\r\n <herum-input-field class=\"input\" [type]=\"'number'\" [inputValue]=\"min\" [maxValue]=\"max - 1\"\r\n (inputValueEmitter)=\"_creationValueChange($event, 'min')\" (isValidChange)=\"_isValidChange($event, 'min')\">\r\n </herum-input-field>\r\n\r\n <herum-input-field class=\"input\" [type]=\"'number'\" [inputValue]=\"max\" [minValue]=\"min + 1\"\n (inputValueEmitter)=\"_creationValueChange($event, 'max')\" (isValidChange)=\"_isValidChange($event, 'max')\">\n </herum-input-field>\n </div>\r\n }\r\n</div>\n", styles: [":host{display:block;width:100%}.numeric-slider{--thumb-size: 16px;--bubble-height: 40px;--bubble-tail-height: 5px;--slider-progress-color: var(--secondary-color);--slider-fill-color: var(--disable-color);--input-width: 80px;--track-height: 8px;width:100%;min-width:320px}.numeric-slider.creation-mode .ticks{width:calc(100% - var(--input-width));margin-inline:calc(var(--input-width) / 2)}.numeric-slider.creation-mode .ticks .tick{top:-5px;bottom:3px}.numeric-slider .creation-container{display:flex;flex-direction:column;gap:8px}.numeric-slider .creation-container .labels{display:flex;justify-content:space-between;align-items:center;width:calc(100% - var(--thumb-size));margin-inline:calc(var(--thumb-size) / 2)}.numeric-slider .creation-container .labels .label{color:var(--icons-color);font-size:14px;font-weight:700}.numeric-slider .creation-container .slider-shell{width:calc(100% - var(--input-width));margin-inline:calc(var(--input-width) * .5)}.numeric-slider .creation-container .slider-shell .track{position:absolute;inset-inline:0;top:50%;transform:translateY(-50%);height:var(--track-height);background:var(--slider-fill-color);border-radius:var(--border-radius)}.numeric-slider .creation-container .slider-shell .slider-input-range{position:absolute;inset:0}.numeric-slider .creation-container .slider-shell .slider-input{cursor:default}.numeric-slider .creation-container .slider-shell .slider-input::-webkit-slider-thumb{cursor:default}.numeric-slider .slider-shell{position:relative;padding-top:24px}.numeric-slider .inputs{display:flex;justify-content:space-between;margin-inline:calc(var(--input-width) / -2) calc(var(--input-width) / 2);margin-top:8px}.numeric-slider .inputs .input{width:var(--input-width);transform:translate(-50%)}.numeric-slider .value-bubble{position:absolute;top:-16px;transform:translate(-50%);width:52px;height:var(--bubble-height);pointer-events:none}.numeric-slider .value-bubble:before{content:\"\";position:absolute;inset:0;background:var(--secondary-color);-webkit-mask-image:url(/assets/hadracha/general/numericSliderBubble.svg);mask-image:url(/assets/hadracha/general/numericSliderBubble.svg);-webkit-mask-size:100% 100%;mask-size:100% 100%}.numeric-slider .value-bubble .text{position:absolute;top:0;left:0;width:100%;height:calc(var(--bubble-height) - var(--bubble-tail-height));display:flex;align-items:center;justify-content:center;text-align:center;color:var(--light-background-color);font-size:14px;font-weight:400;line-height:1}.numeric-slider .slider-input{position:relative;width:100%;appearance:none;-webkit-appearance:none;direction:rtl;cursor:pointer;z-index:1;background:transparent}.numeric-slider .slider-input::-webkit-slider-runnable-track{height:var(--track-height);border-radius:var(--border-radius);background:linear-gradient(90deg,var(--slider-fill-color) 0,var(--slider-fill-color) var(--slider-progress),var(--slider-progress-color) var(--slider-progress),var(--slider-progress-color) 100%)}.numeric-slider .slider-input::-webkit-slider-thumb{position:relative;-webkit-appearance:none;width:var(--thumb-size);height:var(--thumb-size);margin-top:-4px;border-radius:50%;background-color:var(--light-background-color);border:1.5px solid var(--secondary-text-color);cursor:grab}.numeric-slider .ticks{position:relative;width:calc(100% - var(--thumb-size));margin-inline:calc(var(--thumb-size) / 2);direction:ltr;height:30px;top:-3px}.numeric-slider .tick{position:absolute;top:-2px;bottom:0;transform:translate(-50%);display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:0}.numeric-slider .tick .tick-mark{width:1.5px;height:8px;background:var(--secondary-text-color)}.numeric-slider .tick .tick-label{color:var(--secondary-text-color);line-height:1;margin-top:auto;text-align:center;line-height:normal;font-weight:400;font-size:12px}.numeric-slider .tick .edge-tick{font-weight:700;font-size:14px;color:var(--icons-color)}.numeric-slider.disabled{--slider-progress-color: var(--disable-color);--slider-fill-color: var(--slider-disabled-fill-color)}.numeric-slider.disabled .slider-input{cursor:default}.numeric-slider.disabled .slider-input::-webkit-slider-thumb{cursor:default}.numeric-slider.disabled .tick .edge-tick{color:var(--slider-disabled-fill-color)}.numeric-slider.disabled .value-bubble:before{background:var(--disable-color)}\n"] }]
|
|
7118
|
+
args: [{ standalone: false, selector: 'numeric-slider', template: "<div class=\"numeric-slider\" [ngClass]=\"{ 'disabled': disabled && !creationMode, 'creation-mode': creationMode }\">\r\n @if (!creationMode) {\r\n <div class=\"slider-shell\">\r\n <div class=\"value-bubble\" [ngStyle]=\"bubbleStyle\">\r\n <span class=\"text\">{{ value }}</span>\r\n </div>\r\n\r\n <input class=\"slider-input\" type=\"range\" [min]=\"min\" [max]=\"max\" [value]=\"value\" [disabled]=\"disabled\"\r\n [ngStyle]=\"trackStyle\" (input)=\"_onInput($event)\" (mouseup)=\"_onEmitValue()\">\r\n </div>\r\n } @else {\r\n <div class=\"creation-container\">\r\n <div class=\"labels\">\r\n <span class=\"label\">\u05DE\u05D9\u05E0\u05D9\u05DE\u05D5\u05DD</span>\r\n <span class=\"label\">\u05DE\u05E7\u05E1\u05D9\u05DE\u05D5\u05DD</span>\r\n </div>\r\n\r\n <div class=\"slider-shell\" [ngStyle]=\"creationTrackStyle\">\r\n <div class=\"track\"></div>\r\n <input class=\"slider-input slider-input-range\" type=\"range\" [max]=\"max\" [value]=\"max\" disabled=\"true\">\r\n <input class=\"slider-input slider-input-range\" type=\"range\" [min]=\"min\" [value]=\"min\" disabled=\"true\">\r\n </div>\r\n </div>\r\n }\r\n\r\n <div class=\"ticks\"> @for (tick of ticks; track $index) {\r\n @if (!creationMode || !tick.isEdge) {\r\n <div class=\"tick\" [style.left.%]=\"tick.offsetPercent\">\r\n @if (!tick.isEdge) {\r\n <span class=\"tick-mark\"></span>\r\n }\r\n <span class=\"tick-label\" [class.edge-tick]=\"tick.isEdge\">{{ tick.value }}</span>\r\n </div>\r\n }\r\n }\r\n </div>\r\n\r\n @if (creationMode) {\r\n <div class=\"inputs\">\r\n <herum-input-field class=\"input\" [type]=\"'number'\" [inputValue]=\"min\" [maxValue]=\"max - 1\"\r\n (inputValueEmitter)=\"_creationValueChange($event, 'min')\" (isValidChange)=\"_isValidChange($event, 'min')\">\r\n </herum-input-field>\r\n\r\n <herum-input-field class=\"input\" [type]=\"'number'\" [inputValue]=\"max\" [minValue]=\"min + 1\"\r\n (inputValueEmitter)=\"_creationValueChange($event, 'max')\" (isValidChange)=\"_isValidChange($event, 'max')\">\r\n </herum-input-field>\r\n </div>\r\n }\r\n</div>\r\n", styles: [":host{display:block;width:100%}.numeric-slider{--thumb-size: 16px;--bubble-height: 40px;--bubble-tail-height: 5px;--slider-progress-color: var(--secondary-color);--slider-fill-color: var(--disable-color);--input-width: 80px;--track-height: 8px;width:100%;min-width:320px}.numeric-slider.creation-mode .ticks{width:calc(100% - var(--input-width));margin-inline:calc(var(--input-width) / 2)}.numeric-slider.creation-mode .ticks .tick{top:-5px;bottom:3px}.numeric-slider .creation-container{display:flex;flex-direction:column;gap:8px}.numeric-slider .creation-container .labels{display:flex;justify-content:space-between;align-items:center;width:calc(100% - var(--thumb-size));margin-inline:calc(var(--thumb-size) / 2)}.numeric-slider .creation-container .labels .label{color:var(--icons-color);font-size:14px;font-weight:700}.numeric-slider .creation-container .slider-shell{width:calc(100% - var(--input-width));margin-inline:calc(var(--input-width) * .5)}.numeric-slider .creation-container .slider-shell .track{position:absolute;inset-inline:0;top:50%;transform:translateY(-50%);height:var(--track-height);background:var(--slider-fill-color);border-radius:var(--border-radius)}.numeric-slider .creation-container .slider-shell .slider-input-range{position:absolute;inset:0}.numeric-slider .creation-container .slider-shell .slider-input{cursor:default}.numeric-slider .creation-container .slider-shell .slider-input::-webkit-slider-thumb{cursor:default}.numeric-slider .slider-shell{position:relative;padding-top:24px}.numeric-slider .inputs{display:flex;justify-content:space-between;margin-inline:calc(var(--input-width) / -2) calc(var(--input-width) / 2);margin-top:8px}.numeric-slider .inputs .input{width:var(--input-width);transform:translate(-50%)}.numeric-slider .value-bubble{position:absolute;top:-16px;transform:translate(-50%);width:52px;height:var(--bubble-height);pointer-events:none}.numeric-slider .value-bubble:before{content:\"\";position:absolute;inset:0;background:var(--secondary-color);-webkit-mask-image:url(/assets/hadracha/general/numericSliderBubble.svg);mask-image:url(/assets/hadracha/general/numericSliderBubble.svg);-webkit-mask-size:100% 100%;mask-size:100% 100%}.numeric-slider .value-bubble .text{position:absolute;top:0;left:0;width:100%;height:calc(var(--bubble-height) - var(--bubble-tail-height));display:flex;align-items:center;justify-content:center;text-align:center;color:var(--light-background-color);font-size:14px;font-weight:400;line-height:1}.numeric-slider .slider-input{position:relative;width:100%;appearance:none;-webkit-appearance:none;direction:rtl;cursor:pointer;z-index:1;background:transparent}.numeric-slider .slider-input::-webkit-slider-runnable-track{height:var(--track-height);border-radius:var(--border-radius);background:linear-gradient(90deg,var(--slider-fill-color) 0,var(--slider-fill-color) var(--slider-progress),var(--slider-progress-color) var(--slider-progress),var(--slider-progress-color) 100%)}.numeric-slider .slider-input::-webkit-slider-thumb{position:relative;-webkit-appearance:none;width:var(--thumb-size);height:var(--thumb-size);margin-top:-4px;border-radius:50%;background-color:var(--light-background-color);border:1.5px solid var(--secondary-text-color);cursor:grab}.numeric-slider .ticks{position:relative;width:calc(100% - var(--thumb-size));margin-inline:calc(var(--thumb-size) / 2);direction:ltr;height:30px;top:-3px}.numeric-slider .tick{position:absolute;top:-2px;bottom:0;transform:translate(-50%);display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:0}.numeric-slider .tick .tick-mark{width:1.5px;height:8px;background:var(--secondary-text-color)}.numeric-slider .tick .tick-label{color:var(--secondary-text-color);line-height:1;margin-top:auto;text-align:center;line-height:normal;font-weight:400;font-size:12px}.numeric-slider .tick .edge-tick{font-weight:700;font-size:14px;color:var(--icons-color)}.numeric-slider.disabled{--slider-progress-color: var(--disable-color);--slider-fill-color: var(--slider-disabled-fill-color)}.numeric-slider.disabled .slider-input{cursor:default}.numeric-slider.disabled .slider-input::-webkit-slider-thumb{cursor:default}.numeric-slider.disabled .tick .edge-tick{color:var(--slider-disabled-fill-color)}.numeric-slider.disabled .value-bubble:before{background:var(--disable-color)}\n"] }]
|
|
7119
7119
|
}], propDecorators: { min: [{
|
|
7120
7120
|
type: Input
|
|
7121
7121
|
}], max: [{
|
|
@@ -11323,7 +11323,7 @@ const defaultAuthorizationObject = {
|
|
|
11323
11323
|
},
|
|
11324
11324
|
answerNote() {
|
|
11325
11325
|
return cloneDeep({
|
|
11326
|
-
propertyPath: `[${resourceIdPlaceholder}]${
|
|
11326
|
+
propertyPath: `[${resourceIdPlaceholder}]${answerNotePropertyPath}`,
|
|
11327
11327
|
authorizationType: MicroResourceAuthorizationType.view,
|
|
11328
11328
|
...closeStatus,
|
|
11329
11329
|
collectionItemType: 'Resources'
|