@seniorsistemas/angular-components 16.10.6 → 16.10.8

package/bundles/seniorsistemas-angular-components.umd.js

@@ -235,8 +235,15 @@
         BadgeColors["Gray"] = "gray";
     })(exports.BadgeColors || (exports.BadgeColors = {}));
 
+    var BadgeTypes;
+    (function (BadgeTypes) {
+        BadgeTypes["Pill"] = "pill";
+        BadgeTypes["Chip"] = "chip";
+    })(BadgeTypes || (BadgeTypes = {}));
+
     var BadgeComponent = /** @class */ (function () {
         function BadgeComponent() {
+            this.type = BadgeTypes.Pill;
             this.color = exports.BadgeColors.Blue;
             this.selectable = false;
             this.iconPosition = "left";
@@ -245,9 +252,15 @@
         BadgeComponent.prototype.onClick = function () {
             this.selected.emit(this.text);
         };
+        __decorate([
+            core.Input()
+        ], BadgeComponent.prototype, "type", void 0);
         __decorate([
             core.Input()
         ], BadgeComponent.prototype, "color", void 0);
+        __decorate([
+            core.Input()
+        ], BadgeComponent.prototype, "title", void 0);
         __decorate([
             core.Input()
         ], BadgeComponent.prototype, "text", void 0);
@@ -269,8 +282,8 @@
         BadgeComponent = __decorate([
             core.Component({
                 selector: "s-badge",
-                template: "<span\n   class=\"badge\"\n   [ngClass]=\"{ \n      'badge--red': color == 'red',\n      'badge--orange': color == 'orange',\n      'badge--yellow': color == 'yellow',\n      'badge--blue': color == 'blue',\n      'badge--green': color == 'green',\n      'badge--gray': color == 'gray',\n      'badge--selectable': selectable\n   }\">\n   <span\n      *ngIf=\"iconClass\"\n      [class]=\"'badge-icon ' + iconClass\"\n      [ngClass]=\"{\n         'badge-icon--left': iconPosition == 'left' && text,\n         'badge-icon--right': iconPosition == 'right' && text\n      }\">\n   </span>\n   <p class=\"badge-text\">{{ text }}</p>\n</span>",
-                styles: [".badge{-ms-flex-align:center;align-items:center;border-radius:12px;display:-ms-inline-flexbox;display:inline-flex;height:1.25rem;-ms-flex-pack:center;justify-content:center;min-width:20px;padding:0 .5rem}.badge .badge-text{color:#333;font-family:\"Open Sans\",sans-serif;font-size:.75rem;font-weight:400;line-height:150%}.badge .badge-icon{color:#333;font-size:10px}.badge .badge-icon--left{margin-right:8px}.badge .badge-icon--right{margin-left:8px;-ms-flex-order:2;order:2}.badge--red{background-color:#fcd2d2;border:1px solid #c13018}.badge--orange{background-color:#fce3ba;border:1px solid #f8931f}.badge--yellow{background-color:#fef4e3;border:1px solid #fcbf10}.badge--blue{background-color:#d5e8ec;border:1px solid #428bca}.badge--green{background-color:#e6ffb3;border:1px solid #0c9348}.badge--gray{background-color:#e5eaea;border:1px solid #697882}.badge--selectable{cursor:pointer;-webkit-user-select:none;-ms-user-select:none;user-select:none}"]
+                template: "<span\n   class=\"badge\"\n   [ngClass]=\"{\n      'badge--pill': type === 'pill',\n      'badge--chip': type === 'chip', \n      'badge--red': color === 'red',\n      'badge--orange': color === 'orange',\n      'badge--yellow': color === 'yellow',\n      'badge--blue': color === 'blue',\n      'badge--green': color === 'green',\n      'badge--gray': color === 'gray',\n      'badge--selectable': selectable\n   }\">\n   <span\n      *ngIf=\"iconClass\"\n      [class]=\"'badge-icon ' + iconClass\"\n      [ngClass]=\"{\n         'badge-icon--left': iconPosition === 'left' && text,\n         'badge-icon--right': iconPosition === 'right' && text\n      }\">\n   </span>\n   <span *ngIf=\"title\" class=\"badge-title\">{{ title }}:</span>\n   <span class=\"badge-text\">{{ text }}</span>\n</span>",
+                styles: [".badge{-ms-flex-align:center;align-items:center;display:-ms-inline-flexbox;display:inline-flex;height:1.25rem;-ms-flex-pack:center;justify-content:center;min-width:20px;padding:0 .5rem}.badge--chip{border-radius:4px}.badge--pill{border-radius:12px}.badge .badge-title{color:#212533;font-family:\"Open Sans\",sans-serif;font-size:12px;font-weight:700;line-height:150%;margin-right:.125rem}.badge .badge-text{color:#212533;font-family:\"Open Sans\",sans-serif;font-size:.75rem;font-weight:400;line-height:150%}.badge .badge-icon{color:#212533;font-size:10px}.badge .badge-icon--left{margin-right:8px}.badge .badge-icon--right{margin-left:8px;-ms-flex-order:2;order:2}.badge--red{background-color:#fcd2d2;border:1px solid #c13018}.badge--orange{background-color:#fce3ba;border:1px solid #f8931f}.badge--yellow{background-color:#fef4e3;border:1px solid #fcbf10}.badge--blue{background-color:#d5e8ec;border:1px solid #428bca}.badge--green{background-color:#e6ffb3;border:1px solid #0c9348}.badge--gray{background-color:#e5eaea;border:1px solid #697882}.badge--selectable{cursor:pointer;-webkit-user-select:none;-ms-user-select:none;user-select:none}"]
             })
         ], BadgeComponent);
         return BadgeComponent;
@@ -12698,6 +12711,7 @@
     exports.TooltipModule = TooltipModule;
     exports.WorkspaceSwitchComponent = WorkspaceSwitchComponent;
     exports.WorkspaceSwitchModule = WorkspaceSwitchModule;
+    exports.countries = countries;
     exports.fallback = fallback;
     exports.ɵa = CountryPhonePickerService;
     exports.ɵb = LocalizedCurrencyImpurePipe;