survery-lib 0.1.9 → 0.1.11

package/assets/style.css

@@ -1,3 +1,325 @@
+.ng-select.ng-select-opened > .ng-select-container {
+  background: #ffffff;
+  border-color: #b3b3b3 #ccc #d9d9d9;
+}
+.ng-select.ng-select-opened > .ng-select-container:hover {
+  box-shadow: none;
+}
+.ng-select.ng-select-opened > .ng-select-container .ng-arrow {
+  top: -2px;
+  border-color: transparent transparent #999999;
+  border-width: 0 5px 5px;
+}
+.ng-select.ng-select-opened > .ng-select-container .ng-arrow:hover {
+  border-color: transparent transparent #333333;
+}
+.ng-select.ng-select-opened.ng-select-top > .ng-select-container {
+  border-top-right-radius: 0;
+  border-top-left-radius: 0;
+}
+.ng-select.ng-select-opened.ng-select-right > .ng-select-container {
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
+}
+.ng-select.ng-select-opened.ng-select-bottom > .ng-select-container {
+  border-bottom-right-radius: 0;
+  border-bottom-left-radius: 0;
+}
+.ng-select.ng-select-opened.ng-select-left > .ng-select-container {
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
+}
+.ng-select.ng-select-focused:not(.ng-select-opened) > .ng-select-container {
+  border-color: #007eff;
+  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 0 3px rgba(0, 126, 255, 0.1);
+}
+.ng-select.ng-select-disabled > .ng-select-container {
+  background-color: #f9f9f9;
+}
+.ng-select .ng-has-value .ng-placeholder {
+  display: none;
+}
+.ng-select .ng-select-container {
+  color: #333;
+  background-color: #ffffff;
+  border-radius: 4px;
+  border: 1px solid #ccc;
+  min-height: 36px;
+  align-items: center;
+}
+.ng-select .ng-select-container:hover {
+  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.06);
+}
+.ng-select .ng-select-container .ng-value-container {
+  align-items: center;
+  padding-left: 10px;
+}
+[dir=rtl] .ng-select .ng-select-container .ng-value-container {
+  padding-right: 10px;
+  padding-left: 0;
+}
+
+.ng-select .ng-select-container .ng-value-container .ng-placeholder {
+  color: #999999;
+}
+.ng-select.ng-select-single .ng-select-container {
+  height: 36px;
+}
+.ng-select.ng-select-single .ng-select-container .ng-value-container .ng-input {
+  top: 5px;
+  left: 0;
+  padding-left: 10px;
+  padding-right: 50px;
+}
+[dir=rtl] .ng-select.ng-select-single .ng-select-container .ng-value-container .ng-input {
+  padding-right: 10px;
+  padding-left: 50px;
+}
+
+.ng-select.ng-select-multiple.ng-select-disabled > .ng-select-container .ng-value-container .ng-value {
+  background-color: #f9f9f9;
+  border: 1px solid #e6e6e6;
+}
+.ng-select.ng-select-multiple.ng-select-disabled > .ng-select-container .ng-value-container .ng-value .ng-value-label {
+  padding: 0 5px;
+}
+.ng-select.ng-select-multiple .ng-select-container .ng-value-container {
+  padding-top: 5px;
+  padding-left: 7px;
+}
+[dir=rtl] .ng-select.ng-select-multiple .ng-select-container .ng-value-container {
+  padding-right: 7px;
+  padding-left: 0;
+}
+
+.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value {
+  font-size: 0.9em;
+  margin-bottom: 5px;
+  color: #333;
+  background-color: #ebf5ff;
+  border-radius: 2px;
+  margin-right: 5px;
+}
+[dir=rtl] .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value {
+  margin-right: 0;
+  margin-left: 5px;
+}
+
+.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value.ng-value-disabled {
+  background-color: #f9f9f9;
+}
+.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value.ng-value-disabled .ng-value-label {
+  padding-left: 5px;
+}
+[dir=rtl] .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value.ng-value-disabled .ng-value-label {
+  padding-left: 0;
+  padding-right: 5px;
+}
+
+.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value .ng-value-label {
+  display: inline-block;
+  padding: 1px 5px;
+}
+.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value .ng-value-icon {
+  display: inline-block;
+  padding: 1px 5px;
+}
+.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value .ng-value-icon:hover {
+  background-color: #d1e8ff;
+}
+.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value .ng-value-icon.left {
+  border-right: 1px solid #b8dbff;
+}
+[dir=rtl] .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value .ng-value-icon.left {
+  border-left: 1px solid #b8dbff;
+  border-right: none;
+}
+
+.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value .ng-value-icon.right {
+  border-left: 1px solid #b8dbff;
+}
+[dir=rtl] .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value .ng-value-icon.right {
+  border-left: 0;
+  border-right: 1px solid #b8dbff;
+}
+
+.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-input {
+  padding: 0 0 3px 3px;
+}
+[dir=rtl] .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-input {
+  padding: 0 3px 3px 0;
+}
+
+.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-input > input {
+  color: #000000;
+}
+.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-placeholder {
+  top: 5px;
+  padding-bottom: 5px;
+  padding-left: 3px;
+}
+[dir=rtl] .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-placeholder {
+  padding-right: 3px;
+  padding-left: 0;
+}
+
+.ng-select .ng-clear-wrapper {
+  color: #999999;
+}
+.ng-select .ng-clear-wrapper:hover .ng-clear {
+  color: #D0021B;
+}
+.ng-select .ng-clear-wrapper:focus .ng-clear {
+  color: #D0021B;
+}
+.ng-select .ng-clear-wrapper:focus {
+  outline: none;
+}
+.ng-select .ng-spinner-zone {
+  padding: 5px 5px 0 0;
+}
+[dir=rtl] .ng-select .ng-spinner-zone {
+  padding: 5px 0 0 5px;
+}
+
+.ng-select .ng-arrow-wrapper {
+  width: 25px;
+  padding-right: 5px;
+}
+[dir=rtl] .ng-select .ng-arrow-wrapper {
+  padding-left: 5px;
+  padding-right: 0;
+}
+
+.ng-select .ng-arrow-wrapper:hover .ng-arrow {
+  border-top-color: #666666;
+}
+.ng-select .ng-arrow-wrapper .ng-arrow {
+  border-color: #999999 transparent transparent;
+  border-style: solid;
+  border-width: 5px 5px 2.5px;
+}
+
+.ng-dropdown-panel {
+  background-color: #ffffff;
+  border: 1px solid #ccc;
+  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.06);
+  left: 0;
+}
+.ng-dropdown-panel.ng-select-top {
+  bottom: 100%;
+  border-top-right-radius: 4px;
+  border-top-left-radius: 4px;
+  border-bottom-color: #e6e6e6;
+  margin-bottom: -1px;
+}
+.ng-dropdown-panel.ng-select-top .ng-dropdown-panel-items .ng-option:first-child {
+  border-top-right-radius: 4px;
+  border-top-left-radius: 4px;
+}
+.ng-dropdown-panel.ng-select-right {
+  left: 100%;
+  top: 0;
+  border-top-right-radius: 4px;
+  border-bottom-right-radius: 4px;
+  border-bottom-left-radius: 4px;
+  border-bottom-color: #e6e6e6;
+  margin-bottom: -1px;
+}
+.ng-dropdown-panel.ng-select-right .ng-dropdown-panel-items .ng-option:first-child {
+  border-top-right-radius: 4px;
+}
+.ng-dropdown-panel.ng-select-bottom {
+  top: 100%;
+  border-bottom-right-radius: 4px;
+  border-bottom-left-radius: 4px;
+  border-top-color: #e6e6e6;
+  margin-top: -1px;
+}
+.ng-dropdown-panel.ng-select-bottom .ng-dropdown-panel-items .ng-option:last-child {
+  border-bottom-right-radius: 4px;
+  border-bottom-left-radius: 4px;
+}
+.ng-dropdown-panel.ng-select-left {
+  left: -100%;
+  top: 0;
+  border-top-left-radius: 4px;
+  border-bottom-right-radius: 4px;
+  border-bottom-left-radius: 4px;
+  border-bottom-color: #e6e6e6;
+  margin-bottom: -1px;
+}
+.ng-dropdown-panel.ng-select-left .ng-dropdown-panel-items .ng-option:first-child {
+  border-top-left-radius: 4px;
+}
+.ng-dropdown-panel .ng-dropdown-header {
+  border-bottom: 1px solid #ccc;
+  padding: 5px 7px;
+}
+.ng-dropdown-panel .ng-dropdown-footer {
+  border-top: 1px solid #ccc;
+  padding: 5px 7px;
+}
+.ng-dropdown-panel .ng-dropdown-panel-items .ng-optgroup {
+  user-select: none;
+  padding: 8px 10px;
+  font-weight: 500;
+  color: rgba(0, 0, 0, 0.54);
+  cursor: pointer;
+}
+.ng-dropdown-panel .ng-dropdown-panel-items .ng-optgroup.ng-option-disabled {
+  cursor: default;
+}
+.ng-dropdown-panel .ng-dropdown-panel-items .ng-optgroup.ng-option-marked {
+  background-color: #f5faff;
+}
+.ng-dropdown-panel .ng-dropdown-panel-items .ng-optgroup.ng-option-selected, .ng-dropdown-panel .ng-dropdown-panel-items .ng-optgroup.ng-option-selected.ng-option-marked {
+  color: rgba(0, 0, 0, 0.54);
+  background-color: #ebf5ff;
+  font-weight: 600;
+}
+.ng-dropdown-panel .ng-dropdown-panel-items .ng-option {
+  background-color: #ffffff;
+  color: rgba(0, 0, 0, 0.87);
+  padding: 8px 10px;
+}
+.ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-selected, .ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-selected.ng-option-marked {
+  color: #333;
+  background-color: #ebf5ff;
+}
+.ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-selected .ng-option-label, .ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-selected.ng-option-marked .ng-option-label {
+  font-weight: 600;
+}
+.ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-marked {
+  background-color: #f5faff;
+  color: #333;
+}
+.ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-disabled {
+  color: #cccccc;
+}
+.ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-child {
+  padding-left: 22px;
+}
+[dir=rtl] .ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-child {
+  padding-right: 22px;
+  padding-left: 0;
+}
+
+.ng-dropdown-panel .ng-dropdown-panel-items .ng-option .ng-tag-label {
+  font-size: 80%;
+  font-weight: 400;
+  padding-right: 5px;
+}
+[dir=rtl] .ng-dropdown-panel .ng-dropdown-panel-items .ng-option .ng-tag-label {
+  padding-left: 5px;
+  padding-right: 0;
+}
+
+[dir=rtl] .ng-dropdown-panel {
+  direction: rtl;
+  text-align: right;
+}
+
 lib-survery-lib .survay-pagination nav ul.pagination {
   display: flex;
   gap: 8px;
@@ -54,5 +376,8 @@ lib-survery-lib .survey-page_submitted .invalid-question {
   border-radius: 5px;
   border-bottom: 2px solid red !important;
 }
+lib-survery-lib ng-select {
+  font-size: 20px !important;
+}
 
 /*# sourceMappingURL=style.css.map */

package/assets/style.css.map

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../scss/style.scss"],"names":[],"mappings":"AAGY;EACI;EACA;;AAIQ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;AAOJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;AAOJ;EACI;EACA;EACA;;AAKJ;EACI;EACA;EACA;;AAIR;EACI;AACA;EACA;EACA;EACA;EACA;AACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAOpB;EACI;EACA;EACA","file":"style.css"}
+{"version":3,"sourceRoot":"","sources":["../../../node_modules/@ng-select/ng-select/scss/default.theme.scss","../../../node_modules/@ng-select/ng-select/scss/_mixins.scss","../scss/style.scss"],"names":[],"mappings":"AAiCQ;EACI,YA3BG;EA4BH;;AACA;EACI;;AAEJ;EACI;EACA;EACA;;AACA;EACI;;AAKR;EACI;EACA;;AAIJ;EACI;EACA;;AAIJ;EACI;EACA;;AAIJ;EACI;EACA;;AAKR;EACI,cAzEU;EA0EV,YA9DW;;AAkEf;EACI,kBA7Ec;;AAgFtB;EACI;;AAEJ;EACI,OArFiB;EAsFjB,kBAlFO;EAmFP,eApFkB;EAqFlB;EACA,YA5EW;EA6EX;;AACA;EACI;;AAEJ;EACI;EACA,cAlFmB;;AChBlB;EDoGG,eApFe;EAqFf;;;AAEJ;EACI,OA1FQ;;AA+FhB;EACI,QA/FO;;AAiGH;EACI;EACA;EACA,cAnGW;EAoGX;;ACpHP;EDsHW,eAtGO;EAuGP;;;AAQZ;EACI,kBA7HU;EA8HV;;AACA;EACI;;AAKR;EACI;EACA;;AC1IH;ED4IO;EACA;;;AAEJ;EACI,WA/HQ;EAgIR;EACA,OAhJK;EAiJL,kBA5IC;EA6ID;EACA;;ACrJP;EDuJW;EACA;;;AAEJ;EACI,kBAxJE;;AAyJF;EACI;;AC7Jf;ED+JmB;EACA;;;AAIZ;EACI;EACA;;AAEJ;EACI;EACA;;AACA;EACI;;AAEJ;EACI;;AC/Kf;EDiLmB;EACA;;;AAGR;EACI;;ACtLf;EDwLmB;EACA;;;AAKhB;EACI;;AC/LP;EDiMW;;;AAEJ;EACI,OAxKD;;AA2KP;EACI;EACA;EACA;;AC1MP;ED4MW;EACA;;;AAMpB;EACI;;AACA;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAGR;EACI;;AChOK;EDmOD;;;AAGR;EACI;EACA;;ACxOK;ED0OD;EACA;;;AAGA;EACI;;AAGR;EACI;EACA;EACA;;;AAKZ;EACI,kBArPW;EAsPX;EACA;EACA;;AACA;EACI;EACA,yBA5PkB;EA6PlB,wBA7PkB;EA8PlB;EACA;;AAGQ;EACI,yBAnQM;EAoQN,wBApQM;;AAyQtB;EACI;EACA;EACA,yBA5QkB;EA6QlB,4BA7QkB;EA8QlB,2BA9QkB;EA+QlB;EACA;;AAGQ;EACI,yBApRM;;AAyRtB;EACI;EACA,4BA3RkB;EA4RlB,2BA5RkB;EA6RlB;EACA;;AAGQ;EACI,4BAlSM;EAmSN,2BAnSM;;AAwStB;EACI;EACA;EACA,wBA3SkB;EA4SlB,4BA5SkB;EA6SlB,2BA7SkB;EA8SlB;EACA;;AAGQ;EACI,wBAnTM;;AAwTtB;EACI;EACA;;AAEJ;EACI;EACA;;AAGA;EACI;EACA;EACA;EACA,OApTuB;EAqTvB;;AACA;EACI;;AAEJ;EACI,kBAtUG;;AAwUP;EACI,OA7TmB;EA8TnB,kBA7UK;EA8UL;;AAGR;EACI,kBAnVG;EAoVH,OAjUqB;EAkUrB;;AACA;EACI,OA3VS;EA4VT,kBAvVK;;AAwVL;EACI;;AAGR;EACI,kBA1VG;EA2VH,OAnWS;;AAqWb;EACI,OA9UqB;;AAgVzB;EACI;;AC3WH;ED6WO;EACA;;;AAGR;EACI;EACA;EACA;;ACpXH;EDsXO;EACA;;;ACvXP;ED8XL;EACA;;;AE1XI;EACI;EACA;;AAIQ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;AAOJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;AAOJ;EACI;EACA;EACA;;AAKJ;EACI;EACA;EACA;;AAIR;EACI;AACA;EACA;EACA;EACA;EACA;AACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAOpB;EACI;EACA;EACA;;AAGJ;EACI","file":"style.css"}

package/ng-package.json

@@ -0,0 +1,11 @@
+{
+  "$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
+  "dest": "../../dist/survery-lib",
+  "lib": {
+    "entryFile": "src/public-api.ts"
+  } ,
+  "assets": [
+    "./assets/*"
+  ],
+  "allowedNonPeerDependencies": ["."]
+}

package/package.json

@@ -1,27 +1,15 @@
-{
-  "name": "survery-lib",
-  "version": "0.1.9",
-  "peerDependencies": {
-    "@angular/common": "^16.1.0",
-    "@angular/core": "^16.1.0"
-  },
-  "dependencies": {
-    "tslib": "^2.3.0",
-    "@ng-stack/forms": "^3.1.0",
-    "uuid": "^8.3.2"
-  },
-  "sideEffects": false,
-  "module": "fesm2022/survery-lib.mjs",
-  "typings": "index.d.ts",
-  "exports": {
-    "./package.json": {
-      "default": "./package.json"
-    },
-    ".": {
-      "types": "./index.d.ts",
-      "esm2022": "./esm2022/survery-lib.mjs",
-      "esm": "./esm2022/survery-lib.mjs",
-      "default": "./fesm2022/survery-lib.mjs"
-    }
-  }
-}
+{
+  "name": "survery-lib",
+  "version": "0.1.11",
+  "peerDependencies": {
+    "@angular/common": "^16.1.0",
+    "@angular/core": "^16.1.0"
+  },
+  "dependencies": {
+    "tslib": "^2.3.0",
+    "@ng-stack/forms": "^3.1.0",
+    "uuid": "^8.3.2",
+    "@ng-select/ng-select": "^11.2.0"
+  },
+  "sideEffects": false
+}

package/scss/style.scss

@@ -0,0 +1,88 @@
+@import "../../../node_modules/@ng-select/ng-select/scss/default.theme.scss";
+
+lib-survery-lib {
+    .survay-pagination {
+        nav {
+            ul.pagination {
+                display: flex;
+                gap: 8px;
+
+                li.page-item.next-page-item {
+                    a {
+                        &::after {
+                            content: ' ';
+                            background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTgiIGhlaWdodD0iMTIiIHZpZXdCb3g9IjAgMCAxOCAxMiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGcgaWQ9IkFycm93IC0gTGVmdCI+CjxwYXRoIGlkPSJGaWxsIDEiIG9wYWNpdHk9IjAuNCIgZD0iTTEyLjc5NzUgNC44MDk1N0wxNi40OTY3IDQuNDgyNDJDMTcuMzI2OSA0LjQ4MjQyIDE4IDUuMTYyMDYgMTggNi4wMDAzMkMxOCA2LjgzODU4IDE3LjMyNjkgNy41MTgyMiAxNi40OTY3IDcuNTE4MjJMMTIuNzk3NSA3LjE5MTA3QzEyLjE0NjMgNy4xOTEwNyAxMS42MTgzIDYuNjU3OTMgMTEuNjE4MyA2LjAwMDMyQzExLjYxODMgNS4zNDE2MSAxMi4xNDYzIDQuODA5NTcgMTIuNzk3NSA0LjgwOTU3WiIgZmlsbD0iIzRDM0Q4RiIvPgo8cGF0aCBpZD0iRmlsbCA0IiBkPSJNMC4zNzUzNCA0Ljg2OTg0QzAuNDMzMTU3IDQuODExNDYgMC42NDkxNTUgNC41NjQ3MSAwLjg1MjA2MSA0LjM1OTgzQzIuMDM1NjggMy4wNzY1NiA1LjEyNjE5IDAuOTc4MTUzIDYuNzQyOSAwLjMzNTk2NUM2Ljk4ODM1IDAuMjMzNTIzIDcuNjA5MDcgMC4wMTU0MjEzIDcuOTQxNzkgMEM4LjI1OTI0IDAgOC41NjI1MSAwLjA3MzgwMjEgOC44NTE2IDAuMjE5MjAzQzkuMjEyNjkgMC40MjI5ODUgOS41MDA2OCAwLjc0NDYzIDkuNjU5OTUgMS4xMjM1NUM5Ljc2MTQxIDEuMzg1NzIgOS45MjA2OCAyLjE3MzMxIDkuOTIwNjggMi4xODc2M0MxMC4wNzg5IDMuMDQ3OTIgMTAuMTY1IDQuNDQ2ODUgMTAuMTY1IDUuOTkzMzlDMTAuMTY1IDcuNDY1MDMgMTAuMDc4OSA4LjgwNjY4IDkuOTQ5MDQgOS42ODEyOUM5LjkzNDg2IDkuNjk2NzEgOS43NzU1OSAxMC42NzM4IDkuNjAyMTQgMTEuMDA4NkM5LjI4NDY5IDExLjYyMTEgOC42NjM5NyAxMiA3Ljk5OTYxIDEySDcuOTQxNzlDNy41MDg3MSAxMS45ODU3IDYuNTk4OSAxMS42MDU3IDYuNTk4OSAxMS41OTI0QzUuMDY4MzcgMTAuOTUwMiAyLjA1MDk2IDguOTUzMTkgMC44Mzc4NzkgNy42MjU4NUMwLjgzNzg3OSA3LjYyNTg1IDAuNDk1MzM4IDcuMjg0MzggMC4zNDY5NzYgNy4wNzE3OEMwLjExNTcwNiA2Ljc2NTU2IDcuMTUyNTZlLTA1IDYuMzg2NjMgNy4xNTI1NmUtMDUgNi4wMDc3MUM3LjE1MjU2ZS0wNSA1LjU4NDczIDAuMTI5ODg4IDUuMTkxNDggMC4zNzUzNCA0Ljg2OTg0WiIgZmlsbD0iIzRDM0Q4RiIvPgo8L2c+Cjwvc3ZnPgo=);
+                            width: 20px;
+                            height: 20px;
+                            display: inline-block;
+                            background-repeat: no-repeat;
+                            background-position: center;
+                        }
+                    }
+                }
+
+                li.page-item.previous-page-item {
+                    a {
+                        &::before {
+                            content: ' ';
+                            background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTgiIGhlaWdodD0iMTIiIHZpZXdCb3g9IjAgMCAxOCAxMiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGcgaWQ9IkFycm93IC0gTGVmdCI+CjxwYXRoIGlkPSJGaWxsIDEiIG9wYWNpdHk9IjAuNCIgZD0iTTUuMjAyNDggNC44MDk1N0wxLjUwMzI1IDQuNDgyNDJDMC42NzMwODMgNC40ODI0MiAwIDUuMTYyMDYgMCA2LjAwMDMyQzAgNi44Mzg1OCAwLjY3MzA4MyA3LjUxODIyIDEuNTAzMjUgNy41MTgyMkw1LjIwMjQ4IDcuMTkxMDdDNS44NTM3NSA3LjE5MTA3IDYuMzgxNzQgNi42NTc5MyA2LjM4MTc0IDYuMDAwMzJDNi4zODE3NCA1LjM0MTYxIDUuODUzNzUgNC44MDk1NyA1LjIwMjQ4IDQuODA5NTdaIiBmaWxsPSIjNEMzRDhGIi8+CjxwYXRoIGlkPSJGaWxsIDQiIGQ9Ik0xNy42MjQ3IDQuODY5ODRDMTcuNTY2OCA0LjgxMTQ2IDE3LjM1MDggNC41NjQ3MSAxNy4xNDc5IDQuMzU5ODNDMTUuOTY0MyAzLjA3NjU2IDEyLjg3MzggMC45NzgxNTMgMTEuMjU3MSAwLjMzNTk2NUMxMS4wMTE2IDAuMjMzNTIzIDEwLjM5MDkgMC4wMTU0MjEzIDEwLjA1ODIgMEM5Ljc0MDc2IDAgOS40Mzc0OSAwLjA3MzgwMjEgOS4xNDg0IDAuMjE5MjAzQzguNzg3MzEgMC40MjI5ODUgOC40OTkzMiAwLjc0NDYzIDguMzQwMDUgMS4xMjM1NUM4LjIzODU5IDEuMzg1NzIgOC4wNzkzMiAyLjE3MzMxIDguMDc5MzIgMi4xODc2M0M3LjkyMTE0IDMuMDQ3OTIgNy44MzQ5NiA0LjQ0Njg1IDcuODM0OTYgNS45OTMzOUM3LjgzNDk2IDcuNDY1MDMgNy45MjExNCA4LjgwNjY4IDguMDUwOTYgOS42ODEyOUM4LjA2NTE0IDkuNjk2NzEgOC4yMjQ0MSAxMC42NzM4IDguMzk3ODYgMTEuMDA4NkM4LjcxNTMxIDExLjYyMTEgOS4zMzYwMyAxMiAxMC4wMDA0IDEySDEwLjA1ODJDMTAuNDkxMyAxMS45ODU3IDExLjQwMTEgMTEuNjA1NyAxMS40MDExIDExLjU5MjRDMTIuOTMxNiAxMC45NTAyIDE1Ljk0OSA4Ljk1MzE5IDE3LjE2MjEgNy42MjU4NUMxNy4xNjIxIDcuNjI1ODUgMTcuNTA0NyA3LjI4NDM4IDE3LjY1MyA3LjA3MTc4QzE3Ljg4NDMgNi43NjU1NiAxNy45OTk5IDYuMzg2NjMgMTcuOTk5OSA2LjAwNzcxQzE3Ljk5OTkgNS41ODQ3MyAxNy44NzAxIDUuMTkxNDggMTcuNjI0NyA0Ljg2OTg0WiIgZmlsbD0iIzRDM0Q4RiIvPgo8L2c+Cjwvc3ZnPgo=);
+                            width: 20px;
+                            height: 20px;
+                            display: inline-block;
+                            background-repeat: no-repeat;
+                            background-position: center;
+                        }
+                    }
+                }
+
+                li.page-item {
+                    &.active {
+                        a {
+                            border-radius: 8px;
+                            background: var(--primary-100, #4C3D8F);
+                            color: #fff;
+                        }
+                    }
+
+                    &:hover {
+                        a {
+                            border-radius: 8px;
+                            background: var(--primary-100, #4C3D8F);
+                            color: #fff;
+                        }
+                    }
+
+                    a {
+                        color: var(--dark-100, #363636);
+                        /* Body/Bold */
+                        font-size: 16px;
+                        font-style: normal;
+                        font-weight: 700;
+                        line-height: 24px;
+                        /* 150% */
+                        display: flex;
+                        min-width: 50px;
+                        height: 50px;
+                        padding: 20px;
+                        justify-content: center;
+                        align-items: center;
+                        gap: 10px;
+                        border-radius: 8px;
+                        background: var(--secondary-20, #F4F5FE);
+                        border: none;
+                    }
+                }
+            }
+        }
+    }
+
+    .survey-page_submitted .invalid-question {
+        border: 2px solid red;
+        border-radius: 5px;
+        border-bottom: 2px solid red !important;
+    }
+
+    ng-select{
+        font-size: 20px !important;
+    }
+}

package/src/lib/components/question-boolean-template/question-boolean-template.component.html

@@ -0,0 +1,13 @@
+<div class="quastion" [attr.id]="'question_'+fCtrls.id.value"  [ngClass]="{'invalid-question': fCtrls.answer.invalid  , 'd-none':isShow != true}">
+    <h3 class="quastion-title ">
+        {{fCtrls.title.value}}
+    </h3>
+    <div class="radio-button-quastion">
+        <div class="form-check form-check-radio form-check-inline" 
+        *ngFor="let item of fCtrls.answerArray.controls ;let i = index">
+            <input class="form-check-input" type="radio" (change)="onChangeAnswer(item.value)" [disabled]="isDisabled"
+                name="{{elemId}}__radio-btn-option" id="{{elemId}}__radio-btn_{{i}}" [checked]="item.value.isSelected == true? true : null">
+            <label class="form-check-label" for="{{elemId}}__radio-btn_{{i}}">{{item.value.title}}</label>
+        </div>
+    </div>
+</div>

package/src/lib/components/question-boolean-template/question-boolean-template.component.spec.ts

@@ -0,0 +1,21 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { QuestionBooleanTemplateComponent } from './question-boolean-template.component';
+
+describe('QuestionBooleanTemplateComponent', () => {
+  let component: QuestionBooleanTemplateComponent;
+  let fixture: ComponentFixture<QuestionBooleanTemplateComponent>;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      declarations: [QuestionBooleanTemplateComponent]
+    });
+    fixture = TestBed.createComponent(QuestionBooleanTemplateComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

package/src/lib/components/question-boolean-template/question-boolean-template.component.ts

@@ -0,0 +1,109 @@
+import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
+import { Validators, FormControl } from '@angular/forms';
+import { SurveyQuestionDto } from '../../../shared/dtos/survey-question.dto';
+import { QuestionTypeEnum } from '../../../shared/enums/question-type.enum';
+import { QuestionRadioButtonTemplateFormInterface } from '../../../shared/form-interfaces/question-radio-button-template.form-interface';
+import { QuestionAnswerModel } from '../../../shared/models/question-answer.model';
+import { debounceTime, distinctUntilChanged, filter, map } from 'rxjs';
+import { AnswerChildOfQuestionBooleanTemplateFormInterface, QuestionBooleanTemplateFormInterface } from '../../../shared/form-interfaces/question-boolean-template.form-interface';
+import { FormBuilder, FormGroup } from '@ng-stack/forms';
+import { v4 as guidGenerator } from 'uuid';
+import { SurveyAnswerDto } from '../../../shared/dtos/survey-answer.dto';
+import { DefaultQuestionAnswerDto } from '../../../shared/dtos/default-question-answers.dto';
+import { SurveyLibService } from '../../services/survey-lib.service';
+
+@Component({
+  selector: 'lib-question-boolean-template',
+  templateUrl: './question-boolean-template.component.html',
+  styleUrls: ['./question-boolean-template.component.scss']
+})
+export class QuestionBooleanTemplateComponent implements OnInit {
+  elemId = guidGenerator() as string;
+  surveyQuestion: SurveyQuestionDto;
+  rForm: FormGroup<QuestionBooleanTemplateFormInterface>;
+
+  get fCtrls() {
+    return this.rForm.controls;
+  }
+
+  get questionTypeEnum() {
+    return QuestionTypeEnum;
+  }
+
+  @Output() emitter = new EventEmitter<QuestionAnswerModel>();
+
+  @Input() isShow: boolean = true;
+  @Input() isDisabled: boolean = false;
+
+  @Input() set setQuestion(value: SurveyQuestionDto) {
+    this.surveyQuestion = value;
+    this.rForm.patchValue({
+      id: value.questionId,
+      name: value.questionName,
+      title: value.questionTitle,
+      typeId: value.questionTypeId,
+      description: value.questionDescription
+    });
+
+    value.surveyAnswers.forEach(surveryAnswer => {
+      this.fCtrls.answerArray.push(this._formBuilder.group<AnswerChildOfQuestionBooleanTemplateFormInterface>({
+        id: [surveryAnswer.answerId],
+        title: [surveryAnswer.answerTitle],
+        isSelected: [false]
+      }))
+    })
+
+    if (value.isRequired == true) {
+      this.fCtrls.answer.addValidators([Validators.required]);
+      this.fCtrls.answer.updateValueAndValidity();
+    }
+
+    this.isShow = value.isVisable;
+    this.isDisabled = value.isReadOnly;
+  }
+
+  constructor(private _formBuilder: FormBuilder  , private _surveyLibService:SurveyLibService) {
+    this.rForm = this._formBuilder.group<QuestionBooleanTemplateFormInterface>({
+      id: [null],
+      name: [null],
+      title: [null],
+      typeId: [null],
+      description: [null],
+      answer: [null],
+      answerArray: this._formBuilder.array<AnswerChildOfQuestionBooleanTemplateFormInterface>([])
+    });
+  }
+
+  ngOnInit(): void {
+    this.fCtrls.answer.valueChanges.pipe().pipe(debounceTime(200)).subscribe(value => {
+      const formValue = this.rForm.value;
+      this.emitter.emit({
+        QuestionId: formValue.id,
+        IsValid: this.fCtrls.answer.valid,
+        Answer: value
+      })
+    });
+
+    this.fCtrls.answer.setValue(null);
+
+    this._surveyLibService.surveyAnswersObsrv
+    .pipe(map(x=> x.defaultAnswers.filter(x=>x.QuestionId == this.fCtrls.id.value)))
+    .pipe(filter(x=>x.length  > 0)).pipe(map(x=> x.at(0)))
+    .subscribe(answer=>{
+      this.fCtrls.answer.setValue(answer.AnswerId);
+
+      const groupIndex = this.fCtrls.answerArray.value.findIndex(x => x.id == answer.AnswerId);
+      if(groupIndex > -1){
+      this.fCtrls.answerArray.at(groupIndex).controls.isSelected.setValue(true);
+      }
+    })
+  }
+
+  onChangeAnswer(item: AnswerChildOfQuestionBooleanTemplateFormInterface) {
+    this.fCtrls.answer.setValue(item.id);
+  }
+
+  convertToFormControl(element: any) {
+    return element as FormControl;
+  }
+}

package/src/lib/components/question-check-box-template/question-check-box-template.component.html

@@ -0,0 +1,13 @@
+<div class="quastion" [attr.id]="'question_'+fCtrls.id.value"  [ngClass]="{'invalid-question': fCtrls.answer.invalid  , 'd-none':isShow != true}">
+    <h3 class="quastion-title ">
+        {{fCtrls.title.value}}
+    </h3>
+
+    <div class="checkbox-button-quastion">
+        <div class="form-check check-box-form-check"  *ngFor="let item of fCtrls.answerArray.controls ;let i = index">
+            <input type="checkbox" class="form-check-input" id="{{elemId}}__checkbox_{{i}}"  [disabled]="isDisabled"
+             (change)="onChangeAnswer(item.value ,$event)" [checked]="item.value.isSelected == true? true : null">
+            <label class="form-check-label  " for="{{elemId}}__checkbox_{{i}}">{{item.value.title}}</label>
+        </div>
+    </div>
+</div>

package/src/lib/components/question-check-box-template/question-check-box-template.component.spec.ts

@@ -0,0 +1,21 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { QuestionCheckBoxTemplateComponent } from './question-check-box-template.component';
+
+describe('QuestionCheckBoxTemplateComponent', () => {
+  let component: QuestionCheckBoxTemplateComponent;
+  let fixture: ComponentFixture<QuestionCheckBoxTemplateComponent>;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      declarations: [QuestionCheckBoxTemplateComponent]
+    });
+    fixture = TestBed.createComponent(QuestionCheckBoxTemplateComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});