@tilde-nlp/ngx-common 8.1.3 → 8.1.4
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.
|
@@ -8541,6 +8541,9 @@ class AccessibilityTextMagnifierService {
|
|
|
8541
8541
|
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
8542
8542
|
this.mouseoverHandler = (event) => {
|
|
8543
8543
|
if (event.target && event.target.nodeType === Node.ELEMENT_NODE) {
|
|
8544
|
+
if (event.target?.classList?.contains('mat-icon')) {
|
|
8545
|
+
return;
|
|
8546
|
+
}
|
|
8544
8547
|
const textContent = this.getFirstTextContent(event.target);
|
|
8545
8548
|
if (!textContent.length) {
|
|
8546
8549
|
this.magnifiedText.style.display = 'none';
|
|
@@ -8598,16 +8601,121 @@ class AccessibilityTextMagnifierService {
|
|
|
8598
8601
|
}]
|
|
8599
8602
|
}], null, null); })();
|
|
8600
8603
|
|
|
8604
|
+
class AccessibilityScreenMaskService {
|
|
8605
|
+
constructor() {
|
|
8606
|
+
this.focusBarHeight = 60;
|
|
8607
|
+
this.SCREEN_MASK_HEIGHT_KEY = 'SCREEN_MASK_HEIGHT_KEY';
|
|
8608
|
+
this.MASK_CLASS = 'screen-mask';
|
|
8609
|
+
this.MASK_OVERLAY_CLASS = 'screen-mask-overlay';
|
|
8610
|
+
this.FOCUS_BAR_CLASS = 'screen-mask-focus-bar';
|
|
8611
|
+
this.FOCUS_BAR_BTN_CLASS = 'screen-mask-bar-btn';
|
|
8612
|
+
this.INCREASE_BTN_TEXT = '+';
|
|
8613
|
+
this.DECREASE_BTN_TEXT = '-';
|
|
8614
|
+
this.CLOSE_BTN_TEXT = 'x';
|
|
8615
|
+
}
|
|
8616
|
+
toggleScreenMask(isDisabled) {
|
|
8617
|
+
const body = document.querySelector('body');
|
|
8618
|
+
if (!isDisabled) {
|
|
8619
|
+
this.closeFocusBar();
|
|
8620
|
+
}
|
|
8621
|
+
else {
|
|
8622
|
+
const mask = document.createElement('div');
|
|
8623
|
+
const maskOverlay = document.createElement('div');
|
|
8624
|
+
const maskFocusBar = document.createElement('div');
|
|
8625
|
+
const increaseButton = document.createElement('button');
|
|
8626
|
+
const decreaseButton = document.createElement('button');
|
|
8627
|
+
const closeButton = document.createElement('button');
|
|
8628
|
+
mask.classList.add(this.MASK_CLASS);
|
|
8629
|
+
maskFocusBar.classList.add(this.FOCUS_BAR_CLASS);
|
|
8630
|
+
maskOverlay.classList.add(this.MASK_OVERLAY_CLASS);
|
|
8631
|
+
increaseButton.textContent = this.INCREASE_BTN_TEXT;
|
|
8632
|
+
decreaseButton.textContent = this.DECREASE_BTN_TEXT;
|
|
8633
|
+
closeButton.textContent = this.CLOSE_BTN_TEXT;
|
|
8634
|
+
increaseButton.addEventListener('click', () => this.increaseFocusBar());
|
|
8635
|
+
decreaseButton.addEventListener('click', () => this.decreaseFocusBar());
|
|
8636
|
+
closeButton.addEventListener('click', () => this.closeFocusBar());
|
|
8637
|
+
maskFocusBar.appendChild(increaseButton);
|
|
8638
|
+
maskFocusBar.appendChild(decreaseButton);
|
|
8639
|
+
maskFocusBar.appendChild(closeButton);
|
|
8640
|
+
mask.appendChild(maskOverlay);
|
|
8641
|
+
mask.appendChild(maskFocusBar);
|
|
8642
|
+
body.appendChild(mask);
|
|
8643
|
+
const storedHeight = localStorage.getItem(this.SCREEN_MASK_HEIGHT_KEY);
|
|
8644
|
+
const height = storedHeight ? JSON.parse(storedHeight) : this.focusBarHeight;
|
|
8645
|
+
this.focusBarHeight = height;
|
|
8646
|
+
this.updateFocusBar();
|
|
8647
|
+
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
8648
|
+
this.listener = (event) => {
|
|
8649
|
+
const mouseY = event.clientY - this.focusBarHeight / 2;
|
|
8650
|
+
maskFocusBar.style.height = `${this.focusBarHeight}px`;
|
|
8651
|
+
maskFocusBar.style.top = `${mouseY}px`;
|
|
8652
|
+
const clipPathValue = `polygon(0px 0px, 100% 0px, 100% ${mouseY}px, 0px ${mouseY}px, 0px ${mouseY + this.focusBarHeight}px, 100% ${mouseY + this.focusBarHeight}px, 100% 100%, 0px 100%)`;
|
|
8653
|
+
maskOverlay.style.clipPath = clipPathValue;
|
|
8654
|
+
};
|
|
8655
|
+
body.addEventListener('mousemove', this.listener);
|
|
8656
|
+
}
|
|
8657
|
+
}
|
|
8658
|
+
increaseFocusBar() {
|
|
8659
|
+
this.focusBarHeight += 10;
|
|
8660
|
+
this.updateFocusBar();
|
|
8661
|
+
}
|
|
8662
|
+
decreaseFocusBar() {
|
|
8663
|
+
this.focusBarHeight = Math.max(40, this.focusBarHeight - 10);
|
|
8664
|
+
this.updateFocusBar();
|
|
8665
|
+
}
|
|
8666
|
+
updateFocusBar() {
|
|
8667
|
+
const maskFocusBar = document.querySelector(`.${this.FOCUS_BAR_CLASS}`);
|
|
8668
|
+
const maskOverlay = document.querySelector(`.${this.MASK_OVERLAY_CLASS}`);
|
|
8669
|
+
if (maskFocusBar && maskOverlay) {
|
|
8670
|
+
const mouseY = parseInt(maskFocusBar.style.top || '0');
|
|
8671
|
+
maskFocusBar.style.height = `${this.focusBarHeight}px`;
|
|
8672
|
+
const clipPathValue = `polygon(0px 0px, 100% 0px, 100% ${mouseY}px, 0px ${mouseY}px, 0px ${mouseY + this.focusBarHeight}px, 100% ${mouseY + this.focusBarHeight}px, 100% 100%, 0px 100%)`;
|
|
8673
|
+
maskOverlay.style.clipPath = clipPathValue;
|
|
8674
|
+
}
|
|
8675
|
+
localStorage.setItem(this.SCREEN_MASK_HEIGHT_KEY, JSON.stringify(this.focusBarHeight));
|
|
8676
|
+
}
|
|
8677
|
+
closeFocusBar() {
|
|
8678
|
+
const body = document.querySelector('body');
|
|
8679
|
+
const existingMask = document.querySelector(`.${this.MASK_CLASS}`);
|
|
8680
|
+
if (existingMask) {
|
|
8681
|
+
body.removeChild(existingMask);
|
|
8682
|
+
body.removeEventListener('mousemove', this.listener);
|
|
8683
|
+
localStorage.setItem('SCREEN_MASK', JSON.stringify(false));
|
|
8684
|
+
document.querySelector('.screen-mask-btn')?.classList.remove('active');
|
|
8685
|
+
}
|
|
8686
|
+
}
|
|
8687
|
+
static { this.ɵfac = function AccessibilityScreenMaskService_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || AccessibilityScreenMaskService)(); }; }
|
|
8688
|
+
static { this.ɵprov = /*@__PURE__*/ i0.ɵɵdefineInjectable({ token: AccessibilityScreenMaskService, factory: AccessibilityScreenMaskService.ɵfac, providedIn: 'root' }); }
|
|
8689
|
+
}
|
|
8690
|
+
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(AccessibilityScreenMaskService, [{
|
|
8691
|
+
type: Injectable,
|
|
8692
|
+
args: [{
|
|
8693
|
+
providedIn: 'root',
|
|
8694
|
+
}]
|
|
8695
|
+
}], null, null); })();
|
|
8696
|
+
|
|
8601
8697
|
class AccessibilityService {
|
|
8602
8698
|
constructor() {
|
|
8603
8699
|
this.fontSizeLocalStorageKey = 'ACCESSIBILITY_FONT_SIZE_IX';
|
|
8604
8700
|
this.contrastLocalStorageKey = 'ACCESSIBILITY_CONTRAST';
|
|
8605
8701
|
this.textMagnifierLocalStorageKey = 'TEXT_MAGNIFIER';
|
|
8702
|
+
this.screenMaskLocalStorageKey = 'SCREEN_MASK';
|
|
8606
8703
|
this.sizeIncreaseSubject = new Subject();
|
|
8607
8704
|
this.contrastSubject = new Subject();
|
|
8608
8705
|
this.#textMagnifier = inject(AccessibilityTextMagnifierService);
|
|
8706
|
+
this.#screenMask = inject(AccessibilityScreenMaskService);
|
|
8609
8707
|
}
|
|
8610
8708
|
#textMagnifier;
|
|
8709
|
+
#screenMask;
|
|
8710
|
+
toggleScreenMask() {
|
|
8711
|
+
const currnetStatus = this.getSavedScreenMaskStatus();
|
|
8712
|
+
const oppositeStatus = JSON.stringify(!currnetStatus);
|
|
8713
|
+
this.#screenMask.toggleScreenMask(!currnetStatus);
|
|
8714
|
+
localStorage.setItem(this.screenMaskLocalStorageKey, oppositeStatus);
|
|
8715
|
+
}
|
|
8716
|
+
closeFocusBar() {
|
|
8717
|
+
this.#screenMask.closeFocusBar();
|
|
8718
|
+
}
|
|
8611
8719
|
toggleTextMagnifier() {
|
|
8612
8720
|
const currnetStatus = this.getSavedTextMagnifierStatus();
|
|
8613
8721
|
const oppositeStatus = JSON.stringify(!currnetStatus);
|
|
@@ -8618,10 +8726,18 @@ class AccessibilityService {
|
|
|
8618
8726
|
const savedTextMagnifierStatus = JSON.parse(localStorage.getItem(this.textMagnifierLocalStorageKey) ?? 'false');
|
|
8619
8727
|
return savedTextMagnifierStatus;
|
|
8620
8728
|
}
|
|
8729
|
+
getSavedScreenMaskStatus() {
|
|
8730
|
+
const savedScreenMaskStatus = JSON.parse(localStorage.getItem(this.screenMaskLocalStorageKey) ?? 'false');
|
|
8731
|
+
return savedScreenMaskStatus;
|
|
8732
|
+
}
|
|
8621
8733
|
setSavedTextMagnifierStatus() {
|
|
8622
8734
|
const currnetStatus = this.getSavedTextMagnifierStatus();
|
|
8623
8735
|
this.#textMagnifier.toggleTextMagnifier(currnetStatus);
|
|
8624
8736
|
}
|
|
8737
|
+
setSavedScreenMaskStatus() {
|
|
8738
|
+
const currnetStatus = this.getSavedScreenMaskStatus();
|
|
8739
|
+
this.#screenMask.toggleScreenMask(currnetStatus);
|
|
8740
|
+
}
|
|
8625
8741
|
saveContrast(contrast) {
|
|
8626
8742
|
localStorage.setItem(this.contrastLocalStorageKey, contrast);
|
|
8627
8743
|
}
|
|
@@ -8631,7 +8747,7 @@ class AccessibilityService {
|
|
|
8631
8747
|
}
|
|
8632
8748
|
getSavedFontSize() {
|
|
8633
8749
|
const savedFontSizeIx = localStorage.getItem(this.fontSizeLocalStorageKey);
|
|
8634
|
-
return JSON.parse(savedFontSizeIx ??
|
|
8750
|
+
return JSON.parse(savedFontSizeIx ?? '0');
|
|
8635
8751
|
}
|
|
8636
8752
|
saveFontSize(ix) {
|
|
8637
8753
|
localStorage.setItem(this.fontSizeLocalStorageKey, ix.toString());
|
|
@@ -8662,9 +8778,9 @@ class AccessibilityService {
|
|
|
8662
8778
|
|
|
8663
8779
|
function AccessibilityDialogComponent_For_18_Template(rf, ctx) { if (rf & 1) {
|
|
8664
8780
|
const _r1 = i0.ɵɵgetCurrentView();
|
|
8665
|
-
i0.ɵɵelementStart(0, "button",
|
|
8781
|
+
i0.ɵɵelementStart(0, "button", 14);
|
|
8666
8782
|
i0.ɵɵlistener("click", function AccessibilityDialogComponent_For_18_Template_button_click_0_listener() { const contrast_r2 = i0.ɵɵrestoreView(_r1).$implicit; const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.changeContrast(contrast_r2)); });
|
|
8667
|
-
i0.ɵɵelementStart(1, "mat-icon",
|
|
8783
|
+
i0.ɵɵelementStart(1, "mat-icon", 15);
|
|
8668
8784
|
i0.ɵɵtext(2, "visibility");
|
|
8669
8785
|
i0.ɵɵelementEnd()();
|
|
8670
8786
|
} if (rf & 2) {
|
|
@@ -8684,6 +8800,7 @@ class AccessibilityDialogComponent {
|
|
|
8684
8800
|
this.selectedFontSizeIndex = this.#accessibility.getSavedFontSize();
|
|
8685
8801
|
this.currentContrast = this.#accessibility.getSavedContrast();
|
|
8686
8802
|
this.isTextMagnifierEnabled = this.#accessibility.getSavedTextMagnifierStatus();
|
|
8803
|
+
this.isScreenMaskEnabled = this.#accessibility.getSavedScreenMaskStatus();
|
|
8687
8804
|
}
|
|
8688
8805
|
changeContrast(contrast) {
|
|
8689
8806
|
this.currentContrast = contrast;
|
|
@@ -8699,6 +8816,13 @@ class AccessibilityDialogComponent {
|
|
|
8699
8816
|
this.#accessibility.toggleTextMagnifier();
|
|
8700
8817
|
this.isTextMagnifierEnabled = this.#accessibility.getSavedTextMagnifierStatus();
|
|
8701
8818
|
}
|
|
8819
|
+
toggleScreenMask() {
|
|
8820
|
+
this.#accessibility.toggleScreenMask();
|
|
8821
|
+
this.isScreenMaskEnabled = this.#accessibility.getSavedScreenMaskStatus();
|
|
8822
|
+
}
|
|
8823
|
+
closeFocusBar() {
|
|
8824
|
+
this.#accessibility.closeFocusBar();
|
|
8825
|
+
}
|
|
8702
8826
|
reset() {
|
|
8703
8827
|
this.changeContrast(AccessibilityContrasts.BASE);
|
|
8704
8828
|
this.selectedFontSizeIndex = 0;
|
|
@@ -8706,7 +8830,7 @@ class AccessibilityDialogComponent {
|
|
|
8706
8830
|
this.#accessibility.setFontSize(this.selectedFontSizeIndex);
|
|
8707
8831
|
}
|
|
8708
8832
|
static { this.ɵfac = function AccessibilityDialogComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || AccessibilityDialogComponent)(); }; }
|
|
8709
|
-
static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: AccessibilityDialogComponent, selectors: [["lib-accessibility-dialog"]], decls:
|
|
8833
|
+
static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: AccessibilityDialogComponent, selectors: [["lib-accessibility-dialog"]], decls: 36, vars: 32, consts: [["mat-dialog-title", "", 1, "text-2-xl"], ["mat-dialog-content", ""], [1, "font-size-wrapper"], [1, "settings-title"], ["animationDuration", "0ms", 3, "selectedTabChange", "selectedIndex"], [3, "label"], [1, "contrast-wrapper"], [1, "contrast-option-wrapper"], [1, "contrast-option", 3, "class", "active"], [1, "visual-tools-wrapper"], ["mat-stroked-button", "", 3, "click"], ["mat-stroked-button", "", 1, "screen-mask-btn", 3, "click"], ["mat-dialog-actions", ""], ["mat-flat-button", "", "mat-dialog-close", ""], [1, "contrast-option", 3, "click"], [1, "material-icons-outlined"]], template: function AccessibilityDialogComponent_Template(rf, ctx) { if (rf & 1) {
|
|
8710
8834
|
i0.ɵɵelementStart(0, "h1", 0);
|
|
8711
8835
|
i0.ɵɵtext(1);
|
|
8712
8836
|
i0.ɵɵpipe(2, "translate");
|
|
@@ -8734,21 +8858,26 @@ class AccessibilityDialogComponent {
|
|
|
8734
8858
|
i0.ɵɵlistener("click", function AccessibilityDialogComponent_Template_button_click_23_listener() { return ctx.toggleTextMagnifier(); });
|
|
8735
8859
|
i0.ɵɵtext(24);
|
|
8736
8860
|
i0.ɵɵpipe(25, "translate");
|
|
8737
|
-
i0.ɵɵelementEnd()()();
|
|
8738
|
-
i0.ɵɵelementStart(26, "div", 11)(27, "button", 10);
|
|
8739
|
-
i0.ɵɵlistener("click", function AccessibilityDialogComponent_Template_button_click_27_listener() { return ctx.reset(); });
|
|
8740
|
-
i0.ɵɵtext(28);
|
|
8741
|
-
i0.ɵɵpipe(29, "translate");
|
|
8742
8861
|
i0.ɵɵelementEnd();
|
|
8743
|
-
i0.ɵɵelementStart(
|
|
8862
|
+
i0.ɵɵelementStart(26, "button", 11);
|
|
8863
|
+
i0.ɵɵlistener("click", function AccessibilityDialogComponent_Template_button_click_26_listener() { return ctx.toggleScreenMask(); });
|
|
8864
|
+
i0.ɵɵtext(27);
|
|
8865
|
+
i0.ɵɵpipe(28, "translate");
|
|
8866
|
+
i0.ɵɵelementEnd()()();
|
|
8867
|
+
i0.ɵɵelementStart(29, "div", 12)(30, "button", 10);
|
|
8868
|
+
i0.ɵɵlistener("click", function AccessibilityDialogComponent_Template_button_click_30_listener() { return ctx.reset(); });
|
|
8744
8869
|
i0.ɵɵtext(31);
|
|
8745
8870
|
i0.ɵɵpipe(32, "translate");
|
|
8871
|
+
i0.ɵɵelementEnd();
|
|
8872
|
+
i0.ɵɵelementStart(33, "button", 13);
|
|
8873
|
+
i0.ɵɵtext(34);
|
|
8874
|
+
i0.ɵɵpipe(35, "translate");
|
|
8746
8875
|
i0.ɵɵelementEnd()();
|
|
8747
8876
|
} if (rf & 2) {
|
|
8748
8877
|
i0.ɵɵadvance();
|
|
8749
|
-
i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(2,
|
|
8878
|
+
i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(2, 16, "ACCESSIBILITY.TITLE"));
|
|
8750
8879
|
i0.ɵɵadvance(5);
|
|
8751
|
-
i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(7,
|
|
8880
|
+
i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(7, 18, "ACCESSIBILITY.FONT_SIZE_LABEL"), " ");
|
|
8752
8881
|
i0.ɵɵadvance(2);
|
|
8753
8882
|
i0.ɵɵproperty("selectedIndex", ctx.selectedFontSizeIndex);
|
|
8754
8883
|
i0.ɵɵadvance();
|
|
@@ -8758,24 +8887,28 @@ class AccessibilityDialogComponent {
|
|
|
8758
8887
|
i0.ɵɵadvance();
|
|
8759
8888
|
i0.ɵɵproperty("label", "200%");
|
|
8760
8889
|
i0.ɵɵadvance(3);
|
|
8761
|
-
i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(15,
|
|
8890
|
+
i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(15, 20, "ACCESSIBILITY.CONTRAST_LABEL"), " ");
|
|
8762
8891
|
i0.ɵɵadvance(3);
|
|
8763
8892
|
i0.ɵɵrepeater(ctx.contrasts);
|
|
8764
8893
|
i0.ɵɵadvance(4);
|
|
8765
|
-
i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(22,
|
|
8894
|
+
i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(22, 22, "ACCESSIBILITY.VISUAL_TOOLS_LABEL"), " ");
|
|
8766
8895
|
i0.ɵɵadvance(2);
|
|
8767
8896
|
i0.ɵɵclassProp("active", ctx.isTextMagnifierEnabled);
|
|
8768
8897
|
i0.ɵɵadvance();
|
|
8769
|
-
i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(25,
|
|
8898
|
+
i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(25, 24, "ACCESSIBILITY.TEXT_MAGNIFIER"), " ");
|
|
8899
|
+
i0.ɵɵadvance(2);
|
|
8900
|
+
i0.ɵɵclassProp("active", ctx.isScreenMaskEnabled);
|
|
8901
|
+
i0.ɵɵadvance();
|
|
8902
|
+
i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(28, 26, "ACCESSIBILITY.SCREEN_MASK"), " ");
|
|
8770
8903
|
i0.ɵɵadvance(4);
|
|
8771
|
-
i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(
|
|
8904
|
+
i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(32, 28, "ACCESSIBILITY.RESET"));
|
|
8772
8905
|
i0.ɵɵadvance(3);
|
|
8773
|
-
i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(
|
|
8906
|
+
i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(35, 30, "ACCESSIBILITY.CLOSE"));
|
|
8774
8907
|
} }, dependencies: [MatDialogModule, i1$4.MatDialogClose, i1$4.MatDialogTitle, i1$4.MatDialogActions, i1$4.MatDialogContent, TranslateModule, MatButtonModule, i2$1.MatButton, MatTabsModule, i3$1.MatTab, i3$1.MatTabGroup, MatIconModule, i1.MatIcon, i1$1.TranslatePipe], styles: [".settings-title[_ngcontent-%COMP%]{color:var(--base-30);font-weight:600;font-size:.8125rem;margin-bottom:12px}.contrast-wrapper[_ngcontent-%COMP%]{margin-top:24px}.contrast-wrapper[_ngcontent-%COMP%] .contrast-option-wrapper[_ngcontent-%COMP%]{display:flex;gap:12px}.contrast-wrapper[_ngcontent-%COMP%] .contrast-option-wrapper[_ngcontent-%COMP%] .contrast-option[_ngcontent-%COMP%]{display:flex;justify-content:center;align-items:center;padding:8px 24px;color:#000!important;background-color:#fff!important;border-radius:8px;width:100%;border:2px solid transparent}.contrast-wrapper[_ngcontent-%COMP%] .contrast-option-wrapper[_ngcontent-%COMP%] .contrast-option.black-white[_ngcontent-%COMP%]{background-color:#000!important;color:#fff!important}.contrast-wrapper[_ngcontent-%COMP%] .contrast-option-wrapper[_ngcontent-%COMP%] .contrast-option.yellow-black[_ngcontent-%COMP%]{background-color:#f9f150!important;color:#000!important}.contrast-wrapper[_ngcontent-%COMP%] .contrast-option-wrapper[_ngcontent-%COMP%] .contrast-option.black-yellow[_ngcontent-%COMP%]{background-color:#000!important;color:#f9f150!important}.contrast-wrapper[_ngcontent-%COMP%] .contrast-option-wrapper[_ngcontent-%COMP%] .contrast-option.active[_ngcontent-%COMP%]{border:2px solid;border-color:var(--base-0)}.visual-tools-wrapper[_ngcontent-%COMP%]{margin-top:24px}.visual-tools-wrapper[_ngcontent-%COMP%] .screen-mask-btn[_ngcontent-%COMP%]{margin-left:8px}[_nghost-%COMP%] .mdc-tab--active{background-color:var(--mat-sys-primary-container)!important}[_nghost-%COMP%] .mdc-tab--active .mdc-tab__text-label{color:var(--primary-accent)!important}[_nghost-%COMP%] .mat-mdc-tab{width:50px;border:1px solid var(--base-70)}[_nghost-%COMP%] .mat-mdc-tab:first-child{border-bottom-left-radius:16px;border-top-left-radius:16px}[_nghost-%COMP%] .mat-mdc-tab:last-child{border-bottom-right-radius:16px;border-top-right-radius:16px}[_nghost-%COMP%] .mdc-tab-indicator__content--underline{display:none}[_nghost-%COMP%] .mat-mdc-tab-label-container{border-bottom-width:0!important}[_nghost-%COMP%] .active .mdc-button__ripple{background-color:var(--primary-accent)!important;opacity:var(--mat-button-outlined-hover-state-layer-opacity, var(--mat-sys-hover-state-layer-opacity))}"] }); }
|
|
8775
8908
|
}
|
|
8776
8909
|
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(AccessibilityDialogComponent, [{
|
|
8777
8910
|
type: Component,
|
|
8778
|
-
args: [{ selector: 'lib-accessibility-dialog', imports: [MatDialogModule, TranslateModule, MatButtonModule, MatTabsModule, MatIconModule], template: "<h1 mat-dialog-title class=\"text-2-xl\">{{ \"ACCESSIBILITY.TITLE\" | translate }}</h1>\r\n\r\n<div mat-dialog-content>\r\n\t<div class=\"font-size-wrapper\">\r\n\t\t<p class=\"settings-title\">\r\n\t\t\t{{ \"ACCESSIBILITY.FONT_SIZE_LABEL\" | translate }}\r\n\t\t</p>\r\n\r\n\t\t<mat-tab-group [selectedIndex]=\"selectedFontSizeIndex\" (selectedTabChange)=\"changeFontSize($event)\" animationDuration=\"0ms\">\r\n\t\t\t<mat-tab [label]=\"'100%'\"></mat-tab>\r\n\t\t\t<mat-tab [label]=\"'150%'\"></mat-tab>\r\n\t\t\t<mat-tab [label]=\"'200%'\"></mat-tab>\r\n\t\t</mat-tab-group>\r\n\t</div>\r\n\r\n\t<div class=\"contrast-wrapper\">\r\n\t\t<p class=\"settings-title\">\r\n\t\t\t{{ \"ACCESSIBILITY.CONTRAST_LABEL\" | translate }}\r\n\t\t</p>\r\n\r\n\t\t<div class=\"contrast-option-wrapper\">\r\n\t\t\t@for (contrast of contrasts; track contrast) {\r\n\t\t\t
|
|
8911
|
+
args: [{ selector: 'lib-accessibility-dialog', imports: [MatDialogModule, TranslateModule, MatButtonModule, MatTabsModule, MatIconModule], template: "<h1 mat-dialog-title class=\"text-2-xl\">{{ \"ACCESSIBILITY.TITLE\" | translate }}</h1>\r\n\r\n<div mat-dialog-content>\r\n\t<div class=\"font-size-wrapper\">\r\n\t\t<p class=\"settings-title\">\r\n\t\t\t{{ \"ACCESSIBILITY.FONT_SIZE_LABEL\" | translate }}\r\n\t\t</p>\r\n\r\n\t\t<mat-tab-group [selectedIndex]=\"selectedFontSizeIndex\" (selectedTabChange)=\"changeFontSize($event)\" animationDuration=\"0ms\">\r\n\t\t\t<mat-tab [label]=\"'100%'\"></mat-tab>\r\n\t\t\t<mat-tab [label]=\"'150%'\"></mat-tab>\r\n\t\t\t<mat-tab [label]=\"'200%'\"></mat-tab>\r\n\t\t</mat-tab-group>\r\n\t</div>\r\n\r\n\t<div class=\"contrast-wrapper\">\r\n\t\t<p class=\"settings-title\">\r\n\t\t\t{{ \"ACCESSIBILITY.CONTRAST_LABEL\" | translate }}\r\n\t\t</p>\r\n\r\n\t\t<div class=\"contrast-option-wrapper\">\r\n\t\t\t@for (contrast of contrasts; track contrast) {\r\n\t\t\t<button (click)=\"changeContrast(contrast)\" [class]=\"contrast\" [class.active]=\"contrast === currentContrast\" class=\"contrast-option\">\r\n\t\t\t\t<mat-icon class=\"material-icons-outlined\">visibility</mat-icon>\r\n\t\t\t</button>\r\n\t\t\t}\r\n\t\t</div>\r\n\t</div>\r\n\r\n\t<div class=\"visual-tools-wrapper\">\r\n\t\t<p class=\"settings-title\">\r\n\t\t\t{{ \"ACCESSIBILITY.VISUAL_TOOLS_LABEL\" | translate }}\r\n\t\t</p>\r\n\r\n\t\t<button mat-stroked-button [class.active]=\"isTextMagnifierEnabled\" (click)=\"toggleTextMagnifier()\">\r\n\t\t\t{{ \"ACCESSIBILITY.TEXT_MAGNIFIER\" | translate }}\r\n\t\t</button>\r\n\r\n\t\t<button class=\"screen-mask-btn\" mat-stroked-button [class.active]=\"isScreenMaskEnabled\" (click)=\"toggleScreenMask()\">\r\n\t\t\t{{ \"ACCESSIBILITY.SCREEN_MASK\" | translate }}\r\n\t\t</button>\r\n\t</div>\r\n</div>\r\n\r\n<div mat-dialog-actions>\r\n\t<button mat-stroked-button (click)=\"reset()\">{{ \"ACCESSIBILITY.RESET\" | translate }}</button>\r\n\t<button mat-flat-button mat-dialog-close>{{ \"ACCESSIBILITY.CLOSE\" | translate }}</button>\r\n</div>\r\n", styles: [".settings-title{color:var(--base-30);font-weight:600;font-size:.8125rem;margin-bottom:12px}.contrast-wrapper{margin-top:24px}.contrast-wrapper .contrast-option-wrapper{display:flex;gap:12px}.contrast-wrapper .contrast-option-wrapper .contrast-option{display:flex;justify-content:center;align-items:center;padding:8px 24px;color:#000!important;background-color:#fff!important;border-radius:8px;width:100%;border:2px solid transparent}.contrast-wrapper .contrast-option-wrapper .contrast-option.black-white{background-color:#000!important;color:#fff!important}.contrast-wrapper .contrast-option-wrapper .contrast-option.yellow-black{background-color:#f9f150!important;color:#000!important}.contrast-wrapper .contrast-option-wrapper .contrast-option.black-yellow{background-color:#000!important;color:#f9f150!important}.contrast-wrapper .contrast-option-wrapper .contrast-option.active{border:2px solid;border-color:var(--base-0)}.visual-tools-wrapper{margin-top:24px}.visual-tools-wrapper .screen-mask-btn{margin-left:8px}:host ::ng-deep .mdc-tab--active{background-color:var(--mat-sys-primary-container)!important}:host ::ng-deep .mdc-tab--active .mdc-tab__text-label{color:var(--primary-accent)!important}:host ::ng-deep .mat-mdc-tab{width:50px;border:1px solid var(--base-70)}:host ::ng-deep .mat-mdc-tab:first-child{border-bottom-left-radius:16px;border-top-left-radius:16px}:host ::ng-deep .mat-mdc-tab:last-child{border-bottom-right-radius:16px;border-top-right-radius:16px}:host ::ng-deep .mdc-tab-indicator__content--underline{display:none}:host ::ng-deep .mat-mdc-tab-label-container{border-bottom-width:0!important}:host ::ng-deep .active .mdc-button__ripple{background-color:var(--primary-accent)!important;opacity:var(--mat-button-outlined-hover-state-layer-opacity, var(--mat-sys-hover-state-layer-opacity))}\n"] }]
|
|
8779
8912
|
}], null, null); })();
|
|
8780
8913
|
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(AccessibilityDialogComponent, { className: "AccessibilityDialogComponent", filePath: "lib/accessibility/accessibility-dialog.component.ts", lineNumber: 16 }); })();
|
|
8781
8914
|
|