@zeedhi/common 1.111.1 → 3.0.0

package/src/components/zd-grid-editable/grid-editable.ts

@@ -0,0 +1,464 @@
+import { Config, IDictionary, IEventParam } from '@zeedhi/core';
+import { IComponent, IComponentRender } from '../zd-component/interfaces';
+import {
+	DataNavigator,
+	DataSelector,
+	Direction,
+	GridColumn,
+	IDataNavigator,
+	IDataSelector,
+	IGrid,
+	IIterableTable,
+	IKeyMapMerger,
+	ITableActionBuilder,
+	IViewNavigator,
+	IterableTable,
+	KeyMapMerger,
+	KeyMapNavigation,
+	TableActionBuilder,
+	VerticalDirection,
+	ViewNavigator,
+} from '../zd-grid';
+import { Iterable } from '../zd-iterable/iterable';
+import { DataEditorWithAdd } from './data-editor-with-add';
+import { GridColumnEditable } from './grid-column-editable';
+import { GridEditableEvents } from './grid-editable-events';
+import {
+	IDataEditorWithAdd,
+	IGridColumnEditable,
+	IGridEditable,
+	IGridEditableEvents,
+	IGridEditableProps,
+} from './interfaces';
+import { KeyMapEditing } from './keymap-editing';
+
+export class GridEditable extends Iterable<GridColumnEditable> implements IGridEditable {
+	private tableActionBuilder: ITableActionBuilder;
+
+	private iterableTable: IIterableTable;
+
+	private dataSelector: IDataSelector;
+
+	private gridEditableEvents: IGridEditableEvents;
+
+	private dataNavigator: IDataNavigator;
+
+	private viewNavigator: IViewNavigator;
+
+	private keyMapMerger!: IKeyMapMerger;
+
+	private dataEditor: IDataEditorWithAdd;
+
+	editing = false;
+
+	currentColumn: GridColumnEditable | null = null;
+
+	selectedRows: IDictionary<any>[] = [];
+
+	selectionState: { allSelected: boolean; except: IDictionary<any>[] } = {
+		allSelected: false,
+		except: [],
+	};
+
+	rowStyleConditions?: (row: IDictionary) => IDictionary;
+
+	selectAllPages: boolean = Config.gridSelectAllPages;
+
+	selectable = false;
+
+	disableSelection?: (args: { row: IDictionary<any>; component: IGrid }) => boolean;
+
+	cellSelection = false;
+
+	toolbarSlot: IComponentRender[] = [{ name: '<<NAME>>_gridSearch', component: 'ZdSearch' }];
+
+	footerSlot: IComponentRender[] = [
+		{ name: '<<NAME>>_iterablePagination', component: 'ZdIterablePagination' },
+		{
+			name: '<<NAME>>_iterableInfoDiv',
+			component: 'ZdTag',
+			cssClass: 'zd-grid-div-footer',
+			tag: 'div',
+			children: [
+				{
+					name: '<<NAME>>_iterablePageSize',
+					component: 'ZdIterablePageSize',
+					iterableComponentName: '<<NAME>>',
+				},
+				{
+					name: '<<NAME>>_iterablePageInfo',
+					component: 'ZdIterablePageInfo',
+					iterableComponentName: '<<NAME>>',
+				},
+			],
+		},
+	];
+
+	noResultsText = 'NO_RESULT';
+
+	noResultSlot: IComponentRender[] = [
+		{
+			name: '<<NAME>>_no-result',
+			component: 'ZdText',
+			cssClass: 'no-result',
+			text: this.noResultsText,
+		},
+	];
+
+	errorSlot: IComponentRender[] = [];
+
+	dense = true;
+
+	dragColumns = false;
+
+	headerBackground = '';
+
+	headerCellTextColor = '';
+
+	height: string | number = 'auto';
+
+	loadingText = 'LOADING';
+
+	maxHeight: string | number = 'none';
+
+	maxWidth: string | number = 'none';
+
+	minHeight: string | number = 'auto';
+
+	minWidth: string | number = 'auto';
+
+	noDataText = 'NO_DATA';
+
+	noDataSlot: IComponentRender[] = [
+		{
+			name: '<<NAME>>_no-data',
+			component: 'ZdText',
+			cssClass: 'no-data',
+			text: this.noDataText,
+		},
+	];
+
+	resizeColumns = false;
+
+	showFooter = true;
+
+	showHeader = true;
+
+	showSelectAll = true;
+
+	width: string | number = '100%';
+
+	backgroundColor = 'transparent';
+
+	canEditRow?: ((args: { row: IDictionary<any>; component: IGridEditable }) => boolean) | undefined;
+
+	showCancelColumn = false;
+
+	doubleClickEdit = false;
+
+	singleEdit = false;
+
+	editingNewRows = false;
+
+	constructor(props: IGridEditableProps) {
+		super(props);
+
+		this.cellSelection = this.getInitValue('cellSelection', props.cellSelection, this.cellSelection);
+		this.dense = this.getInitValue('dense', props.dense, this.dense);
+		this.disableSelection = this.getInitValue('disableSelection', props.disableSelection, this.disableSelection);
+		this.dragColumns = this.getInitValue('dragColumns', props.dragColumns, this.dragColumns);
+		this.fillHeight = this.getInitValue('fillHeight', props.fillHeight, this.fillHeight);
+		this.headerCellTextColor = this.getInitValue(
+			'headerCellTextColor',
+			props.headerCellTextColor,
+			this.headerCellTextColor,
+		);
+		this.height = this.getInitValue('height', props.height, this.height);
+		this.loadingText = this.getInitValue('loadingText', props.loadingText, this.loadingText);
+		this.maxHeight = this.getInitValue('maxHeight', props.maxHeight, this.maxHeight);
+		this.maxWidth = this.getInitValue('maxWidth', props.maxWidth, this.maxWidth);
+		this.minHeight = this.getInitValue('minHeight', props.minHeight, this.minHeight);
+		this.minWidth = this.getInitValue('minWidth', props.minWidth, this.minWidth);
+		this.noDataText = this.getInitValue('noDataText', props.noDataText, this.noDataText);
+		this.noResultsText = this.getInitValue('noResultsText', props.noResultsText, this.noResultsText);
+		this.resizeColumns = this.getInitValue('resizeColumns', props.resizeColumns, this.resizeColumns);
+		this.rowStyleConditions = this.getInitValue(
+			'rowStyleConditions',
+			props.rowStyleConditions,
+			this.rowStyleConditions,
+		);
+		this.selectable = this.getInitValue('selectable', props.selectable, this.selectable);
+		this.selectAllPages = this.getInitValue('selectAllPages', props.selectAllPages, this.selectAllPages);
+		this.showFooter = this.getInitValue('showFooter', props.showFooter, this.showFooter);
+		this.showHeader = this.getInitValue('showHeader', props.showHeader, this.showHeader);
+		this.showSelectAll = this.getInitValue('showSelectAll', props.showSelectAll, this.showSelectAll);
+		this.width = this.getInitValue('width', props.width, this.width);
+		this.backgroundColor = this.getInitValue('backgroundColor', props.backgroundColor, this.backgroundColor);
+		// headerBackground defaults to the backgroundColor, unless backgroundColor is transparent
+		const defaultHeaderBackground = this.backgroundColor === 'transparent' ? '' : this.backgroundColor;
+		this.headerBackground = this.getInitValue('headerBackground', props.headerBackground, defaultHeaderBackground);
+		this.doubleClickEdit = this.getInitValue('doubleClickEdit', props.doubleClickEdit, this.doubleClickEdit);
+		this.singleEdit = this.getInitValue('singleEdit', props.singleEdit, this.singleEdit);
+		this.showCancelColumn = this.getInitValue('showCancelColumn', props.showCancelColumn, this.showCancelColumn);
+		this.canEditRow = this.getInitValue('canEditRow', props.canEditRow, this.canEditRow);
+		this.editingNewRows = this.getInitValue('editingNewRows', props.editingNewRows, this.editingNewRows);
+
+		this.toolbarSlot = props.toolbarSlot || this.toolbarSlot;
+		this.footerSlot = props.footerSlot || this.footerSlot;
+		this.noDataSlot = props.noDataSlot || this.noDataSlot;
+		this.noResultSlot = props.noResultSlot || this.noResultSlot;
+		this.errorSlot = props.errorSlot || this.errorSlot;
+		this.noDataSlot = this.changeDefaultSlotNames(this.noDataSlot);
+		this.footerSlot = this.changeDefaultSlotNames(this.footerSlot);
+		this.toolbarSlot = this.changeDefaultSlotNames(this.toolbarSlot);
+		this.noResultSlot = this.changeDefaultSlotNames(this.noResultSlot);
+		this.errorSlot = this.changeDefaultSlotNames(this.errorSlot);
+
+		this.tableActionBuilder = new TableActionBuilder(this);
+		this.iterableTable = new IterableTable(this);
+		this.dataSelector = new DataSelector(this);
+		this.gridEditableEvents = new GridEditableEvents(this);
+		this.dataNavigator = new DataNavigator(this);
+		this.viewNavigator = new ViewNavigator();
+		this.dataEditor = new DataEditorWithAdd(this);
+	}
+
+	getConditionalProps({ row, column }: { row: IDictionary; column: GridColumn }): Partial<IComponentRender> {
+		const rowStyle = this.getRowStyleConditions(row);
+		const cellsApplied = this.getAppliedConditions({ row, column });
+
+		return { ...rowStyle, ...cellsApplied };
+	}
+
+	addCancelColumn(): void {
+		this.dataEditor.addCancelColumn();
+	}
+
+	getCancelColumnProps(): IGridColumnEditable {
+		return this.dataEditor.getCancelColumnProps();
+	}
+
+	isAdded(row: IDictionary): boolean {
+		return this.dataEditor.isAdded(row);
+	}
+
+	cancelAddedRow(key: string | number): Promise<any> {
+		return this.dataEditor.cancelAddedRow(key);
+	}
+
+	cancelAddedRows(): Promise<void> {
+		return this.dataEditor.cancelAddedRows();
+	}
+
+	getAddedRows(): IDictionary<any>[] {
+		return this.dataEditor.getAddedRows();
+	}
+
+	addNewRow(row: IDictionary, position?: 'end' | 'start'): Promise<void> {
+		return this.dataEditor.addNewRow(row, position);
+	}
+
+	setViewEnterEdit(fn: ((rowKey: string, columnName: string) => void) | null): void {
+		this.dataEditor.setViewEnterEdit(fn);
+	}
+
+	getVisibleValue(row: IDictionary, column: IGridColumnEditable) {
+		return this.dataEditor.getVisibleValue(row, column);
+	}
+
+	getEditableComponent(column: IGridColumnEditable, row: IDictionary<any>): IComponentRender {
+		return this.dataEditor.getEditableComponent(column, row);
+	}
+
+	isEdited(column: IGridColumnEditable, row: IDictionary): boolean {
+		return this.dataEditor.isEdited(column, row);
+	}
+
+	isValid(column: IGridColumnEditable, row: IDictionary, revalidate?: boolean): Promise<boolean> {
+		return this.dataEditor.isValid(column, row, revalidate);
+	}
+
+	checkValid(column: IGridColumnEditable, row: IDictionary): boolean {
+		return this.dataEditor.checkValid(column, row);
+	}
+
+	isGridValid(revalidate?: boolean): boolean {
+		return this.dataEditor.isGridValid(revalidate);
+	}
+
+	getComponent<T>(key: string, columnName: string): T {
+		return this.dataEditor.getComponent(key, columnName);
+	}
+
+	updateRow(newRow: IDictionary): void {
+		this.dataEditor.updateRow(newRow);
+	}
+
+	updateCell(rowKey: string, columnName: string, value: any): void {
+		this.dataEditor.updateCell(rowKey, columnName, value);
+	}
+
+	public changeData(data = this.datasource.data): void {
+		super.changeData(data);
+		this.dataEditor.changeData(data);
+
+		data.forEach((row) => {
+			this.iterableTable.reapplyRowStyleConditions(row);
+			this.dataEditor.reapplyCanEditRow(row);
+		});
+	}
+
+	enterEdit(rowKey: string, columnName: string): void {
+		this.dataEditor.enterEdit(rowKey, columnName);
+	}
+
+	cancelEditedRows(): Promise<void> {
+		return this.dataEditor.cancelEditedRows();
+	}
+
+	saveEditedRows(revalidate?: boolean): Promise<void[]> {
+		return this.dataEditor.saveEditedRows(revalidate);
+	}
+
+	reapplyCanEditRow(row: IDictionary<any>) {
+		return this.dataEditor.reapplyCanEditRow(row);
+	}
+
+	getCanEditRow(row: IDictionary<any>): boolean | undefined {
+		return this.dataEditor.getCanEditRow(row);
+	}
+
+	getEditedRows(revalidate?: boolean, silent?: boolean): IDictionary<any>[] {
+		return this.dataEditor.getEditedRows(revalidate, silent);
+	}
+
+	cellDoubleClick(row: IDictionary<any>, column: GridColumnEditable, event: Event, element?: HTMLElement): void {
+		this.gridEditableEvents.cellDoubleClick(row, column, event, element);
+	}
+
+	inlineEdit(row: IDictionary, column: GridColumnEditable, event?: Event, element?: HTMLElement): void {
+		this.gridEditableEvents.inlineEdit(row, column, event, element);
+	}
+
+	public onMounted(element: HTMLElement): void {
+		super.onMounted(element);
+		this.keyMapMerger = new KeyMapMerger(this, [KeyMapNavigation, KeyMapEditing]);
+		this.keyMapMerger.bind(element);
+	}
+
+	public onBeforeDestroy(): void {
+		super.onBeforeDestroy();
+		this.keyMapMerger.unbind();
+	}
+
+	navigatePageUp(): void {
+		this.dataNavigator.navigatePageUp();
+	}
+
+	navigatePageDown(): void {
+		this.dataNavigator.navigatePageDown();
+	}
+
+	setViewNavigate(viewNavigate: (direction: Direction, event?: Event) => void): void {
+		this.viewNavigator.setViewNavigate(viewNavigate);
+	}
+
+	navigateLeft(params: IEventParam<any>): void {
+		if (!this.cellSelection) return;
+		this.viewNavigator.navigateLeft(params);
+	}
+
+	navigateRight(params: IEventParam<any>): void {
+		if (!this.cellSelection) return;
+		this.viewNavigator.navigateRight(params);
+	}
+
+	navigateUp(): void {
+		this.viewNavigator.navigateUp();
+	}
+
+	navigateDown(): void {
+		this.viewNavigator.navigateDown();
+	}
+
+	navigateDatasource(direction: VerticalDirection): void {
+		this.dataNavigator.navigateDatasource(direction);
+	}
+
+	createColumn(column: IGridColumnEditable): GridColumnEditable {
+		return new GridColumnEditable(column);
+	}
+
+	rowClick(row: IDictionary<any>, event: Event, element?: HTMLElement): void {
+		this.gridEditableEvents.rowClick(row, event, element);
+	}
+
+	rowDoubleClick(row: IDictionary<any>, event: Event, element?: HTMLElement): void {
+		this.gridEditableEvents.rowDoubleClick(row, event, element);
+	}
+
+	cellClick(row: IDictionary<any>, column: GridColumnEditable, event: Event, element?: HTMLElement): void {
+		this.gridEditableEvents.cellClick(row, column, event, element);
+	}
+
+	cellClickEvent(row: IDictionary<any>, column: GridColumnEditable, event: Event, element?: HTMLElement): void {
+		this.gridEditableEvents.cellClickEvent(row, column, event, element);
+	}
+
+	selectClick(row: IDictionary<any>, isSelected: boolean, event: Event, element?: HTMLElement): void {
+		this.dataSelector.selectClick(row, isSelected, event, element);
+	}
+
+	selectAllClick(isSelected: boolean, event: Event, element?: HTMLElement): void {
+		this.dataSelector.selectAllClick(isSelected, event, element);
+	}
+
+	selectAll(isSelected: boolean): void {
+		this.dataSelector.selectAll(isSelected);
+	}
+
+	toggleRow(row: IDictionary): void {
+		this.dataSelector.toggleRow(row);
+	}
+
+	selectRow(row: IDictionary, select: boolean): void {
+		this.dataSelector.selectRow(row, select);
+	}
+
+	callDisableSelection(row: IDictionary): boolean {
+		return this.dataSelector.callDisableSelection(row);
+	}
+
+	changeOrder(sortBy: { key: string; order: 'asc' | 'desc' }[]): Promise<void> {
+		return this.iterableTable.changeOrder(sortBy);
+	}
+
+	selectCell(row: IDictionary, column: GridColumnEditable): void {
+		this.iterableTable.selectCell(row, column);
+	}
+
+	reapplyRowStyleConditions(row: IDictionary): IDictionary {
+		return this.iterableTable.reapplyRowStyleConditions(row);
+	}
+
+	getRowStyleConditions(row: IDictionary): IDictionary {
+		return this.iterableTable.getRowStyleConditions(row);
+	}
+
+	deleteRows(): Promise<any[]> {
+		return this.iterableTable.deleteRows();
+	}
+
+	getActionComponent(
+		actionComponent: IComponent,
+		column: GridColumnEditable,
+		row: IDictionary,
+		parentPath?: string,
+	): IComponent {
+		return this.tableActionBuilder.getActionComponent(actionComponent, column, row, parentPath);
+	}
+
+	getEditedRow(row: IDictionary): IDictionary | undefined {
+		return this.dataEditor.getEditedRow(row);
+	}
+}

