import { Component, Input, Output, EventEmitter, ContentChild, ViewChild } from '@angular/core';
import { Subscription } from 'rxjs';
import { ColorPickItemDirective } from './color-picklist-item.directive';
import * as i0 from "@angular/core";
import * as i1 from "../pick/pick.directive";
import * as i2 from "../icon/icon.component";
import * as i3 from "../popover/popover.component";
import * as i4 from "@angular/common";
import * as i5 from "../pick/pick-option.directive";
export class ColorPicklistComponent {
    constructor(pick, renderer) {
        this.pick = pick;
        this.renderer = renderer;
        this.isDisabled = false;
        this.isForInlineTableCSS = false;
        this.open = false;
        this.popOverPosition = 'bottomLeft';
        this.nubbinPosition = 'top-right';
        // ==============================================
        this.openChange = new EventEmitter();
        this.selectedElem = new EventEmitter();
        this.subscriptions = new Subscription();
    }
    ngOnChanges(changes) {
        if (changes.closeClickOutside && changes.closeClickOutside.currentValue) {
            this.subscriptions.add(this.renderer.listen('document', 'click', (evt) => {
                if (this.button && this.colorsPopover &&
                    evt.target !== this.button.nativeElement && evt.target !== this.colorsPopover.nativeElement) {
                    this.open = false;
                }
            }));
        }
    }
    ngAfterContentInit() {
        this.subscriptions.add(this.pick.unoPickChange.subscribe(() => this.openChange.emit(false)));
    }
    ngOnDestroy() {
        this.subscriptions.unsubscribe();
    }
    isOptionActive(item) {
        return this.pick.selected.color === item.color;
    }
}
ColorPicklistComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ColorPicklistComponent, deps: [{ token: i1.PickDirective }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
ColorPicklistComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: ColorPicklistComponent, selector: "uno-color-picklist[unoPick]", inputs: { data: "data", isDisabled: "isDisabled", isForInlineTableCSS: "isForInlineTableCSS", open: "open", closeClickOutside: "closeClickOutside", popOverPosition: "popOverPosition", nubbinPosition: "nubbinPosition" }, outputs: { openChange: "openChange", selectedElem: "selectedElem" }, queries: [{ propertyName: "itemTemplate", first: true, predicate: ColorPickItemDirective, descendants: true }], viewQueries: [{ propertyName: "button", first: true, predicate: ["button"], descendants: true }, { propertyName: "colorsPopover", first: true, predicate: ["divColors"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<!-- picklist HTML is a <span unoDropdown /> markup, with specific TS behaviors - like multiple selection, items list online filtering, etc. -->\r\n<span\r\n    class=\"slds-picklist--fluid\"\r\n    (openChange)=\"openChange.emit($event)\"\r\n    uno-popover-trigger\r\n    [unoPopover]=\"colorsContent\"\r\n    [unoPopoverOpen]=\"open\"\r\n    unoPopoverSize=\"medium\"\r\n    [unoPopoverPlacement]=\"popOverPosition\"\r\n    [unoPopoverNubbin]=\"nubbinPosition\"\r\n    (click)=\"open = !open\">\r\n\r\n    <button\r\n        #button\r\n        type=\"button\"\r\n        class=\"slds-uno-picklist--label\"\r\n        style=\"padding: 0 10px\"\r\n        [class.slds-input]=\"!isForInlineTableCSS\"\r\n        [class.slds-button]=\"isForInlineTableCSS\"\r\n        [disabled]=\"isDisabled\">\r\n            <ng-content></ng-content>\r\n            <uno-icon icon=\"down_s\" size=\"xx-small\" class=\"slds-m-left_small slds-float--right\"></uno-icon>\r\n    </button>\r\n</span>\r\n\r\n<ng-template #colorsContent>\r\n    <div class=\"slds-grid slds-wrap slds-p-around--small\" #divColors>\r\n        <!-- Cycle of all [colors] elements: -->\r\n        <div class=\"slds-size--1-of-7 slds-p-around--x-small\" *ngFor=\"let item of data; let i = index;\"\r\n            uno-pick-option\r\n            [unoPickOption]=\"item\">\r\n            <span class=\"span-color-picker\" [class.slds-is-active]=\"isOptionActive(item)\" (click)=\"selectedElem.emit(item);\" [style.background-color]=\"item.color\"></span>\r\n        </div>\r\n    </div>\r\n</ng-template>", styles: [".slds-is-active{box-shadow:0 0 0 4px #e0e3ea}.slds-picklist--fluid button.slds-uno-picklist--label{text-align:left;display:flex}.span-color-picker{width:27px;height:27px;border-radius:50%;display:inline-block;cursor:pointer}\n"], components: [{ type: i2.IconComponent, selector: "uno-icon", inputs: ["svgType", "icon", "withOpacity", "color", "size", "customColor"] }], directives: [{ type: i3.PopoverTriggerDirective, selector: "[uno-popover-trigger]", inputs: ["unoPopover", "unoPopoverHeader", "unoPopoverFooter", "unoPopoverTemplate", "unoPopoverTemplateData", "hasEdit", "hasDelete", "infoTitle", "infoCreatedBy", "infoModifiedBy", "infoDate", "unoPopoverPlacement", "unoPopoverTheme", "unoPopoverNubbin", "unoPopoverSize", "unoPopoverTooltip", "unoPopoverDelay", "unoPopoverInteractive", "unoPopoverOpen"], outputs: ["unoPopoverToggled", "unoPopoverTemplateEvent"], exportAs: ["unoPopoverTrigger"] }, { type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i5.PickOptionDirective, selector: "[uno-pick-option]", inputs: ["unoPickOption", "unoPickActiveClass"], exportAs: ["unoPickOption"] }] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ColorPicklistComponent, decorators: [{
            type: Component,
            args: [{ selector: 'uno-color-picklist[unoPick]', template: "<!-- picklist HTML is a <span unoDropdown /> markup, with specific TS behaviors - like multiple selection, items list online filtering, etc. -->\r\n<span\r\n    class=\"slds-picklist--fluid\"\r\n    (openChange)=\"openChange.emit($event)\"\r\n    uno-popover-trigger\r\n    [unoPopover]=\"colorsContent\"\r\n    [unoPopoverOpen]=\"open\"\r\n    unoPopoverSize=\"medium\"\r\n    [unoPopoverPlacement]=\"popOverPosition\"\r\n    [unoPopoverNubbin]=\"nubbinPosition\"\r\n    (click)=\"open = !open\">\r\n\r\n    <button\r\n        #button\r\n        type=\"button\"\r\n        class=\"slds-uno-picklist--label\"\r\n        style=\"padding: 0 10px\"\r\n        [class.slds-input]=\"!isForInlineTableCSS\"\r\n        [class.slds-button]=\"isForInlineTableCSS\"\r\n        [disabled]=\"isDisabled\">\r\n            <ng-content></ng-content>\r\n            <uno-icon icon=\"down_s\" size=\"xx-small\" class=\"slds-m-left_small slds-float--right\"></uno-icon>\r\n    </button>\r\n</span>\r\n\r\n<ng-template #colorsContent>\r\n    <div class=\"slds-grid slds-wrap slds-p-around--small\" #divColors>\r\n        <!-- Cycle of all [colors] elements: -->\r\n        <div class=\"slds-size--1-of-7 slds-p-around--x-small\" *ngFor=\"let item of data; let i = index;\"\r\n            uno-pick-option\r\n            [unoPickOption]=\"item\">\r\n            <span class=\"span-color-picker\" [class.slds-is-active]=\"isOptionActive(item)\" (click)=\"selectedElem.emit(item);\" [style.background-color]=\"item.color\"></span>\r\n        </div>\r\n    </div>\r\n</ng-template>", styles: [".slds-is-active{box-shadow:0 0 0 4px #e0e3ea}.slds-picklist--fluid button.slds-uno-picklist--label{text-align:left;display:flex}.span-color-picker{width:27px;height:27px;border-radius:50%;display:inline-block;cursor:pointer}\n"] }]
        }], ctorParameters: function () { return [{ type: i1.PickDirective }, { type: i0.Renderer2 }]; }, propDecorators: { data: [{
                type: Input
            }], isDisabled: [{
                type: Input
            }], isForInlineTableCSS: [{
                type: Input
            }], open: [{
                type: Input
            }], closeClickOutside: [{
                type: Input
            }], popOverPosition: [{
                type: Input
            }], nubbinPosition: [{
                type: Input
            }], openChange: [{
                type: Output
            }], selectedElem: [{
                type: Output
            }], itemTemplate: [{
                type: ContentChild,
                args: [ColorPickItemDirective]
            }], button: [{
                type: ViewChild,
                args: ['button']
            }], colorsPopover: [{
                type: ViewChild,
                args: ['divColors']
            }] } });
//# sourceMappingURL=data:application/json;base64, 