New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More →
Socket
Sign inDemoInstall
Socket
Sign inDemoInstall

@metadot/ui-kit-fancy-checkbox

Package Overview
Dependencies
Maintainers
3
Versions
33
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@metadot/ui-kit-fancy-checkbox - npm Package Compare versions

Comparing version 0.0.21 to 0.0.24

2

bundles/metadot-ui-kit-fancy-checkbox.umd.js

@@ -48,3 +48,3 @@ (function (global, factory) {

template: "<div\n class=\"checkbox-container pointer\"\n (mouseleave)=\"clickedWithMouseInside = false\"\n (mousedown)=\"clickedWithMouseInside = true; $event.preventDefault()\"\n [class.clicked-with-mouse-inside]=\"clickedWithMouseInside\"\n [class.disabled]=\"isDisabled\"\n>\n <!-- icons when not checked -->\n <mc-icon [name]=\"'circle'\" class=\"circle\" *ngIf=\"!checked\"></mc-icon>\n\n <mc-icon [name]=\"'check'\" class=\"check text-primary\" *ngIf=\"!checked\"></mc-icon>\n\n <!-- check icon when checkbox is checked -->\n <mc-icon [name]=\"'check'\" class=\"checked text-success\" *ngIf=\"checked\"></mc-icon>\n\n <mc-icon [name]=\"'circle'\" class=\"circle-when-checked text-primary\" *ngIf=\"checked\"></mc-icon>\n</div>\n",
styles: [":host{display:inline-block}.checkbox-container{width:100%;position:relative}.checkbox-container mc-icon{vertical-align:middle}.disabled{cursor:not-allowed;opacity:.5}.checked{color:#28a745}.check,.circle-when-checked{color:#0056b3;display:none}.checkbox-container:hover .checked,.checkbox-container:hover .circle{display:none}.checkbox-container:hover .check,.checkbox-container:hover .circle-when-checked{display:inline-block}.clicked-with-mouse-inside:hover .checked,.clicked-with-mouse-inside:hover .circle{display:inline-block}.clicked-with-mouse-inside:hover .check,.clicked-with-mouse-inside:hover .circle-when-checked{display:none}.disabled:hover .checked,.disabled:hover .circle{display:inline-block}.disabled:hover .check,.disabled:hover .circle-when-checked{display:none}"]
styles: [":host{display:inline-block}.checkbox-container{width:100%;position:relative}.checkbox-container mc-icon{vertical-align:middle}.disabled{cursor:not-allowed;opacity:.5}.checked{color:#28a745}.check,.circle-when-checked{color:#0056b3;display:none}.checkbox-container:hover .checked,.checkbox-container:hover .circle{display:none}.checkbox-container:hover .check,.checkbox-container:hover .circle-when-checked,.clicked-with-mouse-inside:hover .checked,.clicked-with-mouse-inside:hover .circle{display:inline-block}.clicked-with-mouse-inside:hover .check,.clicked-with-mouse-inside:hover .circle-when-checked{display:none}.disabled:hover .checked,.disabled:hover .circle{display:inline-block}.disabled:hover .check,.disabled:hover .circle-when-checked{display:none}"]
},] }

@@ -51,0 +51,0 @@ ];

2

bundles/metadot-ui-kit-fancy-checkbox.umd.min.js

@@ -1,2 +0,2 @@