package/src/components/zd-grid-editable/index.ts

@@ -0,0 +1,7 @@
+export * from './data-editor-with-add';
+export * from './data-editor';
+export * from './grid-column-editable';
+export * from './grid-editable-controller';
+export * from './grid-editable-events';
+export * from './grid-editable';
+export * from './interfaces';

package/src/components/zd-grid-editable/interfaces.ts

@@ -0,0 +1,66 @@
+import { IDictionary } from '@zeedhi/core';
+import { IComponentRender } from '../zd-component/interfaces';
+import { GridColumn, IGrid, IGridColumn, IGridProps } from '../zd-grid';
+import { GridColumnEditable } from './grid-column-editable';
+import { GridEditable } from './grid-editable';
+
+export interface IGridEditableProps extends IGridProps {
+	columns?: IGridColumnEditable[];
+	canEditRow?: (args: { row: IDictionary<any>; component: GridEditable }) => boolean;
+	showCancelColumn?: boolean;
+	doubleClickEdit?: boolean;
+	singleEdit?: boolean;
+}
+
+export interface IGridEditable<T = GridColumnEditable> extends IGrid<T>, IDataEditorWithAdd, IGridEditableEvents {
+	editing: boolean;
+	canEditRow?: (args: { row: IDictionary<any>; component: IGridEditable }) => boolean;
+	showCancelColumn: boolean;
+	doubleClickEdit: boolean;
+	singleEdit: boolean;
+	editingNewRows: boolean;
+}
+
+export interface IGridEditableEvents {
+	rowClick(row: IDictionary<any>, event: Event, element?: HTMLElement): void;
+	rowDoubleClick(row: IDictionary<any>, event: Event, element?: HTMLElement): void;
+	cellDoubleClick(row: IDictionary<any>, column: GridColumnEditable, event: Event, element?: HTMLElement): void;
+	inlineEdit(row: IDictionary, column: GridColumnEditable, event?: Event, element?: HTMLElement): void;
+	cellClick(row: IDictionary<any>, column: GridColumn, event: Event, element?: HTMLElement): void;
+	cellClickEvent(row: IDictionary<any>, column: GridColumnEditable, event: Event, element?: HTMLElement): void;
+}
+
+export interface IGridColumnEditable extends IGridColumn {
+	editable?: boolean;
+}
+
+export interface IDataEditor {
+	getVisibleValue(row: IDictionary, column: IGridColumnEditable): any;
+	getEditableComponent(column: IGridColumnEditable, row: IDictionary<any>): IComponentRender;
+	isEdited(column: IGridColumnEditable, row: IDictionary): boolean;
+	isValid(column: IGridColumnEditable, row: IDictionary, revalidate?: boolean): Promise<boolean>;
+	checkValid(column: IGridColumnEditable, row: IDictionary): boolean;
+	isGridValid(revalidate?: boolean): boolean;
+	getComponent<T>(key: string, columnName: string): T;
+	updateRow(newRow: IDictionary): void;
+	updateCell(rowKey: string, columnName: string, value: any): void;
+	changeData(data?: IDictionary<any>[]): void;
+	setViewEnterEdit(fn: ((rowKey: string, columnName: string) => void) | null): void;
+	enterEdit(rowKey: string, columnName: string): void;
+	cancelEditedRows(): Promise<void>;
+	saveEditedRows(revalidate?: boolean): Promise<void[]>;
+	reapplyCanEditRow(row: IDictionary<any>): void;
+	getCanEditRow(row: IDictionary<any>): boolean | undefined;
+	getEditedRows(revalidate?: boolean, silent?: boolean): IDictionary<any>[];
+	getEditedRow(row: IDictionary): IDictionary | undefined;
+}
+
+export interface IDataEditorWithAdd extends IDataEditor {
+	addCancelColumn(): void;
+	getCancelColumnProps(): IGridColumnEditable;
+	isAdded(row: IDictionary): boolean;
+	cancelAddedRow(key: string | number): Promise<any>;
+	cancelAddedRows(): Promise<void>;
+	getAddedRows(): IDictionary<any>[];
+	addNewRow(row: IDictionary, position?: 'end' | 'start'): Promise<void>;
+}

