@sunbird-cb/consumption 0.0.99 → 0.0.100

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.
@@ -20747,6 +20747,8 @@
20747
20747
  this.result = [];
20748
20748
  this.searchTerm = '';
20749
20749
  this.expand = true;
20750
+ this.disableLeft = true;
20751
+ this.disableRight = false;
20750
20752
  this.tabClicked = new core.EventEmitter();
20751
20753
  }
20752
20754
  /**
@@ -20914,11 +20916,39 @@
20914
20916
  function () {
20915
20917
  this.expand = !this.expand;
20916
20918
  };
20919
+ /**
20920
+ * @return {?}
20921
+ */
20922
+ MdoLeaderboardComponent.prototype.scrollToRight = /**
20923
+ * @return {?}
20924
+ */
20925
+ function () {
20926
+ this.scrollableContent.nativeElement.scrollBy({
20927
+ left: 200,
20928
+ behavior: 'smooth'
20929
+ });
20930
+ this.disableLeft = false;
20931
+ this.disableRight = true;
20932
+ };
20933
+ /**
20934
+ * @return {?}
20935
+ */
20936
+ MdoLeaderboardComponent.prototype.scrollToLeft = /**
20937
+ * @return {?}
20938
+ */
20939
+ function () {
20940
+ this.scrollableContent.nativeElement.scrollBy({
20941
+ left: -200,
20942
+ behavior: 'smooth'
20943
+ });
20944
+ this.disableLeft = true;
20945
+ this.disableRight = false;
20946
+ };
20917
20947
  MdoLeaderboardComponent.decorators = [
20918
20948
  { type: core.Component, args: [{
20919
20949
  selector: 'sb-uic-mdo-leaderboard',
20920
- template: "<div class=\"mdo-leaderboard-container\">\n <div class=\"flex l-title gap-2 items-center justify-between px-4 md:px-0 py-4 md:py-0\">\n <div class=\"flex gap-2\">\n {{object?.title}} <div><img [src]=\"object?.infoIcon\" alt=\"\" i18n-matTooltip [matTooltip]=\"object?.infoText\"></div>\n </div>\n <div class=\"block md:hidden\">\n <mat-icon (click)=\"toggleWeekHightlits()\">expand_more</mat-icon>\n </div>\n </div>\n <div class=\"flex item-center justify-center\" *ngIf=\"expand\">\n <div class=\"flex fl-div\">\n <div class=\"pointer\">\n <span class=\"dot-dot\"></span>\n </div>\n </div>\n </div>\n <div class=\"l-content\" *ngIf=\"expand\">\n <div class=\"horizontal-scroll-container\">\n <div class=\"scroll-content\">\n <span class=\"tab-title\" [ngClass]=\"{'active' : currentTab === 'XL' }\" (click)=\"getTabData('XL')\">Greater than 50K</span>\n <span class=\"tab-title\" [ngClass]=\"{'active' : currentTab === 'L' }\" (click)=\"getTabData('L')\">10K-50K</span>\n <span class=\"tab-title\" [ngClass]=\"{'active' : currentTab === 'M' }\" (click)=\"getTabData('M')\">1K-10K</span>\n <span class=\"tab-title\" [ngClass]=\"{'active' : currentTab === 'S' }\" (click)=\"getTabData('S')\">500-1K</span>\n <span class=\"tab-title\" [ngClass]=\"{'active' : currentTab === 'XS' }\" (click)=\"getTabData('XS')\">Less than 500</span>\n </div>\n </div>\n <div class=\"relative search-wrapper margin-top-m mb-5\">\n <mat-icon matPrefix class=\"flex absolute items-center justify-center mr-2 icon-search\">search\n </mat-icon>\n <input type=\"search\" name=\"searchKey\" class=\"search-field\" i18-aria-label\n aria-label=\"Search\" i18n-placeholder=\"search\" [(ngModel)]=\"searchTerm\"\n placeholder=\"Search your MDO\" (keyup)=\"handleSearchQuery($event)\" />\n </div>\n <div class=\"l-tab-data\">\n <div *ngFor=\"let user of filteredData; let i = index\">\n <div class=\"flex flex-row item mb-{{filteredData.length - 1 === i ? 0 : 5}} gap-3 {{user.row_num === 1 ? 'relative' : ''}}\" >\n <div><img class=\"crown absolute\" src=\"assets/images/national-learning/rank-crown.svg\" *ngIf=\"user.row_num === 1\"/></div>\n <div class=\"{{getRank(user.row_num)}}\">{{user.row_num}}</div>\n <div class=\"w-full\">\n <div class=\"flex flex-between gap-2\">\n <div>\n <div class=\"rank-name\">{{user.org_name}}</div>\n <div class=\"rank-points flex mt-1 gap-1\">\n <img class=\"nlw-kb\" src=\"assets/icons/home/karma-badge.svg\"/>\n <div class=\"points\">{{user.total_points || 0 }} points</div>\n </div>\n </div>\n <div class=\"rank-crown\" *ngIf=\"[1,2,3].includes(user.row_num)\">\n <img class=\"nlw-animation\" [src]=\"getMedal(user.row_num)\"/>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div class=\"no-data px-1\" *ngIf=\"filteredData?.length === 0\">\n No data found!\n </div>\n </div>\n </div>\n</div>\n",
20921
- styles: [".l-title{font-family:Montserrat;font-size:20px;font-weight:600;line-height:24.38px;text-align:left}.l-content{background-color:#e9eef6;border-radius:16px;padding:16px}.horizontal-scroll-container{overflow-x:auto;white-space:nowrap;-ms-overflow-style:none;scrollbar-width:none;height:32px}.horizontal-scroll-container::-webkit-scrollbar{display:none}.scroll-content{display:inline-block}.tab-title{font-family:Lato;font-size:14px;line-height:16.8px;text-align:left;cursor:pointer;padding:0 15px 8px;border-bottom:2px solid #c3c3c3}.active{font-weight:700;border-bottom:2px solid #1b4ca1}.search-field{height:34px;padding:0 16px 0 40px;border-radius:52px;background:#fff;border:2px solid rgba(0,0,0,.0784313725);width:100%}.icon-search{top:10px;left:15px;height:15px;width:17px}.item{border-radius:12px;background-color:#fff;padding:16px;align-items:flex-start}.rank1{background:#ffca28;font-family:Lato;font-size:14px;font-weight:700;line-height:9px;text-align:center;border-radius:50%;padding:10px}.rank2{background:#1b4ca1;font-family:Lato;font-size:14px;font-weight:700;line-height:9px;text-align:center;border-radius:50%;padding:10px;color:#fff}.rank3{background:#ff8228;font-family:Lato;font-size:14px;font-weight:700;line-height:9px;text-align:center;border-radius:50%;padding:10px}.rank0{font-family:Lato;font-size:14px;font-weight:700;line-height:9px;text-align:center;border-radius:50%;padding:10px;border:1px solid #c3c3c3}.rank-name{font-family:Montserrat;line-height:1.5em;font-size:16px;font-weight:600;text-align:left;align-items:center;display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis;-webkit-line-clamp:2;line-clamp:2}.rank-points{align-items:center}.nlw-kb{height:24px;width:24px}.points{font-family:Lato;font-size:14px;font-weight:600;line-height:16.8px;text-align:right}.crown{left:10px;top:0;width:36px;height:36px}.l-tab-data{height:520px;overflow:auto;padding-bottom:16px}.l-tab-data::-webkit-scrollbar{display:none}.pointer{margin-bottom:-59px;border-radius:41px;background:#c3c3c3;border:35px solid #e9eef6}.dot-dot{width:7px;display:flex;height:7px;background:#c3c3c3;margin-top:-25px;border-radius:10px}@media screen and (min-width:320px) and (max-width:769px){.mdo-leaderboard-container{background-color:#d1dbec}}"]
20950
+ template: "<div class=\"mdo-leaderboard-container\">\n <div class=\"flex l-title gap-2 items-center justify-between px-4 md:px-0 py-4 md:py-0\">\n <div class=\"flex gap-2\">\n {{object?.title}} <div><img [src]=\"object?.infoIcon\" alt=\"\" i18n-matTooltip [matTooltip]=\"object?.infoText\"></div>\n </div>\n <div class=\"block md:hidden\">\n <mat-icon (click)=\"toggleWeekHightlits()\">expand_more</mat-icon>\n </div>\n </div>\n <div class=\"flex item-center justify-center\" *ngIf=\"expand\">\n <div class=\"flex fl-div\">\n <div class=\"pointer\">\n <span class=\"dot-dot\"></span>\n </div>\n </div>\n </div>\n <div class=\"l-content\" *ngIf=\"expand\">\n <div class=\"horizontal-scroll-container\">\n <div class=\"flex gap-1\">\n <mat-icon class=\"material-icons left-icon cursor-pointer {{disableLeft ? 'disableArrow': ''}}\" (click)=\"scrollToLeft()\" >chevron_left</mat-icon>\n <div #scrollableContent class=\"scroll-content\">\n <span class=\"tab-title\" [ngClass]=\"{'active' : currentTab === 'XL' }\" (click)=\"getTabData('XL')\">> 50K</span>\n <span class=\"tab-title\" [ngClass]=\"{'active' : currentTab === 'L' }\" (click)=\"getTabData('L')\">10K-50K</span>\n <span class=\"tab-title\" [ngClass]=\"{'active' : currentTab === 'M' }\" (click)=\"getTabData('M')\">1K-10K</span>\n <span class=\"tab-title\" [ngClass]=\"{'active' : currentTab === 'S' }\" (click)=\"getTabData('S')\">500-1K</span>\n <span class=\"tab-title\" [ngClass]=\"{'active' : currentTab === 'XS' }\" (click)=\"getTabData('XS')\">< 500</span>\n </div>\n <mat-icon class=\"material-icons icon-right cursor-pointer {{disableRight ? 'disableArrow': ''}}\" (click)=\"scrollToRight()\">chevron_right</mat-icon>\n </div>\n </div>\n <div class=\"relative search-wrapper margin-top-m mb-5\">\n <mat-icon matPrefix class=\"flex absolute items-center justify-center mr-2 icon-search\">search\n </mat-icon>\n <input type=\"search\" name=\"searchKey\" class=\"search-field\" i18-aria-label\n aria-label=\"Search\" i18n-placeholder=\"search\" [(ngModel)]=\"searchTerm\"\n placeholder=\"Search your MDO\" (keyup)=\"handleSearchQuery($event)\" />\n </div>\n <div class=\"l-tab-data\">\n <div *ngFor=\"let user of filteredData; let i = index\">\n <div class=\"flex flex-row item mb-{{filteredData.length - 1 === i ? 0 : 5}} gap-3 {{user.row_num === 1 ? 'relative' : ''}}\" >\n <div><img class=\"crown absolute\" src=\"assets/images/national-learning/rank-crown.svg\" *ngIf=\"user.row_num === 1\"/></div>\n <div class=\"{{getRank(user.row_num)}}\">{{user.row_num}}</div>\n <div class=\"w-full\">\n <div class=\"flex flex-between gap-2\">\n <div>\n <div class=\"rank-name\">{{user.org_name}}</div>\n <div class=\"rank-points flex mt-1 gap-1\">\n <img class=\"nlw-kb\" src=\"assets/icons/home/karma-badge.svg\"/>\n <div class=\"points\">{{user.total_points || 0 }} points</div>\n </div>\n </div>\n <div class=\"rank-crown\" *ngIf=\"[1,2,3].includes(user.row_num)\">\n <img class=\"nlw-animation\" [src]=\"getMedal(user.row_num)\"/>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div class=\"no-data px-1\" *ngIf=\"filteredData?.length === 0\">\n No data found!\n </div>\n </div>\n </div>\n</div>\n",
20951
+ styles: [".l-title{font-family:Montserrat;font-size:20px;font-weight:600;line-height:24.38px;text-align:left}.l-content{background-color:#e9eef6;border-radius:16px;padding:16px}.horizontal-scroll-container::-webkit-scrollbar{display:none}.scroll-content{display:inline-block;overflow:hidden;white-space:nowrap;-ms-overflow-style:none;scrollbar-width:none;height:32px}.tab-title{font-family:Lato;font-size:14px;line-height:16.8px;text-align:left;cursor:pointer;padding:0 15px 8px;border-bottom:2px solid #c3c3c3}.active{font-weight:700;border-bottom:2px solid #1b4ca1}.search-field{height:34px;padding:0 16px 0 40px;border-radius:52px;background:#fff;border:2px solid rgba(0,0,0,.0784313725);width:100%}.icon-search{top:10px;left:15px;height:15px;width:17px}.item{border-radius:12px;background-color:#fff;padding:16px;align-items:flex-start}.rank1{background:#ffca28;font-family:Lato;font-size:14px;font-weight:700;line-height:9px;text-align:center;border-radius:50%;padding:10px}.rank2{background:#1b4ca1;font-family:Lato;font-size:14px;font-weight:700;line-height:9px;text-align:center;border-radius:50%;padding:10px;color:#fff}.rank3{background:#ff8228;font-family:Lato;font-size:14px;font-weight:700;line-height:9px;text-align:center;border-radius:50%;padding:10px}.rank0{font-family:Lato;font-size:14px;font-weight:700;line-height:9px;text-align:center;border-radius:50%;padding:10px;border:1px solid #c3c3c3}.rank-name{font-family:Montserrat;line-height:1.5em;font-size:16px;font-weight:600;text-align:left;align-items:center;display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis;-webkit-line-clamp:2;line-clamp:2}.rank-points{align-items:center}.nlw-kb{height:24px;width:24px}.points{font-family:Lato;font-size:14px;font-weight:600;line-height:16.8px;text-align:right}.crown{left:10px;top:0;width:36px;height:36px}.l-tab-data{height:520px;overflow:auto;padding-bottom:16px}.l-tab-data::-webkit-scrollbar{display:none}.pointer{margin-bottom:-59px;border-radius:41px;background:#c3c3c3;border:35px solid #e9eef6}.dot-dot{width:7px;display:flex;height:7px;background:#c3c3c3;margin-top:-25px;border-radius:10px}.disableArrow{cursor:default;opacity:.4}@media screen and (min-width:320px) and (max-width:769px){.mdo-leaderboard-container{background-color:#d1dbec}}"]
20922
20952
  }] }
20923
20953
  ];