!function(e,c){"object"==typeof exports&&"undefined"!=typeof module?c(exports,require("@angular/core"),require("@angular/common"),require("@metadot/utils-explosion"),require("@metadot/ui-kit-icon")):"function"==typeof define&&define.amd?define("@metadot/ui-kit-fancy-checkbox",["exports","@angular/core","@angular/common","@metadot/utils-explosion","@metadot/ui-kit-icon"],c):c(((e="undefined"!=typeof globalThis?globalThis:e||self).metadot=e.metadot||{},e.metadot["ui-kit-fancy-checkbox"]={}),e.ng.core,e.ng.common,e.utilsExplosion,e.uiKitIcon)}(this,(function(e,c,i,n,o){"use strict";var t=function(){function e(e){this.el=e,this.sizeInPx=30}return Object.defineProperty(e.prototype,"width",{get:function(){return this.sizeInPx+"px"},enumerable:!1,configurable:!0}),Object.defineProperty(e.prototype,"height",{get:function(){return this.sizeInPx+"px"},enumerable:!1,configurable:!0}),e.prototype.onDoExplosionAnimation=function(){var e=this.el.nativeElement.getBoundingClientRect(),c=e.x,i=e.y,o=e.height,t=e.width;n.explode(c+t/2,i+o/2,o+50,t+50)},e}();t.decorators=[{type:c.Component,args:[{selector:"mc-fancy-checkbox",template:'<div\n class="checkbox-container pointer"\n (mouseleave)="clickedWithMouseInside = false"\n (mousedown)="clickedWithMouseInside = true; $event.preventDefault()"\n [class.clicked-with-mouse-inside]="clickedWithMouseInside"\n [class.disabled]="isDisabled"\n>\n \x3c!-- icons when not checked --\x3e\n <mc-icon [name]="\'circle\'" class="circle" *ngIf="!checked"></mc-icon>\n\n <mc-icon [name]="\'check\'" class="check text-primary" *ngIf="!checked"></mc-icon>\n\n \x3c!-- check icon when checkbox is checked --\x3e\n <mc-icon [name]="\'check\'" class="checked text-success" *ngIf="checked"></mc-icon>\n\n <mc-icon [name]="\'circle\'" class="circle-when-checked text-primary" *ngIf="checked"></mc-icon>\n</div>\n',styles:[":host{display:inline-block}.checkbox-container{width:100%;position:relative}.checkbox-container mc-icon{vertical-align:middle}.disabled{cursor:not-allowed;opacity:.5}.checked{color:#28a745}.check,.circle-when-checked{color:#0056b3;display:none}.checkbox-container:hover .checked,.checkbox-container:hover .circle{display:none}.checkbox-container:hover .check,.checkbox-container:hover .circle-when-checked{display:inline-block}.clicked-with-mouse-inside:hover .checked,.clicked-with-mouse-inside:hover .circle{display:inline-block}.clicked-with-mouse-inside:hover .check,.clicked-with-mouse-inside:hover .circle-when-checked{display:none}.disabled:hover .checked,.disabled:hover .circle{display:inline-block}.disabled:hover .check,.disabled:hover .circle-when-checked{display:none}"]}]}],t.ctorParameters=function(){return[{type:c.ElementRef}]},t.propDecorators={checked:[{type:c.Input}],isDisabled:[{type:c.Input}],sizeInPx:[{type:c.Input}],width:[{type:c.HostBinding,args:["style.width"]}],height:[{type:c.HostBinding,args:["style.height"]}]};var r={Circle:o.Circle,Check:o.Check},s=function(){};s.decorators=[{type:c.NgModule,args:[{imports:[i.CommonModule,o.McIconModule.pick(r)],declarations:[t],exports:[t]}]}],e.McFancyCheckboxComponent=t,e.McFancyCheckboxModule=s,Object.defineProperty(e,"__esModule",{value:!0})}));
!function(e,c){"object"==typeof exports&&"undefined"!=typeof module?c(exports,require("@angular/core"),require("@angular/common"),require("@metadot/utils-explosion"),require("@metadot/ui-kit-icon")):"function"==typeof define&&define.amd?define("@metadot/ui-kit-fancy-checkbox",["exports","@angular/core","@angular/common","@metadot/utils-explosion","@metadot/ui-kit-icon"],c):c(((e="undefined"!=typeof globalThis?globalThis:e||self).metadot=e.metadot||{},e.metadot["ui-kit-fancy-checkbox"]={}),e.ng.core,e.ng.common,e.utilsExplosion,e.uiKitIcon)}(this,(function(e,c,i,n,o){"use strict";var t=function(){function e(e){this.el=e,this.sizeInPx=30}return Object.defineProperty(e.prototype,"width",{get:function(){return this.sizeInPx+"px"},enumerable:!1,configurable:!0}),Object.defineProperty(e.prototype,"height",{get:function(){return this.sizeInPx+"px"},enumerable:!1,configurable:!0}),e.prototype.onDoExplosionAnimation=function(){var e=this.el.nativeElement.getBoundingClientRect(),c=e.x,i=e.y,o=e.height,t=e.width;n.explode(c+t/2,i+o/2,o+50,t+50)},e}();t.decorators=[{type:c.Component,args:[{selector:"mc-fancy-checkbox",template:'<div\n class="checkbox-container pointer"\n (mouseleave)="clickedWithMouseInside = false"\n (mousedown)="clickedWithMouseInside = true; $event.preventDefault()"\n [class.clicked-with-mouse-inside]="clickedWithMouseInside"\n [class.disabled]="isDisabled"\n>\n \x3c!-- icons when not checked --\x3e\n <mc-icon [name]="\'circle\'" class="circle" *ngIf="!checked"></mc-icon>\n\n <mc-icon [name]="\'check\'" class="check text-primary" *ngIf="!checked"></mc-icon>\n\n \x3c!-- check icon when checkbox is checked --\x3e\n <mc-icon [name]="\'check\'" class="checked text-success" *ngIf="checked"></mc-icon>\n\n <mc-icon [name]="\'circle\'" class="circle-when-checked text-primary" *ngIf="checked"></mc-icon>\n</div>\n',styles:[":host{display:inline-block}.checkbox-container{width:100%;position:relative}.checkbox-container mc-icon{vertical-align:middle}.disabled{cursor:not-allowed;opacity:.5}.checked{color:#28a745}.check,.circle-when-checked{color:#0056b3;display:none}.checkbox-container:hover .checked,.checkbox-container:hover .circle{display:none}.checkbox-container:hover .check,.checkbox-container:hover .circle-when-checked,.clicked-with-mouse-inside:hover .checked,.clicked-with-mouse-inside:hover .circle{display:inline-block}.clicked-with-mouse-inside:hover .check,.clicked-with-mouse-inside:hover .circle-when-checked{display:none}.disabled:hover .checked,.disabled:hover .circle{display:inline-block}.disabled:hover .check,.disabled:hover .circle-when-checked{display:none}"]}]}],t.ctorParameters=function(){return[{type:c.ElementRef}]},t.propDecorators={checked:[{type:c.Input}],isDisabled:[{type:c.Input}],sizeInPx:[{type:c.Input}],width:[{type:c.HostBinding,args:["style.width"]}],height:[{type:c.HostBinding,args:["style.height"]}]};var r={Circle:o.Circle,Check:o.Check},s=function(){};s.decorators=[{type:c.NgModule,args:[{imports:[i.CommonModule,o.McIconModule.pick(r)],declarations:[t],exports:[t]}]}],e.McFancyCheckboxComponent=t,e.McFancyCheckboxModule=s,Object.defineProperty(e,"__esModule",{value:!0})}));
//# sourceMappingURL=metadot-ui-kit-fancy-checkbox.umd.min.js.map