package/src/components/zd-grid-editable/keymap-editing.ts

@@ -0,0 +1,18 @@
+import { IKeyMap } from '@zeedhi/core';
+import { Component } from '../zd-component/component';
+import { IKeyMapConfig } from '../zd-grid/interfaces';
+import { IDataEditor } from './interfaces';
+
+export class KeyMapEditing implements IKeyMapConfig<IDataEditor> {
+	getMap(instance: Component & IDataEditor): IKeyMap {
+		return {
+			esc: {
+				event: instance.cancelEditedRows.bind(instance),
+				index: 99,
+				stop: true,
+				input: true,
+				active: true,
+			},
+		};
+	}
+}

package/src/components/zd-header/header.ts

@@ -0,0 +1,139 @@
+import { ComponentRender } from '../zd-component/component-render';
+import { IComponentRender } from '../zd-component/interfaces';
+import { IFrameEvents } from '../zd-frame/interfaces';
+import { IHeader } from './interfaces';
+
+/**
+ * Base class for Header component.
+ */
+export class Header extends ComponentRender implements IHeader {
+	/**
+	 * Applies position absolute to header.
+	 */
+	public absolute = false;
+
+	/**
+	 * Designates the header as part of the application layout.
+	 */
+	public app = false;
+
+	/**
+	 * Render components on the middle of header.
+	 */
+	public centerSlot: IComponentRender[] = [];
+
+	/**
+	 * Applies specified color to the control. It can be the name of material or css color in hexa.
+	 */
+	public color = 'primary';
+
+	/**
+	 * Reduces the height of the toolbar content to 48px.
+	 */
+	public dense = false;
+
+	/**
+	 * Designates an elevation applied to the component between 0 and 24.
+	 */
+	public elevation: number | string = 2;
+
+	/**
+	 * Events registered to the header.
+	 */
+	public declare events: IFrameEvents;
+
+	/**
+	 * Applies position fixed to header.
+	 */
+	public fixed = false;
+
+	/**
+	 * Sets the height for header.
+	 */
+	public height: number | string = '';
+
+	/**
+	 * Render components on the left of header.
+	 */
+	public leftSlot: IComponentRender[] = [];
+
+	/**
+	 * Sets the maximum height for the header.
+	 */
+	public maxHeight?: number | string;
+
+	/**
+	 * Sets the maximum width for the header.
+	 */
+	public maxWidth?: number | string;
+
+	/**
+	 * Sets the minimum height for the header.
+	 */
+	public minHeight?: number | string;
+
+	/**
+	 * Sets the minimum width for the header.
+	 */
+	public minWidth?: number | string;
+
+	/**
+	 * Removes internal padding from header.
+	 */
+	public padless?: boolean = false;
+
+	/**
+	 * Render components on the right of header.
+	 */
+	public rightSlot: IComponentRender[] = [];
+
+	/**
+	 * Sets the width for the component.
+	 */
+	public width?: number | string;
+
+	/**
+	 * Specifies a v-img as the component’s background.
+	 */
+	public image?: string;
+
+	/**
+	 * Adjust the order of the component in relation to its registration order.
+	 */
+	public order?: string | number = 0;
+
+	/* istanbul ignore next */
+	/**
+	 * Creates a new header.
+	 * @param props Header properties
+	 */
+	constructor(props: IHeader) {
+		super(props);
+		this.absolute = this.getInitValue('absolute', props.absolute, this.absolute);
+		this.app = this.getInitValue('app', props.app, this.app);
+		this.centerSlot = props.centerSlot || this.centerSlot;
+		this.color = this.getInitValue('color', props.color, this.color);
+		this.dense = this.getInitValue('dense', props.dense, this.dense);
+		this.elevation = this.getInitValue('elevation', props.elevation, this.elevation);
+		this.fixed = this.getInitValue('fixed', props.fixed, this.fixed);
+		this.height = this.getInitValue('height', props.height, this.height);
+		this.leftSlot = props.leftSlot || this.leftSlot;
+		this.maxHeight = this.getInitValue('maxHeight', props.maxHeight, this.maxHeight);
+		this.maxWidth = this.getInitValue('maxWidth', props.maxWidth, this.maxWidth);
+		this.minHeight = this.getInitValue('minHeight', props.minHeight, this.minHeight);
+		this.minWidth = this.getInitValue('minWidth', props.minWidth, this.minWidth);
+		this.padless = this.getInitValue('padless', props.padless, this.padless);
+		this.rightSlot = props.rightSlot || this.rightSlot;
+		this.width = this.getInitValue('width', props.width, this.width);
+		// Zeedhi 3
+		this.image = this.getInitValue('image', props.image, this.image);
+		this.order = this.getInitValue('order', props.order, this.order);
+	}
+
+	/**
+	 * Retrieves named slots visibility
+	 */
+	get namedSlotsIsVisible() {
+		return this.leftSlot.length || this.centerSlot.length || this.rightSlot.length;
+	}
+}