@seniorsistemas/angular-components 14.9.0 → 14.9.1

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.
@@ -6035,9 +6035,9 @@
6035
6035
  this.fallback = false;
6036
6036
  this.id = "s-thumbnail-" + ThumbnailComponent_1.nextId++;
6037
6037
  this.size = exports.ThumbnailSize.Medium;
6038
- this.iconClass = "fa fa-picture-o";
6038
+ this.iconClass = "far fa-image";
6039
6039
  this.hasAction = false;
6040
- this.actionIconClass = "fa fa-camera";
6040
+ this.actionIconClass = "fas fa-camera";
6041
6041
  this.isTile = false;
6042
6042
  this.isBrand = false;
6043
6043
  this.ngUnsubscribe = new rxjs.Subject();
@@ -6097,8 +6097,8 @@
6097
6097
  ThumbnailComponent = ThumbnailComponent_1 = __decorate([
6098
6098
  core.Component({
6099
6099
  selector: "s-thumbnail",
6100
- template: "<div [id]=\"id\" class=\"thumbnail-container thumbnail-container--{{size}}\" [ngClass]=\"{'thumbnail-container--with-action': hasAction, 'thumbnail-container--brand': isBrand}\">\n <div [id]=\"id + '-image-container'\" *ngIf=\"imageSource || imageFallback\" class=\"image-container\" [ngClass]=\"{'image-container--rounded': !isBrand}\">\n <img #img [id]=\"id + '-image'\" (error)=\"fallback = true\" [src]=\"imageSource\"\n [alt]=\"imageAlt\" *ngIf=\"!fallback\" [ngClass]=\"{\n 'smallThumbnail': isTile,\n 'exif-orientation-2': orientation == 2,\n 'exif-orientation-3': orientation == 3,\n 'exif-orientation-4': orientation == 4,\n 'exif-orientation-5': orientation == 5,\n 'exif-orientation-6': orientation == 6,\n 'exif-orientation-7': orientation == 7,\n 'exif-orientation-8': orientation == 8\n }\"/>\n\n <img #img [id]=\"id + '-image-fallback'\" (error)=\"imageFallback = undefined\" [src]=\"imageFallback\"\n [alt]=\"imageAlt\" *ngIf=\"fallback && imageFallback\" [ngClass]=\"{\n 'smallThumbnail': isTile,\n 'exif-orientation-2': orientation == 2,\n 'exif-orientation-3': orientation == 3,\n 'exif-orientation-4': orientation == 4,\n 'exif-orientation-5': orientation == 5,\n 'exif-orientation-6': orientation == 6,\n 'exif-orientation-7': orientation == 7,\n 'exif-orientation-8': orientation == 8\n }\"/>\n\n <i *ngIf=\"fallback && !imageFallback\" ngClass=\"fa fa-picture-o fa-lg\" class=\"fallback-img-color\"></i>\n </div>\n <div [id]=\"id + '-action-icon-container'\" *ngIf=\"hasAction\" class=\"action-icon-container action-icon-container--{{size}}\">\n <span [id]=\"id + '-action-icon'\" [class]=\"actionIconClass\" aria-hidden=\"true\"></span>\n </div>\n <div [id]=\"id + '-icon-container'\" *ngIf=\"!imageSource && !imageFallback\" class=\"icon-container icon-container--{{size}}\" [ngClass]=\"{'image-container--rounded': !isBrand}\">\n <span [id]=\"id + '-icon'\" [class]=\"iconClass\" aria-hidden=\"true\"></span>\n </div>\n\n <ng-content></ng-content>\n</div>\n",
6101
- styles: [":host{display:inline-block}.thumbnail-container{color:#fff;position:relative;text-align:center}.thumbnail-container--large{height:100px;width:100px;font-size:50px}.thumbnail-container--large.thumbnail-container--brand{width:200px}.thumbnail-container--medium{height:70px;width:70px;font-size:40px}.thumbnail-container--medium.thumbnail-container--brand{width:140px}.thumbnail-container--small{height:40px;width:40px;font-size:22px}.thumbnail-container--small.thumbnail-container--brand{width:80px}.thumbnail-container--with-action{cursor:pointer}.action-icon-container{background-color:#428bca;border-radius:50%;bottom:0;position:absolute;right:0}.action-icon-container--large,.action-icon-container--medium{font-size:10pt;height:25px;padding:3px;width:25px}.action-icon-container--small{font-size:6pt;height:16px;padding:2px;width:16px}.icon-container,.image-container{-ms-flex-align:center;align-items:center;height:100%;overflow:hidden;width:100%}.icon-container--rounded,.image-container--rounded{border-radius:50%}.smallThumbnail{height:40px!important}.icon-container{background-color:#ccc;color:#fff}.icon-container--large{line-height:98px}.icon-container--medium{line-height:68px}.icon-container--small{line-height:38px}.image-container{background-color:#fff}.image-container img{width:100%;margin:auto}.image-container img.exif-orientation-2{transform:rotateY(180deg)}.image-container img.exif-orientation-3{transform:rotate(180deg)}.image-container img.exif-orientation-4{transform:rotate(180deg) rotateY(180deg)}.image-container img.exif-orientation-5{transform:rotate(270deg) rotateY(180deg)}.image-container img.exif-orientation-6{transform:rotate(90deg)}.image-container img.exif-orientation-7{transform:rotate(90deg) rotateY(180deg)}.image-container img.exif-orientation-8{transform:rotate(270deg)}.fallback-img-color{color:#428bca;padding-top:10px}"]
6100
+ template: "<div [id]=\"id\" class=\"thumbnail-container thumbnail-container--{{size}}\" [ngClass]=\"{'thumbnail-container--with-action': hasAction, 'thumbnail-container--brand': isBrand}\">\n <div [id]=\"id + '-image-container'\" *ngIf=\"imageSource || imageFallback\" class=\"image-container\" [ngClass]=\"{'image-container--rounded': !isBrand}\">\n <img #img [id]=\"id + '-image'\" (error)=\"fallback = true\" [src]=\"imageSource\"\n [alt]=\"imageAlt\" *ngIf=\"!fallback\" [ngClass]=\"{\n 'smallThumbnail': isTile,\n 'exif-orientation-2': orientation == 2,\n 'exif-orientation-3': orientation == 3,\n 'exif-orientation-4': orientation == 4,\n 'exif-orientation-5': orientation == 5,\n 'exif-orientation-6': orientation == 6,\n 'exif-orientation-7': orientation == 7,\n 'exif-orientation-8': orientation == 8\n }\"/>\n\n <img #img [id]=\"id + '-image-fallback'\" (error)=\"imageFallback = undefined\" [src]=\"imageFallback\"\n [alt]=\"imageAlt\" *ngIf=\"fallback && imageFallback\" [ngClass]=\"{\n 'smallThumbnail': isTile,\n 'exif-orientation-2': orientation == 2,\n 'exif-orientation-3': orientation == 3,\n 'exif-orientation-4': orientation == 4,\n 'exif-orientation-5': orientation == 5,\n 'exif-orientation-6': orientation == 6,\n 'exif-orientation-7': orientation == 7,\n 'exif-orientation-8': orientation == 8\n }\"/>\n\n <i *ngIf=\"fallback && !imageFallback\" ngClass=\"far fa-image\" class=\"fallback-img-color\"></i>\n </div>\n <div [id]=\"id + '-action-icon-container'\" *ngIf=\"hasAction\" class=\"action-icon-container action-icon-container--{{size}}\">\n <span [id]=\"id + '-action-icon'\" [class]=\"actionIconClass\" aria-hidden=\"true\"></span>\n </div>\n <div [id]=\"id + '-icon-container'\" *ngIf=\"!imageSource && !imageFallback\" class=\"icon-container icon-container--{{size}}\" [ngClass]=\"{'image-container--rounded': !isBrand}\">\n <span [id]=\"id + '-icon'\" [class]=\"iconClass\" aria-hidden=\"true\"></span>\n </div>\n\n <ng-content></ng-content>\n</div>\n",
6101
+ styles: [":host{display:inline-block}.thumbnail-container{color:#fff;position:relative;text-align:center}.thumbnail-container--large{font-size:50px;height:100px;width:100px}.thumbnail-container--large.thumbnail-container--brand{width:200px}.thumbnail-container--medium{font-size:40px;height:70px;width:70px}.thumbnail-container--medium.thumbnail-container--brand{width:140px}.thumbnail-container--small{font-size:22px;height:40px;width:40px}.thumbnail-container--small.thumbnail-container--brand{width:80px}.thumbnail-container--with-action{cursor:pointer}.action-icon-container{background-color:#428bca;border-radius:50%;bottom:0;position:absolute;right:0}.action-icon-container--large,.action-icon-container--medium{font-size:10pt;height:25px;padding:3px;width:25px}.action-icon-container--small{font-size:6pt;height:16px;padding:2px;width:16px}.icon-container,.image-container{-ms-flex-align:center;align-items:center;height:100%;overflow:hidden;width:100%}.icon-container--rounded,.image-container--rounded{border-radius:50%}.smallThumbnail{height:40px!important}.icon-container{background-color:#ccc;color:#fff}.icon-container--large{line-height:98px}.icon-container--medium{line-height:68px}.icon-container--small{line-height:38px}.image-container{-ms-flex-align:center;align-items:center;background-color:#ccc;display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center}.image-container img{width:100%}.image-container img.exif-orientation-2{transform:rotateY(180deg)}.image-container img.exif-orientation-3{transform:rotate(180deg)}.image-container img.exif-orientation-4{transform:rotate(180deg) rotateY(180deg)}.image-container img.exif-orientation-5{transform:rotate(270deg) rotateY(180deg)}.image-container img.exif-orientation-6{transform:rotate(90deg)}.image-container img.exif-orientation-7{transform:rotate(90deg) rotateY(180deg)}.image-container img.exif-orientation-8{transform:rotate(270deg)}.fallback-img-color{color:#fff}"]
6102
6102
  })
6103
6103
  ], ThumbnailComponent);
6104
6104
  return ThumbnailComponent;