2

esm2015/lib/fancy-checkbox/fancy-checkbox.component.js

@@ -35,3 +35,3 @@ import { Component, ElementRef, HostBinding, Input } from '@angular/core';

template: "<div\n class=\"checkbox-container pointer\"\n (mouseleave)=\"clickedWithMouseInside = false\"\n (mousedown)=\"clickedWithMouseInside = true; $event.preventDefault()\"\n [class.clicked-with-mouse-inside]=\"clickedWithMouseInside\"\n [class.disabled]=\"isDisabled\"\n>\n <!-- icons when not checked -->\n <mc-icon [name]=\"'circle'\" class=\"circle\" *ngIf=\"!checked\"></mc-icon>\n\n <mc-icon [name]=\"'check'\" class=\"check text-primary\" *ngIf=\"!checked\"></mc-icon>\n\n <!-- check icon when checkbox is checked -->\n <mc-icon [name]=\"'check'\" class=\"checked text-success\" *ngIf=\"checked\"></mc-icon>\n\n <mc-icon [name]=\"'circle'\" class=\"circle-when-checked text-primary\" *ngIf=\"checked\"></mc-icon>\n</div>\n",
styles: [":host{display:inline-block}.checkbox-container{width:100%;position:relative}.checkbox-container mc-icon{vertical-align:middle}.disabled{cursor:not-allowed;opacity:.5}.checked{color:#28a745}.check,.circle-when-checked{color:#0056b3;display:none}.checkbox-container:hover .checked,.checkbox-container:hover .circle{display:none}.checkbox-container:hover .check,.checkbox-container:hover .circle-when-checked{display:inline-block}.clicked-with-mouse-inside:hover .checked,.clicked-with-mouse-inside:hover .circle{display:inline-block}.clicked-with-mouse-inside:hover .check,.clicked-with-mouse-inside:hover .circle-when-checked{display:none}.disabled:hover .checked,.disabled:hover .circle{display:inline-block}.disabled:hover .check,.disabled:hover .circle-when-checked{display:none}"]
styles: [":host{display:inline-block}.checkbox-container{width:100%;position:relative}.checkbox-container mc-icon{vertical-align:middle}.disabled{cursor:not-allowed;opacity:.5}.checked{color:#28a745}.check,.circle-when-checked{color:#0056b3;display:none}.checkbox-container:hover .checked,.checkbox-container:hover .circle{display:none}.checkbox-container:hover .check,.checkbox-container:hover .circle-when-checked,.clicked-with-mouse-inside:hover .checked,.clicked-with-mouse-inside:hover .circle{display:inline-block}.clicked-with-mouse-inside:hover .check,.clicked-with-mouse-inside:hover .circle-when-checked{display:none}.disabled:hover .checked,.disabled:hover .circle{display:inline-block}.disabled:hover .check,.disabled:hover .circle-when-checked{display:none}"]
},] }

