import { __decorate, __extends, __metadata } from "tslib";
import { Component, Prop } from 'vue-property-decorator';
import BaseComponent from '../BaseComponent';
import { Grid } from '../../utilities/grid';
import { classNamesFunction } from '@uifabric-vue/utilities';
import { ColorPickerGridCell } from './ColorPickerGridCell';
var getClassNames = classNamesFunction();
var SwatchColorPickerBase = /** @class */ (function (_super) {
    __extends(SwatchColorPickerBase, _super);
    function SwatchColorPickerBase() {
        return _super !== null && _super.apply(this, arguments) || this;
    }
    Object.defineProperty(SwatchColorPickerBase.prototype, "classNames", {
        get: function () {
            var _a = this, theme = _a.theme, styles = _a.styles, className = _a.className, cellMargin = _a.cellMargin;
            return getClassNames(styles, {
                theme: theme,
                className: className,
                cellMargin: cellMargin,
            });
        },
        enumerable: false,
        configurable: true
    });
    SwatchColorPickerBase.prototype.render = function (h) {
        var _a = this, colorCells = _a.colorCells, columnCount = _a.columnCount, cellShape = _a.cellShape, cellWidth = _a.cellWidth, cellHeight = _a.cellHeight;
        return h(Grid, {
            attrs: {
                items: colorCells,
                columnCount: columnCount,
            },
            scopedSlots: {
                default: function (_a) {
                    var item = _a.cell;
                    return h(ColorPickerGridCell, {
                        attrs: {
                            color: item.color,
                            circle: cellShape === 'circle',
                            width: cellWidth,
                            height: cellHeight,
                        },
                    });
                },
            },
        });
    };
    __decorate([
        Prop({ default: 10 }),
        __metadata("design:type", Number)
    ], SwatchColorPickerBase.prototype, "cellMargin", void 0);
    __decorate([
        Prop({ type: Array, default: function () { return []; } }),
        __metadata("design:type", Array)
    ], SwatchColorPickerBase.prototype, "colorCells", void 0);
    __decorate([
        Prop({ type: Number }),
        __metadata("design:type", Number)
    ], SwatchColorPickerBase.prototype, "columnCount", void 0);
    __decorate([
        Prop({ type: String, default: 'circle' }),
        __metadata("design:type", String)
    ], SwatchColorPickerBase.prototype, "cellShape", void 0);
    __decorate([
        Prop({ type: Number }),
        __metadata("design:type", Number)
    ], SwatchColorPickerBase.prototype, "cellHeight", void 0);
    __decorate([
        Prop({ type: Number }),
        __metadata("design:type", Number)
    ], SwatchColorPickerBase.prototype, "cellWidth", void 0);
    SwatchColorPickerBase = __decorate([
        Component({
            components: { Grid: Grid, ColorPickerGridCell: ColorPickerGridCell },
            inheritAttrs: false,
        })
    ], SwatchColorPickerBase);
    return SwatchColorPickerBase;
}(BaseComponent));
export { SwatchColorPickerBase };
//# sourceMappingURL=SwatchColorPicker.base.js.map