20924
20954
  /** @nocollapse */
@@ -20927,7 +20957,8 @@
20927
20957
  ]; };
20928
20958
  MdoLeaderboardComponent.propDecorators = {
20929
20959
  object: [{ type: core.Input }],
20930
- tabClicked: [{ type: core.Output }]
20960
+ tabClicked: [{ type: core.Output }],
20961
+ scrollableContent: [{ type: core.ViewChild, args: ['scrollableContent', { static: false },] }]
20931
20962
  };
20932
20963
  return MdoLeaderboardComponent;
20933
20964
  }());
@@ -20943,9 +20974,15 @@
20943
20974
  /** @type {?} */
20944
20975
  MdoLeaderboardComponent.prototype.expand;
20945
20976
  /** @type {?} */
20977
+ MdoLeaderboardComponent.prototype.disableLeft;
20978
+ /** @type {?} */
20979
+ MdoLeaderboardComponent.prototype.disableRight;
20980
+ /** @type {?} */
20946
20981
  MdoLeaderboardComponent.prototype.object;
20947
20982
  /** @type {?} */
20948
20983
  MdoLeaderboardComponent.prototype.tabClicked;
20984
+ /** @type {?} */
20985
+ MdoLeaderboardComponent.prototype.scrollableContent;
20949
20986
  /**
20950
20987
  * @type {?}
20951
20988
  * @private