@@ -38,0 +38,0 @@ ];

2

esm2015/lib/fancy-checkbox/fancy-checkbox.component.metadata.json

@@ -1,1 +0,1 @@

[{"__symbolic":"module","version":4,"metadata":{"McFancyCheckboxComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":3,"character":1},"arguments":[{"selector":"mc-fancy-checkbox","template":"<div\n class=\"checkbox-container pointer\"\n (mouseleave)=\"clickedWithMouseInside = false\"\n (mousedown)=\"clickedWithMouseInside = true; $event.preventDefault()\"\n [class.clicked-with-mouse-inside]=\"clickedWithMouseInside\"\n [class.disabled]=\"isDisabled\"\n>\n <!-- icons when not checked -->\n <mc-icon [name]=\"'circle'\" class=\"circle\" *ngIf=\"!checked\"></mc-icon>\n\n <mc-icon [name]=\"'check'\" class=\"check text-primary\" *ngIf=\"!checked\"></mc-icon>\n\n <!-- check icon when checkbox is checked -->\n <mc-icon [name]=\"'check'\" class=\"checked text-success\" *ngIf=\"checked\"></mc-icon>\n\n <mc-icon [name]=\"'circle'\" class=\"circle-when-checked text-primary\" *ngIf=\"checked\"></mc-icon>\n</div>\n","styles":[":host{display:inline-block}.checkbox-container{width:100%;position:relative}.checkbox-container mc-icon{vertical-align:middle}.disabled{cursor:not-allowed;opacity:.5}.checked{color:#28a745}.check,.circle-when-checked{color:#0056b3;display:none}.checkbox-container:hover .checked,.checkbox-container:hover .circle{display:none}.checkbox-container:hover .check,.checkbox-container:hover .circle-when-checked{display:inline-block}.clicked-with-mouse-inside:hover .checked,.clicked-with-mouse-inside:hover .circle{display:inline-block}.clicked-with-mouse-inside:hover .check,.clicked-with-mouse-inside:hover .circle-when-checked{display:none}.disabled:hover .checked,.disabled:hover .circle{display:inline-block}.disabled:hover .check,.disabled:hover .circle-when-checked{display:none}"]}]}],"members":{"checked":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":12,"character":3}}]}],"isDisabled":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":17,"character":3}}]}],"sizeInPx":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":24,"character":3}}]}],"width":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding","line":29,"character":3},"arguments":["style.width"]}]}],"height":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding","line":33,"character":3},"arguments":["style.height"]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef","line":37,"character":26}]}],"onDoExplosionAnimation":[{"__symbolic":"method"}]}}}}]
[{"__symbolic":"module","version":4,"metadata":{"McFancyCheckboxComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":3,"character":1},"arguments":[{"selector":"mc-fancy-checkbox","template":"<div\n class=\"checkbox-container pointer\"\n (mouseleave)=\"clickedWithMouseInside = false\"\n (mousedown)=\"clickedWithMouseInside = true; $event.preventDefault()\"\n [class.clicked-with-mouse-inside]=\"clickedWithMouseInside\"\n [class.disabled]=\"isDisabled\"\n>\n <!-- icons when not checked -->\n <mc-icon [name]=\"'circle'\" class=\"circle\" *ngIf=\"!checked\"></mc-icon>\n\n <mc-icon [name]=\"'check'\" class=\"check text-primary\" *ngIf=\"!checked\"></mc-icon>\n\n <!-- check icon when checkbox is checked -->\n <mc-icon [name]=\"'check'\" class=\"checked text-success\" *ngIf=\"checked\"></mc-icon>\n\n <mc-icon [name]=\"'circle'\" class=\"circle-when-checked text-primary\" *ngIf=\"checked\"></mc-icon>\n</div>\n","styles":[":host{display:inline-block}.checkbox-container{width:100%;position:relative}.checkbox-container mc-icon{vertical-align:middle}.disabled{cursor:not-allowed;opacity:.5}.checked{color:#28a745}.check,.circle-when-checked{color:#0056b3;display:none}.checkbox-container:hover .checked,.checkbox-container:hover .circle{display:none}.checkbox-container:hover .check,.checkbox-container:hover .circle-when-checked,.clicked-with-mouse-inside:hover .checked,.clicked-with-mouse-inside:hover .circle{display:inline-block}.clicked-with-mouse-inside:hover .check,.clicked-with-mouse-inside:hover .circle-when-checked{display:none}.disabled:hover .checked,.disabled:hover .circle{display:inline-block}.disabled:hover .check,.disabled:hover .circle-when-checked{display:none}"]}]}],"members":{"checked":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":12,"character":3}}]}],"isDisabled":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":17,"character":3}}]}],"sizeInPx":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":24,"character":3}}]}],"width":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding","line":29,"character":3},"arguments":["style.width"]}]}],"height":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding","line":33,"character":3},"arguments":["style.height"]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef","line":37,"character":26}]}],"onDoExplosionAnimation":[{"__symbolic":"method"}]}}}}]

