diff --git a/build-scripts/survey-core/package.json b/build-scripts/survey-core/package.json index d72d00e994..89a80f3c98 100644 --- a/build-scripts/survey-core/package.json +++ b/build-scripts/survey-core/package.json @@ -27,7 +27,13 @@ "survey.core.js", "survey.core.min.js", "survey.i18n.js", - "survey.i18n.min.js" + "survey.i18n.min.js", + "bootstrap-integration.d.ts", + "bootstrap-integration.js", + "bootstrap-integration.min.js", + "bootstrap-material-integration.d.ts", + "bootstrap-material-integration.js", + "bootstrap-material-integration.min.js" ], "main": "survey.core.js", "repository": { diff --git a/src/common-styles/common-styles.scss b/src/common-styles/common-styles.scss new file mode 100644 index 0000000000..8ab75b80a8 --- /dev/null +++ b/src/common-styles/common-styles.scss @@ -0,0 +1,11 @@ +@import "./sv-actionbar.scss"; +@import "./sv-drag-drop.scss"; +@import "./sv-popup.scss"; +@import "./sv-buttongroup.scss"; +@import "./sv-visuallyhidden.scss"; +@import "./sv-hidden.scss"; +@import "./sv-titleactions.scss"; +@import "./window.scss"; +@import "./sv-brand-info.scss"; +@import "./sv-ranking.scss"; +@import "./sv-list.scss"; diff --git a/src/common-styles/sv-actionbar.scss b/src/common-styles/sv-actionbar.scss index 4d2bd01e80..0fc11123cd 100644 --- a/src/common-styles/sv-actionbar.scss +++ b/src/common-styles/sv-actionbar.scss @@ -6,7 +6,7 @@ $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) { diff --git a/src/common-styles/sv-drag-drop.scss b/src/common-styles/sv-drag-drop.scss new file mode 100644 index 0000000000..f6ec97552e --- /dev/null +++ b/src/common-styles/sv-drag-drop.scss @@ -0,0 +1,48 @@ +$base-unit: var(--base-unit, 8px); +$font-family: var(--font-family); +$background: var(--background, #fff); +$background-dim: var(--background-dim, #f3f3f3); +$font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; + +@function calcSize($multiplier) { + $result: calc(#{$multiplier} * #{$base-unit}); + @return $result; +} + +.sv-dragged-element-shortcut { + height: calcSize(3); + min-width: calcSize(12.5); + border-radius: calcSize(4.5); + background-color: $background; + padding: calcSize(2); + cursor: grabbing; + position: absolute; + z-index: 1000; + box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); + font-family: var(--font-family, $font-family); + font-size: calcSize(2); + padding-left: calcSize(2.5); + line-height: calcSize(3); +} + +.sv-matrixdynamic__drag-icon { + padding-top: calcSize(1.75); +} +.sv-matrixdynamic__drag-icon:after { + content: " "; + display: block; + height: calcSize(0.75); + width: calcSize(2.5); + border: 1px solid #e7e7e7; + box-sizing: border-box; + border-radius: calcSize(1.25); + cursor: move; + margin-top: calcSize(1.5); +} + +.sv-matrix-row--drag-drop-ghost-mod td { + background-color: $background-dim; +} +.sv-matrix-row--drag-drop-ghost-mod td > * { + visibility: hidden; +} diff --git a/src/common-styles/sv-list.scss b/src/common-styles/sv-list.scss index 1015702814..a9cc98d086 100644 --- a/src/common-styles/sv-list.scss +++ b/src/common-styles/sv-list.scss @@ -63,6 +63,8 @@ $base-unit: var(--base-unit, 8px); padding-inline-end: calcSize(8); padding-inline-start: calcSize(2); color: $foreground; + font-size: calcSize(2); + line-height: calcSize(3); cursor: pointer; overflow: hidden; text-overflow: ellipsis; @@ -83,19 +85,29 @@ $base-unit: var(--base-unit, 8px); .sv-list__item-body { padding-top: calcSize(1.5); padding-bottom: calcSize(1.5); + gap: calcSize(2); + display: flex; } } .sv-list__item-icon { - float: inline-start; // float: left; + float: left; width: calcSize(3); height: calcSize(3); + svg { display: block; } use { fill: $foreground-light; } - margin-inline-end: calcSize(2); //margin-right: calcSize(2); +} + +[dir="rtl"], +[style*="direction:rtl"], +[style*="direction: rtl"] { + .sv-list__item-icon { + float: right; + } } .sv-list__item-separator { margin: calcSize(1) 0; @@ -138,7 +150,6 @@ li:focus .sv-list__item.sv-list__item--selected { height: 100%; flex-direction: column; display: flex; - flex-direction: column; min-height: 0; } @@ -152,7 +163,7 @@ li:focus .sv-list__item.sv-list__item--selected { display: block; position: absolute; top: calcSize(1.5); - inset-block-start: calcSize(2); //left: calcSize(2); + inset-inline-start: calcSize(2); //left: calcSize(2); .sv-svg-icon { width: calcSize(3); height: calcSize(3); @@ -173,8 +184,10 @@ li:focus .sv-list__item.sv-list__item--selected { outline: none; font-size: 1em; color: $foreground; - padding: calcSize(1.5) calcSize(3) calcSize(1.5) calcSize(7); + padding: calcSize(1.5) calcSize(3); + padding-inline-start: calcSize(7); line-height: calcSize(3); + border: none; } .sv-list__input::placeholder { diff --git a/src/common-styles/sv-popup.scss b/src/common-styles/sv-popup.scss index d224b7de06..df68c9cdbb 100644 --- a/src/common-styles/sv-popup.scss +++ b/src/common-styles/sv-popup.scss @@ -223,19 +223,18 @@ sv-popup { line-height: calcSize(3); text-align: center; color: $primary; - border: none; - &:hover { - box-shadow: 0 0 0 2px $primary; - } outline: none; } +.sv-popup__button:hover { + box-shadow: 0 0 0 2px $primary; +} .sv-popup__button:disabled { color: $foreground-disabled; cursor: default; - &:hover { - box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.15); - } +} +.sv-popup__button:disabled:hover { + box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.15); } .sv-popup__button--apply { background-color: $primary; diff --git a/src/default-styles.scss b/src/default-styles.scss index 2457e123b3..3935478496 100644 --- a/src/default-styles.scss +++ b/src/default-styles.scss @@ -651,46 +651,6 @@ f-panel { } // EO ranking -// drag drop -.sv-dragged-element-shortcut { - height: 24px; - min-width: 100px; - border-radius: 36px; - background-color: white; - padding: 16px; - cursor: grabbing; - position: absolute; - z-index: 1000; - box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); - font-family: "Open Sans"; - font-size: 16px; - padding-left: 20px; - line-height: 24px; -} - -.sv-matrixdynamic__drag-icon { - padding-top: 14px; -} -.sv-matrixdynamic__drag-icon:after { - content: " "; - display: block; - height: 6px; - width: 20px; - border: 1px solid #e7e7e7; - box-sizing: border-box; - border-radius: 10px; - cursor: move; - margin-top: 12px; -} - -.sv-matrix-row--drag-drop-ghost-mod td { - background-color: #f3f3f3; -} -.sv-matrix-row--drag-drop-ghost-mod td > * { - visibility: hidden; -} -//eo drag-drop - .sv_qstn .sv_q_select_column { display: inline-block; vertical-align: top; @@ -1322,12 +1282,13 @@ sv-popup { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; + display: flex; + gap: calc(2 * 8px); } .sv-list__item-icon { float: left; width: calc(3 * 8px); height: calc(3 * 8px); - margin-right: calc(2 * 8px); } .sv-list__item-icon svg { display: block; diff --git a/src/defaultV2-theme/blocks/sd-list.scss b/src/defaultV2-theme/blocks/sd-list.scss index 107da74ee1..5610e4c002 100644 --- a/src/defaultV2-theme/blocks/sd-list.scss +++ b/src/defaultV2-theme/blocks/sd-list.scss @@ -1,5 +1,3 @@ -@import "../../common-styles/sv-list.scss"; - .sd-list { padding-right: calcSize(0.5); padding-left: calcSize(0.5); diff --git a/src/defaultV2-theme/defaultV2.fontless.scss b/src/defaultV2-theme/defaultV2.fontless.scss index 6a2d08bc4e..4459641cf4 100644 --- a/src/defaultV2-theme/defaultV2.fontless.scss +++ b/src/defaultV2-theme/defaultV2.fontless.scss @@ -1,4 +1,5 @@ @import "./variables.scss"; +@import "../common-styles/common-styles.scss"; @import "blocks/sd-element.scss"; @import "blocks/sd-question.scss"; @@ -43,17 +44,8 @@ @import "blocks/sd-progress-buttons.scss"; @import "blocks/sd-list.scss"; @import "blocks/sd-timer.scss"; -@import "../common-styles/sv-actionbar.scss"; -@import "../common-styles/sv-popup.scss"; -@import "../common-styles/sv-buttongroup.scss"; -@import "../common-styles/sv-visuallyhidden.scss"; -@import "../common-styles/sv-hidden.scss"; -@import "../common-styles/sv-titleactions.scss"; -@import "../common-styles/window.scss"; @import "../signaturepad.scss"; @import "./defaultV2.m600.scss"; -@import "../common-styles/sv-brand-info.scss"; -@import "../common-styles/sv-ranking.scss"; body { --sv-defaultV2-mark: true; diff --git a/src/main.scss b/src/main.scss index 86fffedd5b..3d5bd7d6dc 100644 --- a/src/main.scss +++ b/src/main.scss @@ -6,6 +6,7 @@ @import "./common-styles/window.scss"; @import "./common-styles/sv-brand-info.scss"; +@import "./common-styles/sv-drag-drop.scss"; $header-background-color: #e7e7e7; $body-container-background-color: #f4f4f4; diff --git a/src/modern.fontless.scss b/src/modern.fontless.scss index e2a8e0a453..7eeb2bbbac 100644 --- a/src/modern.fontless.scss +++ b/src/modern.fontless.scss @@ -35,20 +35,9 @@ @import "./modern/blocks/sv-completedpage.scss"; @import "./modern/blocks/sv-header.scss"; @import "./modern/blocks/sv-signaturepad.scss"; -@import "./common-styles/sv-list.scss"; -@import "./common-styles/sv-buttongroup.scss"; -@import "./common-styles/sv-visuallyhidden.scss"; -@import "./common-styles/sv-hidden.scss"; -@import "./common-styles/sv-ranking.scss"; - +@import "./common-styles/common-styles.scss"; @import "./signaturepad.scss"; - -@import "./common-styles/window.scss"; - @import "./boolean-checkbox.scss"; -@import "./common-styles/sv-actionbar.scss"; -@import "./common-styles/sv-titleactions.scss"; -@import "./common-styles/sv-brand-info.scss"; //@import "./main.rtl.scss"; @import "./modern.m600.scss"; diff --git a/src/plugins/themes/common-theme-settings.ts b/src/plugins/themes/common-theme-settings.ts index 494533a072..95a4c6ea0f 100644 --- a/src/plugins/themes/common-theme-settings.ts +++ b/src/plugins/themes/common-theme-settings.ts @@ -421,8 +421,8 @@ export function setStyles(): void { ".sv-list": "padding: 0; margin: 0; background: var(--background, #fff); list-style-type: none; overflow-y: auto;", ".sv-list__item--with-icon": "padding-top: 12px; padding-bottom: 12px;", ".sv-list__item": "width: 100%; box-sizing: border-box; cursor: pointer; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;", - ".sv-list__item-body": "width: 100%; box-sizing: border-box; font-size: calc(2 * var(--base-unit, 8px)); line-height: calc(3 * var(--base-unit, 8px)); padding-top: calc(1 * var(--base-unit, 8px)); padding-bottom: calc(1 * var(--base-unit, 8px)); padding-inline-end: calc(8 * var(--base-unit, 8px)); padding-inline-start: calc(2 * var(--base-unit, 8px)); cursor: pointer; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;", - ".sv-list__item-icon": "float: left; width: calc(3 * 8px); height: calc(3 * 8px); margin-right: calc(2 * 8px);", + ".sv-list__item-body": "width: 100%; box-sizing: border-box; font-size: calc(2 * var(--base-unit, 8px)); line-height: calc(3 * var(--base-unit, 8px)); padding-top: calc(1 * var(--base-unit, 8px)); padding-bottom: calc(1 * var(--base-unit, 8px)); padding-inline-end: calc(8 * var(--base-unit, 8px)); padding-inline-start: calc(2 * var(--base-unit, 8px)); cursor: pointer; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: flex; gap: calc(2 * 8px);", + ".sv-list__item-icon": "float: left; width: calc(3 * 8px); height: calc(3 * 8px);", ".sv-list__item-icon svg": "display: block;", ".sv-list__item-icon use": "fill: #909090;", ".sv-list__item:hover .sv-list__item-body": "background-color: var(--background-dim, #f3f3f3);", diff --git a/src/question.ts b/src/question.ts index 7fbdbe57d1..b73706f50a 100644 --- a/src/question.ts +++ b/src/question.ts @@ -1471,6 +1471,13 @@ export class Question extends SurveyElement ? 1 : 0; } + /** + * Returns `true` if a question answer matches the `correctAnswer` property value. + * + * [View Demo](https://surveyjs.io/form-library/examples/create-a-scored-quiz (linkStyle)) + * @see correctAnswer + * @see SurveyModel.getQuizQuestions + */ public isAnswerCorrect(): boolean { return this.correctAnswerCount == this.quizQuestionCount; } @@ -1654,7 +1661,7 @@ export class Question extends SurveyElement return json; } /** - * Returns true if there is a validation error(s) in the question. + * Returns `true` if there is a validation error(s) in the question. * @param fireCallback set it to true to show an error in UI. */ public hasErrors(fireCallback: boolean = true, rec: any = null): boolean { diff --git a/src/stylesmanager.ts b/src/stylesmanager.ts index fdbd9dc0d7..87311558e6 100644 --- a/src/stylesmanager.ts +++ b/src/stylesmanager.ts @@ -276,7 +276,7 @@ export class StylesManager { static getAvailableThemes(): Array { const themeMapper = (surveyCss.getAvailableThemes() as Array) - .filter(themeName => ["defaultV2", "modern", "default"].indexOf(themeName) !== -1) + .filter(themeName => ["defaultV2", "default", "modern"].indexOf(themeName) !== -1) .map(themeName => { return { name: themeName, theme: surveyCss[themeName] }; }); return themeMapper; }