mat-color-picker/mat-color-picker.metadata.json

<span class="badge-npmversion">[](https://badge.fury.io/js/mat-color-picker)</span> <span class="badge-npmdownloads"><a href="https://npmjs.org/package/mat-color-picker" title="View this project

{"__symbolic":"module","version":3,"metadata":{"MatColorPickerModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule"},"arguments":[{"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule"},{"__symbolic":"reference","module":"@angular/cdk/portal","name":"PortalModule"},{"__symbolic":"reference","module":"@angular/cdk/overlay","name":"OverlayModule"},{"__symbolic":"reference","module":"@angular/forms","name":"ReactiveFormsModule"},{"__symbolic":"reference","module":"@angular/material","name":"MatButtonModule"},{"__symbolic":"reference","module":"@angular/material","name":"MatFormFieldModule"},{"__symbolic":"reference","module":"@angular/material","name":"MatInputModule"}],"declarations":[{"__symbolic":"reference","name":"ɵa"},{"__symbolic":"reference","name":"ɵf"},{"__symbolic":"reference","name":"ɵg"},{"__symbolic":"reference","name":"ɵe"},{"__symbolic":"reference","name":"ɵd"},{"__symbolic":"reference","name":"ɵb"}],"exports":[{"__symbolic":"reference","name":"ɵa"},{"__symbolic":"reference","name":"ɵf"},{"__symbolic":"reference","name":"ɵe"},{"__symbolic":"reference","name":"ɵb"}],"providers":[{"__symbolic":"reference","name":"ɵc"}]}]}],"members":{}},"MatColorPickerItem":{"__symbolic":"interface"},"ɵa":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"mat-color-picker","template":"\n    <!-- color picker overlay -->\n    <ng-container *ngIf=\"overlay\">\n        <button type=\"button\" class=\"btn-picker\"\n                cdkOverlayOrigin\n                #trigger=\"cdkOverlayOrigin\"\n                [ngClass]=\"{ 'empty': selectedColor === 'none' }\"\n                [style.background]=\"selectedColor\"\n                (click)=\"toggle()\">\n            <div class=\"transparent\" *ngIf=\"selectedColor === 'none'\"></div>\n        </button>\n\n        <ng-template\n            cdkConnectedOverlay\n            hasBackdrop\n            cdkConnectedOverlayBackdropClass=\"mat-color-picker-backdrop\"\n            [cdkConnectedOverlayOrigin]=\"trigger\"\n            [cdkConnectedOverlayOpen]=\"isOpen\"\n            (backdropClick)=\"backdropClick()\">\n\n            <ng-template [cdkPortalOutlet]=\"overlayPanel\"></ng-template>\n\n        </ng-template>\n    </ng-container>\n\n    <!-- color picker flat -->\n    <ng-template *ngIf=\"!overlay\" [cdkPortalOutlet]=\"overlayPanel\"></ng-template>\n\n    <!-- color picker component content -->\n    <ng-template cdkPortal #overlayPanel=\"cdkPortal\">\n\n        <div class=\"mat-color-picker-overlay mat-elevation-z6\"\n             role=\"dialog\" aria-label=\"Color picker\">\n\n            <mat-color-picker-selector\n                [selectedColor]=\"tmpSelectedColor$ | async\"\n                (changeSelectedColor)=\"updateTmpSelectedColor($event)\">\n            </mat-color-picker-selector>\n\n            <mat-color-picker-collection *ngIf=\"!hideUsedColors\" [label]=\"usedColorLabel\"\n                                            [size]=\"usedSizeColors\"\n                                            [transparent]=\"true\"\n                                            [hideEmpty]=\"hideEmpty\"\n                                            [colors]=\"usedColors$ | async\"\n                                            (changeColor)=\"updateTmpSelectedColor($event)\">\n            </mat-color-picker-collection>\n\n            <ng-content></ng-content>\n\n            <div  *ngIf=\"!hideButtons\" class=\"mat-color-picker-actions\">\n\n                <button mat-button role=\"button\" aria-label=\"Cancel\" (click)=\"cancelSelection()\">\n                    {{ btnCancel }}\n                </button>\n\n                <button mat-button role=\"button\" aria-label=\"Confirm\" (click)=\"confirmSelectedColor()\">\n                    {{ btnConfirm }}\n                </button>\n\n            </div>\n\n        </div>\n\n    </ng-template>\n  ","styles":["\n    @import url(\"https://fonts.googleapis.com/css?family=Open+Sans:400,700\");\n    .btn-picker {\n      width: 25px;\n      height: 25px;\n      cursor: pointer;\n      background: none;\n      border: 2px solid #dddddd; }\n      .btn-picker.empty {\n        background: #ffffff !important; }\n\n    .mat-color-picker-overlay {\n      display: -webkit-box;\n      display: -ms-flexbox;\n      display: flex;\n      width: 260px;\n      min-height: 80px;\n      position: relative;\n      -webkit-box-orient: vertical;\n      -webkit-box-direction: normal;\n          -ms-flex-direction: column;\n              flex-direction: column;\n      padding: 0;\n      background: #ffffff;\n      font-family: 'Open Sans', sans-serif; }\n      .mat-color-picker-overlay .mat-color-picker-preview {\n        width: 100%;\n        height: 8px; }\n\n    .transparent {\n      width: 32px;\n      height: 2px;\n      border-bottom: 2px solid red;\n      transform: translateY(-3px) translateX(-2px) rotate(45deg);\n      -webkit-transform: translateY(-2px) translateX(-11px) rotate(45deg);\n      position: absolute; }\n\n    .mat-color-picker-actions {\n      display: -webkit-box;\n      display: -ms-flexbox;\n      display: flex;\n      padding: 4px;\n      border-top: 1px #dddddd solid; }\n      .mat-color-picker-actions button {\n        color: #100214;\n        text-transform: uppercase;\n        font-family: 'Open Sans', sans-serif;\n        font-size: 12px;\n        font-weight: 400;\n        -webkit-box-flex: 1;\n            -ms-flex-positive: 1;\n                flex-grow: 1; }\n  "],"preserveWhitespaces":false,"changeDetection":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectionStrategy"},"member":"OnPush"}}]}],"members":{"_collections":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChildren"},"arguments":[{"__symbolic":"reference","name":"ɵb"}]}]}],"usedColorLabel":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"usedColorStart":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"hideEmpty":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"},"arguments":["hideEmptyUsedColors"]}]}],"hideUsedColors":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"},"arguments":["hideUsedColors"]}]}],"selectedColor":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"isOpen":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"overlay":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"hideButtons":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"usedSizeColors":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"btnCancel":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"btnConfirm":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"change":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"selected":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"clickOut":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef"},{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectorRef"},{"__symbolic":"reference","name":"ɵc"}]}],"ngOnInit":[{"__symbolic":"method"}],"ngAfterContentInit":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}],"_updateSelectedColor":[{"__symbolic":"method"}],"toggle":[{"__symbolic":"method"}],"backdropClick":[{"__symbolic":"method"}],"updateTmpSelectedColor":[{"__symbolic":"method"}],"cancelSelection":[{"__symbolic":"method"}],"confirmSelectedColor":[{"__symbolic":"method"}]}},"ɵb":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"mat-color-picker-collection","template":"\n      <div class=\"color-picker-collection\" role=\"listbox\" aria-label=\"Select a color\">\n          <h3>{{ label }}</h3>\n\n          <button mat-mini-fab *ngIf=\"transparent\"\n                  class=\"color-picker-remove-color mat-elevation-z0\"\n                  role=\"option\" aria-label=\"transparent\"\n                  (click)=\"setTransparent()\">\n                  <div class=\"transparent\"></div>\n          </button>\n\n          <button *ngFor=\"let color of colors\" \n                  mat-mini-fab\n                  class=\"mat-elevation-z0\"\n                  role=\"option\"\n                  [disabled]=\"!color || color === 'none'\"\n                  [matColorPickerOption]=\"color\"\n                  (click)=\"setColor(color)\">\n          </button>\n      </div>\n    ","styles":["\n      .color-picker-collection {\n        min-height: 50px;\n        padding: 10px 18px; }\n        .color-picker-collection h3 {\n          color: #100214;\n          text-transform: uppercase;\n          font-family: \"Open Sans\", sans-serif;\n          font-size: 12px;\n          font-weight: 700;\n          margin: 0 0 10px 0; }\n\n      .color-picker-remove-color {\n        background-color: #ffffff;\n        border: 1px solid #E1E1E1; }\n        .color-picker-remove-color .transparent {\n          width: 20px;\n          height: 1px;\n          border-bottom: 1px solid red;\n          transform: translateY(-4px) translateX(0px) rotate(45deg);\n          -webkit-transform: translateY(-4px) translateX(0px) rotate(45deg); }\n\n      button {\n        width: 22px;\n        height: 22px;\n        cursor: pointer;\n        margin: 3px; }\n    "],"preserveWhitespaces":false,"changeDetection":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectionStrategy"},"member":"OnPush"}}]}],"members":{"hideEmpty":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"label":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"colors":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"size":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"transparent":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"changeColor":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectorRef"}]}],"ngAfterContentChecked":[{"__symbolic":"method"}],"_getCollectionDiffSize":[{"__symbolic":"method"}],"setTransparent":[{"__symbolic":"method"}],"setColor":[{"__symbolic":"method"}]}},"ɵc":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Injectable"}}],"members":{"addColor":[{"__symbolic":"method"}],"getColors":[{"__symbolic":"method"}]}},"ɵd":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive"},"arguments":[{"selector":"[matColorPickerOption], [mat-color-picker-option]","exportAs":"matColorPickerOption"}]}],"members":{"color":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"},"arguments":["matColorPickerOption"]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef"},{"__symbolic":"reference","module":"@angular/core","name":"Renderer2"}]}],"ngAfterViewInit":[{"__symbolic":"method"}]}},"ɵe":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive"},"arguments":[{"selector":"[mat-color-picker-origin], [matColorPickerOrigin]","exportAs":"matColorPickerOrigin","providers":[{"provide":{"__symbolic":"reference","module":"@angular/forms","name":"NG_VALUE_ACCESSOR"},"useExisting":{"__symbolic":"reference","name":"ɵe"},"multi":true}]}]}],"members":{"change":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef"},{"__symbolic":"reference","module":"@angular/core","name":"Renderer2"}]}],"writeValue":[{"__symbolic":"method"}],"writeValueFromColorPicker":[{"__symbolic":"method"}],"writeValueFromKeyup":[{"__symbolic":"method"}],"registerOnChange":[{"__symbolic":"method"}],"registerOnTouched":[{"__symbolic":"method"}],"setDisabledState":[{"__symbolic":"method"}]}},"ɵf":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive"},"arguments":[{"selector":"[mat-connected-color-picker], [matConnectedColorPicker]","exportAs":"matConnectedColorPicker"}]}],"members":{"origin":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"},"arguments":["matConnectedColorPickerOrigin"]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"ɵa"},{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectorRef"}]}],"ngAfterViewInit":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}],"_attachColorPicker":[{"__symbolic":"method"}]}},"ɵg":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"mat-color-picker-selector","template":"\n      <div class=\"color-picker-selector\">\n    \n          <div #block class=\"picker-selector\"></div>\n          <canvas #blockCanvas height=\"170\" width=\"230\" id=\"picker\"></canvas>\n          <div #blockPointer class=\"picker-position\" style=\"top: 0px;left: 220px;\"></div>\n    \n\n          <div #stripContainer class=\"colors-position\" style=\"background-position-y: 0px;\">\n              <canvas #strip height=\"160\" width=\"20\" id=\"colors\"></canvas>\n          </div>\n      </div>\n\n      <div class=\"color-picker-selector-preview\" [style.background]=\"selectedColor\">\n\n          <form [formGroup]=\"hexForm\">\n              <mat-form-field class=\"hex-input\" floatLabel=\"always\" [ngClass]=\"textClass\">\n                  <input matInput placeholder=\"HEX\" maxlength=\"7\"\n                         formControlName=\"hexCode\" [value]=\"selectedColor\"/>\n              </mat-form-field>\n          </form>\n\n          <form [formGroup]=\"rgbForm\">\n              <mat-form-field class=\"rgb-input\" floatLabel=\"always\" [ngClass]=\"textClass\">\n                  <input matInput type=\"number\" placeholder=\"RGB\" maxlength=\"3\" formControlName=\"R\"/>\n              </mat-form-field>\n              <mat-form-field class=\"rgb-input\" floatLabel=\"always\" [ngClass]=\"textClass\">\n                  <input matInput type=\"number\" maxlength=\"3\" formControlName=\"G\"/>\n              </mat-form-field>\n              <mat-form-field class=\"rgb-input\" floatLabel=\"always\" [ngClass]=\"textClass\">\n                  <input matInput type=\"number\" maxlength=\"3\" formControlName=\"B\"/>\n              </mat-form-field>\n          </form>\n\n      </div>\n    ","styles":["\n      canvas#colors {\n        margin: 5px; }\n\n      canvas:hover {\n        cursor: crosshair; }\n\n      .picker-selector {\n        position: absolute;\n        width: 230px;\n        height: 170px;\n        top: 0;\n        left: 0;\n        z-index: 10;\n        cursor: crosshair; }\n\n      .picker-position {\n        position: absolute;\n        width: 10px;\n        height: 10px;\n        z-index: 1;\n        border: 1px #ddd solid;\n        border-radius: 50%;\n        background: rgba(0, 0, 0, 0.3); }\n\n      .colors-position {\n        position: absolute;\n        width: 30px;\n        height: 160px;\n        top: 0px;\n        right: 0px;\n        z-index: 1;\n        background: url(\"data:image/gif;base64,R0lGODdhHgAIALMAAAAAADU1NTk5OUJCQkpKSlZWVltbW2pqaoCAgP///wAAAAAAAAAAAAAAAAAAAAAAACH5BAkAAAoALAAAAAAeAAgAAAQw0BhFq734yjJm/p8xFEVAeGCqGERACmahgkUrvPH81cFdnjoQy8VBBTOiguSokkQAADs=\") no-repeat; }\n\n      .color-picker-selector {\n        height: 170px; }\n\n      /deep/ mat-form-field {\n        font-family: \"Open Sans\";\n        font-size: 11px;\n        font-weight: bold; }\n        /deep/ mat-form-field.black {\n          color: #100214; }\n          /deep/ mat-form-field.black label {\n            color: #100214; }\n          /deep/ mat-form-field.black .mat-form-field-underline {\n            background-color: #100214; }\n        /deep/ mat-form-field.white {\n          color: #ffffff; }\n          /deep/ mat-form-field.white label {\n            color: #ffffff; }\n          /deep/ mat-form-field.white .mat-form-field-underline {\n            background-color: #ffffff; }\n\n      .color-picker-selector-preview {\n        height: 40px;\n        padding: 15px;\n        border-bottom: 1px #E1E1E1 solid; }\n        .color-picker-selector-preview form {\n          display: inline-block;\n          position: relative; }\n        .color-picker-selector-preview .hex-input {\n          width: 75px;\n          margin-right: 20px; }\n          .color-picker-selector-preview .hex-input input {\n            font-size: 16px;\n            font-weight: normal; }\n        .color-picker-selector-preview .rgb-input {\n          width: 40px;\n          margin-right: 5px; }\n          .color-picker-selector-preview .rgb-input input {\n            font-size: 16px;\n            font-weight: normal; }\n    "],"preserveWhitespaces":false,"changeDetection":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectionStrategy"},"member":"OnPush"}}]}],"members":{"_block":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild"},"arguments":["block"]}]}],"_bp":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild"},"arguments":["blockPointer"]}]}],"blockCursor":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild"},"arguments":["blockCanvas"]}]}],"_strip":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild"},"arguments":["strip"]}]}],"stripCursor":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild"},"arguments":["stripContainer"]}]}],"selectedColor":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"changeSelectedColor":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/forms","name":"FormBuilder"},{"__symbolic":"reference","module":"@angular/core","name":"Renderer2"}]}],"ngOnInit":[{"__symbolic":"method"}],"ngOnChanges":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}],"ngAfterViewInit":[{"__symbolic":"method"}],"_fillGradient":[{"__symbolic":"method"}],"_onChanges":[{"__symbolic":"method"}],"_getRGB":[{"__symbolic":"method"}],"_getHex":[{"__symbolic":"method"}],"_updateRGBA":[{"__symbolic":"method"}],"_updateRGB":[{"__symbolic":"method"}],"changeBaseColor":[{"__symbolic":"method"}],"changeColor":[{"__symbolic":"method"}],"updateValues":[{"__symbolic":"method"}]}}},"origins":{"MatColorPickerModule":"./color-picker.module","MatColorPickerItem":"./color-picker","ɵa":"./color-picker.component","ɵb":"./color-picker-collection.component","ɵc":"./color-picker.service","ɵd":"./color-picker.directives","ɵe":"./color-picker.directives","ɵf":"./color-picker.directives","ɵg":"./color-picker-selector.component"},"importAs":"mat-color-picker"}