2

fesm2015/metadot-ui-kit-fancy-checkbox.js

@@ -38,3 +38,3 @@ import { Component, ElementRef, Input, HostBinding, NgModule } from '@angular/core';

template: "<div\n class=\"checkbox-container pointer\"\n (mouseleave)=\"clickedWithMouseInside = false\"\n (mousedown)=\"clickedWithMouseInside = true; $event.preventDefault()\"\n [class.clicked-with-mouse-inside]=\"clickedWithMouseInside\"\n [class.disabled]=\"isDisabled\"\n>\n <!-- icons when not checked -->\n <mc-icon [name]=\"'circle'\" class=\"circle\" *ngIf=\"!checked\"></mc-icon>\n\n <mc-icon [name]=\"'check'\" class=\"check text-primary\" *ngIf=\"!checked\"></mc-icon>\n\n <!-- check icon when checkbox is checked -->\n <mc-icon [name]=\"'check'\" class=\"checked text-success\" *ngIf=\"checked\"></mc-icon>\n\n <mc-icon [name]=\"'circle'\" class=\"circle-when-checked text-primary\" *ngIf=\"checked\"></mc-icon>\n</div>\n",
styles: [":host{display:inline-block}.checkbox-container{width:100%;position:relative}.checkbox-container mc-icon{vertical-align:middle}.disabled{cursor:not-allowed;opacity:.5}.checked{color:#28a745}.check,.circle-when-checked{color:#0056b3;display:none}.checkbox-container:hover .checked,.checkbox-container:hover .circle{display:none}.checkbox-container:hover .check,.checkbox-container:hover .circle-when-checked{display:inline-block}.clicked-with-mouse-inside:hover .checked,.clicked-with-mouse-inside:hover .circle{display:inline-block}.clicked-with-mouse-inside:hover .check,.clicked-with-mouse-inside:hover .circle-when-checked{display:none}.disabled:hover .checked,.disabled:hover .circle{display:inline-block}.disabled:hover .check,.disabled:hover .circle-when-checked{display:none}"]
styles: [":host{display:inline-block}.checkbox-container{width:100%;position:relative}.checkbox-container mc-icon{vertical-align:middle}.disabled{cursor:not-allowed;opacity:.5}.checked{color:#28a745}.check,.circle-when-checked{color:#0056b3;display:none}.checkbox-container:hover .checked,.checkbox-container:hover .circle{display:none}.checkbox-container:hover .check,.checkbox-container:hover .circle-when-checked,.clicked-with-mouse-inside:hover .checked,.clicked-with-mouse-inside:hover .circle{display:inline-block}.clicked-with-mouse-inside:hover .check,.clicked-with-mouse-inside:hover .circle-when-checked{display:none}.disabled:hover .checked,.disabled:hover .circle{display:inline-block}.disabled:hover .check,.disabled:hover .circle-when-checked{display:none}"]
},] }

