Merge branch 'master' of github.com:surveyjs/survey-library into bugs…

…/5924-Dropdown-Tagbox-item-focused-state-for-keyboard-navigation

packages/survey-angular-ui/src/question.component.ts

@@ -2,6 +2,7 @@ import { Component, ElementRef, Input, ViewChild } from "@angular/core";
 import { Question } from "survey-core";
 import { AngularComponentFactory } from "./component-factory";
 import { EmbeddedViewContentComponent } from "./embedded-view-content.component";
+import { getComponentName } from "./question";
 
 @Component({
   selector: "sv-ng-question",
@@ -18,13 +19,7 @@ export class QuestionComponent extends EmbeddedViewContentComponent {
       this.model.afterRender(this.rootEl?.nativeElement);
     }
   }
-  public getComponentName(): string {
-    if (this.model.customWidget) return "survey-customwidget";
-    if (this.model.isDefaultRendering()) {
-      return this.model.getTemplate() + "-question";
-    }
-    return this.model.getComponentName();
-  }
+  public getComponentName(): string { return getComponentName(this.model); }
   public getQuestionContentWrapperComponentName(): string {
     return (<any>this.model.survey).getQuestionContentWrapperComponentName(this.model) || this.getComponentName();
   }

packages/survey-angular-ui/src/question.ts

@@ -25,4 +25,12 @@ export class QuestionAngular<T extends Question = Question> extends BaseAngular<
     }
     super.ngOnDestroy();
   }
+}
+
+export function getComponentName(question: Question): string {
+  if (question.customWidget) return "survey-customwidget";
+  if (question.isDefaultRendering()) {
+    return question.getTemplate() + "-question";
+  }
+  return question.getComponentName();
 }

packages/survey-angular-ui/src/questions/custom.component.ts

@@ -1,7 +1,7 @@
 import { Question } from "survey-core";
 import { QuestionCustomModel } from "survey-core";
 import { Component } from "@angular/core";
-import { QuestionAngular } from "../question";
+import { QuestionAngular, getComponentName } from "../question";
 import { AngularComponentFactory } from "../component-factory";
 
 @Component({
@@ -12,12 +12,7 @@ export class CustomQuestionComponent extends QuestionAngular<QuestionCustomModel
   get contentQuestion(): Question {
     return this.model.contentQuestion;
   }
-  getComponentName(element: Question): string {
-    if (element.customWidget) {
-      return "survey-customwidget";
-    }
-    return element.getTemplate() + "-question";
-  }
+  getComponentName(element: Question): string { return getComponentName(element); }
 }
 
 AngularComponentFactory.Instance.registerComponent("custom-question", CustomQuestionComponent);

packages/survey-angular-ui/src/questions/matrixcell.component.ts

@@ -7,12 +7,13 @@ import {
   MatrixDropdownRowModelBase,
   SurveyModel
 } from "survey-core";
+import { getComponentName } from "../question";
 
 @Component({
   selector: "sv-ng-matrix-cell",
   templateUrl: "./matrixcell.component.html",
   styles: [":host { display: none; }"]
-  })
+})
 export class MatrixCellComponent extends BaseAngular<Question> {
   @Input() question!: QuestionMatrixDropdownModelBase;
   @Input() cell!: QuestionMatrixDropdownRenderedCell;
@@ -54,12 +55,7 @@ export class MatrixCellComponent extends BaseAngular<Question> {
     };
   }
 
-  getComponentName(element: Question) {
-    if (element.customWidget) {
-      return "survey-customwidget";
-    }
-    return element.getType()+"-question";
-  }
+  getComponentName(element: Question) { return getComponentName(element); }
   getHeaders(): string {
     return this.cell.headers;
   }

src/common-styles/sv-actionbar.scss

@@ -1,18 +1,4 @@
-$primary: var(--primary, #19b394);
-
-$secondary: var(--secondary, #ff9814);
-
-$background-dim: var(--background-dim, #f3f3f3);
-
-$foreground: var(--foreground, #161616);
-$foreground-light: var(--foreground-light, #909090);
-$border: var(--border, #d6d6d6);
-$base-unit: var(--base-unit, 8px);
-
-@function calcSize($multiplier) {
-  $result: calc(#{$multiplier} * #{$base-unit});
-  @return $result;
-}
+@import "../defaultV2-theme/variables.scss";
 
 .sv-action-bar {
   display: flex;
@@ -111,7 +97,6 @@ button.sv-action-bar-item {
 }
 
 .sv-action-bar-item--active.sv-action-bar-item--pressed {
-
   &:focus,
   &:focus-visible {
     outline: none;

src/common-styles/sv-buttongroup.scss

@@ -1,16 +1,4 @@
-$primary: var(--primary, #19b394);
-$foreground-light: var(--foreground-light, #909090);
-$border: var(--border, #d6d6d6);
-$background-dim: var(--background-dim, #f3f3f3);
-$base-unit: var(--base-unit, 8px);
-$foreground-disabled: var(--foreground-disabled, rgba(#161616, 0.16));
-$background: var(--background, #fff);
-$foreground: var(--foreground, #161616);
-
-@function calcSize($multiplier) {
-  $result: calc(#{$multiplier} * #{$base-unit});
-  @return $result;
-}
+@import "../defaultV2-theme/variables.scss";
 
 .sv-button-group {
   display: flex;
@@ -94,11 +82,12 @@ $foreground: var(--foreground, #161616);
 }
 
 .sv-button-group__item--disabled {
-  color: $foreground-disabled;
+  color: $foreground;
+  opacity: 0.25;
   cursor: default;
 
   .sv-button-group__item-icon use {
-    fill: $foreground-disabled;
+    fill: $foreground;
   }
 
   &:hover {

src/common-styles/sv-drag-drop.scss

@@ -1,12 +1,4 @@
-$base-unit: var(--base-unit, 8px);
-$font-family: var(--font-family);
-$background: var(--background, #fff);
-$background-dim: var(--background-dim, #f3f3f3);
-
-@function calcSize($multiplier) {
-  $result: calc(#{$multiplier} * #{$base-unit});
-  @return $result;
-}
+@import "../defaultV2-theme/variables.scss";
 
 .sv-dragged-element-shortcut {
   height: calcSize(3);

src/common-styles/sv-list.scss

@@ -1,23 +1,4 @@
-$primary: var(--primary, #19b394);
-$primary-foreground: var(--primary-foreground, #fff);
-$primary-light: var(--primary-light, rgba(25, 179, 148, 0.1));
-
-$background: var(--background, #fff);
-$background-dim: var(--background-dim, #f3f3f3);
-
-$foreground-light: var(--foreground-light, #909090);
-//todo: discuss this variable
-$foreground: var(--foreground, #161616);
-$border: var(--border, #d6d6d6);
-$border-inside: var(--border-inside, rgba(0, 0, 0, 0.16));
-$font-family: var(--font-family);
-
-$base-unit: var(--base-unit, 8px);
-
-@function calcSize($multiplier) {
-  $result: calc(#{$multiplier} * #{$base-unit});
-  @return $result;
-}
+@import "../defaultV2-theme/variables.scss";
 
 @mixin borderLight {
   box-shadow: 0 0 0 calcSize(0.25) $border-light;

src/common-styles/sv-popup.scss

@@ -1,25 +1,6 @@
-$primary: var(--primary, #19b394);
-$primary-foreground: var(--primary-foreground, #fff);
-$primary-light: var(--primary-light, rgba(25, 179, 148, 0.1));
-
-$background: var(--background, #fff);
-$background-dim: var(--background-dim, #f3f3f3);
-$background-dim-light: var(--background-dim-light, #f9f9f9);
-$border-light: var(--border-light, #eaeaea);
-$background-semitransparent: var(--background-semitransparent, rgba(144, 144, 144, 0.5));
-$foreground: var(--foreground, #161616);
-//todo: discuss this variable
-$foreground-disabled: var(--foreground-disabled, rgba(#161616, 0.16));
-$foreground-light: var(--foreground-light, #909090);
-$font-family: var(--font-family, "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif);
-$popup-overlay-height: var(--sv-popup-overlay-height, 100vh);
-
-$base-unit: var(--base-unit, 8px);
+@import "../defaultV2-theme/variables.scss";
 
-@function calcSize($multiplier) {
-  $result: calc(#{$multiplier} * #{$base-unit});
-  @return $result;
-}
+$popup-overlay-height: var(--sv-popup-overlay-height, 100vh);
 
 sv-popup {
   display: block;
@@ -255,7 +236,8 @@ sv-popup {
 }
 
 .sv-popup__button:disabled {
-  color: $foreground-disabled;
+  color: $foreground;
+  opacity: 0.25;
   cursor: default;
 }
 

src/common-styles/sv-progress-buttons.scss

@@ -1,4 +1,4 @@
-$font-family: var(--font-family);
+@import "../defaultV2-theme/variables.scss";
 
 .sv_progress-buttons__container-center {
   text-align: center;

src/common-styles/sv-progress-toc.scss

@@ -1,4 +1,4 @@
-$font-family: var(--font-family);
+@import "../defaultV2-theme/variables.scss";
 
 .sv_progress-toc {
   padding: 8px;

src/common-styles/sv-ranking.scss

@@ -1,17 +1,4 @@
-$base-unit: var(--base-unit, 8px);
-$primary: var(--primary, #19b394);
-$main-color: $primary;
-$foreground: var(--foreground, #161616);
-$foreground-light: var(--foreground-light, #909090);
-$background: var(--background, #fff);
-$primary-light: var(--primary-light, rgba(25, 179, 148, 0.1));
-//todo: discuss this variable
-$foreground-disabled: var(--foreground-disabled, rgba(#161616, 0.16));
-
-@function calcSize($multiplier) {
-  $result: calc(#{$multiplier} * #{$base-unit});
-  @return $result;
-}
+@import "../defaultV2-theme/variables.scss";
 
 .sv-ranking {
   outline: none;
@@ -114,7 +101,8 @@ $foreground-disabled: var(--foreground-disabled, rgba(#161616, 0.16));
 }
 
 .sd-ranking--disabled .sv-ranking-item__text {
-  color: $foreground-disabled;
+  color: $foreground;
+  opacity: 0.25;
 }
 
 .sv-ranking-item__ghost.sv-ranking-item__ghost {

src/common-styles/sv-save-data.scss

@@ -1,17 +1,4 @@
-$primary: var(--primary, #19b394);
-$background: var(--background, #fff);
-$foreground: var(--foreground, #161616);
-$red: var(--red, #e60a3e);
-$shadow-medium: rgba(0, 0, 0, 0.1);
-
-$font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
-
-$base-unit: var(--base-unit, 8px);
-
-@function calcSize($multiplier) {
-  $result: calc(#{$multiplier} * #{$base-unit});
-  @return $result;
-}
+@import "../defaultV2-theme/variables.scss";
 
 .sv-save-data_root {
   position: absolute;

src/defaultV2-theme/blocks/sd-boolean.scss

@@ -58,15 +58,14 @@
 }
 
 .sd-boolean--disabled {
-
   .sd-boolean__thumb,
   .sd-boolean__label {
-    color: $foreground-disabled-for-editors;
+    color: $foreground;
+    opacity: 0.25;
   }
 }
 
 .svc-question__content {
-
   .sd-boolean:not(.sd-boolean--checked):not(.sd-boolean--indeterminate) .sd-boolean__label:nth-of-type(1),
   .sd-boolean--checked .sd-boolean__label:nth-of-type(2) {
     color: $primary;

src/defaultV2-theme/blocks/sd-button.scss

@@ -1,7 +1,5 @@
 @import "../variables.scss";
 
-
-
 .sd-btn {
   appearance: none;
   -webkit-appearance: none;
@@ -24,15 +22,15 @@
 }
 
 .sd-btn:not(:disabled) {
-
   &:hover,
   &:focus {
     box-shadow: 0 0 0 2px $primary;
   }
 }
 
 .sd-btn:disabled {
-  color: $foreground-disabled;
+  color: $foreground;
+  opacity: 0.25;
   cursor: default;
 }
 
@@ -42,7 +40,6 @@
 }
 
 .sd-btn--action:not(:disabled) {
-
   &:hover,
   &:focus {
     color: $primary;

src/defaultV2-theme/blocks/sd-input.scss

@@ -40,7 +40,8 @@
 
 .sd-input--disabled,
 .sd-input--disabled::placeholder {
-  color: $foreground-disabled-for-editors;
+  color: $foreground;
+  opacity: 0.25;
 }
 
 .sd-root--readonly .sd-input--disabled,

src/defaultV2-theme/blocks/sd-item.scss

@@ -49,7 +49,8 @@
 }
 
 .sd-item--disabled .sd-item__control-label {
-  color: $foreground-disabled-for-editors;
+  color: $foreground;
+  opacity: 0.25;
 }
 
 .sd-root--readonly .sd-item--disabled .sd-item__control-label {

src/defaultV2-theme/blocks/sd-page.scss

@@ -20,9 +20,11 @@
   width: 100%;
   box-sizing: border-box;
 }
-.sd-page__title {
+.sd-page .sd-page__title {
   @include page_title();
+  color: $foreground-dim;
 }
-.sd-page__description {
+.sd-page .sd-page__description {
   @include page_description();
+  color: $foreground-dim-light;
 }