@@ -41,0 +41,0 @@ ];

2

metadot-ui-kit-fancy-checkbox.metadata.json

@@ -1,1 +0,1 @@

{"__symbolic":"module","version":4,"metadata":{"McFancyCheckboxComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":3,"character":1},"arguments":[{"selector":"mc-fancy-checkbox","template":"<div\n class=\"checkbox-container pointer\"\n (mouseleave)=\"clickedWithMouseInside = false\"\n (mousedown)=\"clickedWithMouseInside = true; $event.preventDefault()\"\n [class.clicked-with-mouse-inside]=\"clickedWithMouseInside\"\n [class.disabled]=\"isDisabled\"\n>\n <!-- icons when not checked -->\n <mc-icon [name]=\"'circle'\" class=\"circle\" *ngIf=\"!checked\"></mc-icon>\n\n <mc-icon [name]=\"'check'\" class=\"check text-primary\" *ngIf=\"!checked\"></mc-icon>\n\n <!-- check icon when checkbox is checked -->\n <mc-icon [name]=\"'check'\" class=\"checked text-success\" *ngIf=\"checked\"></mc-icon>\n\n <mc-icon [name]=\"'circle'\" class=\"circle-when-checked text-primary\" *ngIf=\"checked\"></mc-icon>\n</div>\n","styles":[":host{display:inline-block}.checkbox-container{width:100%;position:relative}.checkbox-container mc-icon{vertical-align:middle}.disabled{cursor:not-allowed;opacity:.5}.checked{color:#28a745}.check,.circle-when-checked{color:#0056b3;display:none}.checkbox-container:hover .checked,.checkbox-container:hover .circle{display:none}.checkbox-container:hover .check,.checkbox-container:hover .circle-when-checked{display:inline-block}.clicked-with-mouse-inside:hover .checked,.clicked-with-mouse-inside:hover .circle{display:inline-block}.clicked-with-mouse-inside:hover .check,.clicked-with-mouse-inside:hover .circle-when-checked{display:none}.disabled:hover .checked,.disabled:hover .circle{display:inline-block}.disabled:hover .check,.disabled:hover .circle-when-checked{display:none}"]}]}],"members":{"checked":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":12,"character":3}}]}],"isDisabled":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":17,"character":3}}]}],"sizeInPx":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":24,"character":3}}]}],"width":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding","line":29,"character":3},"arguments":["style.width"]}]}],"height":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding","line":33,"character":3},"arguments":["style.height"]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef","line":37,"character":26}]}],"onDoExplosionAnimation":[{"__symbolic":"method"}]}},"McFancyCheckboxModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":8,"character":1},"arguments":[{"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":9,"character":12},{"__symbolic":"call","expression":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@metadot/ui-kit-icon","name":"McIconModule","line":9,"character":26},"member":"pick"},"arguments":[{"Circle":{"__symbolic":"reference","module":"@metadot/ui-kit-icon","name":"Circle","line":5,"character":14},"Check":{"__symbolic":"reference","module":"@metadot/ui-kit-icon","name":"Check","line":5,"character":14}}]}],"declarations":[{"__symbolic":"reference","name":"McFancyCheckboxComponent"}],"exports":[{"__symbolic":"reference","name":"McFancyCheckboxComponent"}]}]}],"members":{}}},"origins":{"McFancyCheckboxComponent":"./lib/fancy-checkbox/fancy-checkbox.component","McFancyCheckboxModule":"./lib/fancy-checkbox.module"},"importAs":"@metadot/ui-kit-fancy-checkbox"}
{"__symbolic":"module","version":4,"metadata":{"McFancyCheckboxComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":3,"character":1},"arguments":[{"selector":"mc-fancy-checkbox","template":"<div\n class=\"checkbox-container pointer\"\n (mouseleave)=\"clickedWithMouseInside = false\"\n (mousedown)=\"clickedWithMouseInside = true; $event.preventDefault()\"\n [class.clicked-with-mouse-inside]=\"clickedWithMouseInside\"\n [class.disabled]=\"isDisabled\"\n>\n <!-- icons when not checked -->\n <mc-icon [name]=\"'circle'\" class=\"circle\" *ngIf=\"!checked\"></mc-icon>\n\n <mc-icon [name]=\"'check'\" class=\"check text-primary\" *ngIf=\"!checked\"></mc-icon>\n\n <!-- check icon when checkbox is checked -->\n <mc-icon [name]=\"'check'\" class=\"checked text-success\" *ngIf=\"checked\"></mc-icon>\n\n <mc-icon [name]=\"'circle'\" class=\"circle-when-checked text-primary\" *ngIf=\"checked\"></mc-icon>\n</div>\n","styles":[":host{display:inline-block}.checkbox-container{width:100%;position:relative}.checkbox-container mc-icon{vertical-align:middle}.disabled{cursor:not-allowed;opacity:.5}.checked{color:#28a745}.check,.circle-when-checked{color:#0056b3;display:none}.checkbox-container:hover .checked,.checkbox-container:hover .circle{display:none}.checkbox-container:hover .check,.checkbox-container:hover .circle-when-checked,.clicked-with-mouse-inside:hover .checked,.clicked-with-mouse-inside:hover .circle{display:inline-block}.clicked-with-mouse-inside:hover .check,.clicked-with-mouse-inside:hover .circle-when-checked{display:none}.disabled:hover .checked,.disabled:hover .circle{display:inline-block}.disabled:hover .check,.disabled:hover .circle-when-checked{display:none}"]}]}],"members":{"checked":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":12,"character":3}}]}],"isDisabled":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":17,"character":3}}]}],"sizeInPx":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":24,"character":3}}]}],"width":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding","line":29,"character":3},"arguments":["style.width"]}]}],"height":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding","line":33,"character":3},"arguments":["style.height"]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef","line":37,"character":26}]}],"onDoExplosionAnimation":[{"__symbolic":"method"}]}},"McFancyCheckboxModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":8,"character":1},"arguments":[{"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":9,"character":12},{"__symbolic":"call","expression":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@metadot/ui-kit-icon","name":"McIconModule","line":9,"character":26},"member":"pick"},"arguments":[{"Circle":{"__symbolic":"reference","module":"@metadot/ui-kit-icon","name":"Circle","line":5,"character":14},"Check":{"__symbolic":"reference","module":"@metadot/ui-kit-icon","name":"Check","line":5,"character":14}}]}],"declarations":[{"__symbolic":"reference","name":"McFancyCheckboxComponent"}],"exports":[{"__symbolic":"reference","name":"McFancyCheckboxComponent"}]}]}],"members":{}}},"origins":{"McFancyCheckboxComponent":"./lib/fancy-checkbox/fancy-checkbox.component","McFancyCheckboxModule":"./lib/fancy-checkbox.module"},"importAs":"@metadot/ui-kit-fancy-checkbox"}

8

package.json
{
"name": "@metadot/ui-kit-fancy-checkbox",
"version": "0.0.21",
"version": "0.0.24",
"peerDependencies": {

@@ -8,6 +8,6 @@ "@angular/common": "^11.0.5",

"@angular/platform-browser": "^11.0.0",
"@metadot/ui-kit-icon": "0.0.21",
"@metadot/ui-kit-icon": "0.0.24",
"rxjs": "~6.5.5",
"@metadot/utils-keyboard": "0.0.24",
"@metadot/utils-explosion": "0.0.22"
"@metadot/utils-keyboard": "0.0.27",
"@metadot/utils-explosion": "0.0.25"
},

@@ -14,0 +14,0 @@ "dependencies": {

bundles/metadot-ui-kit-fancy-checkbox.umd.min.js.map

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc