@zeedhi/common 1.112.0 → 3.0.0

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

@@ -0,0 +1,221 @@
+import { ComponentRender } from '../zd-component/component-render';
+import { ICard, ICardEvents } from './interfaces';
+
+/**
+ * Base class for Card component.
+ */
+export class Card extends ComponentRender implements ICard {
+	/**
+	 * Configure the active CSS class applied when the link is active
+	 */
+	public activeClass = '';
+
+	/**
+	 * Setting append prop always appends the relative path to the current path
+	 */
+	public append = false;
+
+	/**
+	 * Applies specified color to the control. It can be the name of material color
+	 */
+	public color = '';
+
+	/**
+	 * Removes the ability to click or target the component
+	 */
+	public disabled = false;
+
+	/**
+	 * Designates an elevation applied to the card between 0 and 24
+	 */
+	public elevation?: number | string;
+
+	/**
+	 * Events registered to the card
+	 */
+	public declare events: ICardEvents;
+
+	/**
+	 * Removes the card's elevation
+	 */
+	public flat = false;
+
+	/**
+	 * Sets the height for the card.
+	 * Possible values for height can be 'auto', '100%', '400px' or 400
+	 */
+	public height?: number | string;
+
+	/**
+	 * Will apply an elevation of 6dp when hovered
+	 */
+	public hover = false;
+
+	/**
+	 * Designates the component as anchor and applies the href attribute
+	 */
+	public href?: string;
+
+	/**
+	 * Specifies an image background for the card
+	 */
+	public img = '';
+
+	/**
+	 * Designates that the card is a link
+	 */
+	public link = false;
+
+	/**
+	 * Sets the maximum height for the card.
+	 * Possible values for width can be 'auto', '100%', '400px' or 400
+	 */
+	public maxHeight: number | string = 'none';
+
+	/**
+	 * Sets the maximum width for the card.
+	 * Possible values for width can be 'auto', '100%', '400px' or 400
+	 */
+	public maxWidth: number | string = 'none';
+
+	/**
+	 * Sets the minimum height for the card.
+	 * Possible values for width can be 'auto', '100%', '400px' or 400
+	 */
+	public minHeight: number | string = 'auto';
+
+	/**
+	 * Sets the minimum width for the card.
+	 * Possible values for width can be 'auto', '100%', '400px' or 400
+	 */
+	public minWidth: number | string = 'auto';
+
+	/**
+	 * Removes card elevation shadow and adds a thin border
+	 */
+	public outlined = false;
+
+	/**
+	 * Specifies a higher default elevation (16dp)
+	 */
+	public raised = false;
+
+	/**
+	 * Apply the ripple effect to show action from a user
+	 */
+	public ripple = false;
+
+	/**
+	 * Removes the component's border-radius
+	 */
+	public tile = false;
+
+	/**
+	 * Designates the component as anchor and applies the router.to attribute
+	 */
+	public to?: string;
+
+	/**
+	 * Sets the width for the card.
+	 * Possible values for width can be 'auto', '100%', '400px' or 400
+	 */
+	public width?: number | string;
+
+	/**
+	 * Applies border style to component
+	 */
+	public border: string | number | boolean = false;
+
+	/**
+	 * Adjusts the vertical height of the component
+	 * Possible values: 'default', 'comfortable' and 'compact'
+	 */
+	public density: 'default' | 'comfortable' | 'compact' = 'default';
+
+	/**
+	 * Displays the loading progress bar
+	 */
+	public loading: string | boolean = false;
+
+	/**
+	 * Defines the position of the component.
+	 * Possible values: 'relative' | 'absolute' | 'static' | 'fixed' | 'sticky'
+	 */
+	public position?: 'relative' | 'absolute' | 'static' | 'fixed' | 'sticky';
+
+	/**
+	 * Defines if the component will call router.replace() or router.push()
+	 */
+	public replace = false;
+
+	/**
+	 * Applies a large border radius on the button
+	 */
+	public round: string | number | boolean = false;
+
+	/**
+	 * Defines card subtitle
+	 */
+	public subtitle?: string;
+
+	/**
+	 * Root element tag
+	 */
+	public tag?: string;
+
+	/**
+	 * Defines card text
+	 */
+	public text?: string;
+
+	/**
+	 * Defines card title
+	 */
+	public title?: string;
+
+	/**
+	 * Applies style to component
+	 */
+	public variant?: 'text' | 'flat' | 'elevated' | 'tonal' | 'outlined' | 'plain';
+
+	/* istanbul ignore next */
+	/**
+	 * Creates a new Card.
+	 * @param props Card properties
+	 */
+	constructor(props: ICard) {
+		super(props);
+		this.activeClass = this.getInitValue('activeClass', props.activeClass, this.activeClass);
+		this.append = this.getInitValue('append', props.append, this.append);
+		this.color = this.getInitValue('color', props.color, this.color);
+		this.disabled = this.getInitValue('disabled', props.disabled, this.disabled);
+		this.elevation = this.getInitValue('elevation', props.elevation, this.elevation);
+		this.flat = this.getInitValue('flat', props.flat, this.flat);
+		this.hover = this.getInitValue('hover', props.hover, this.hover);
+		this.href = this.getInitValue('href', props.href, this.href);
+		this.img = this.getInitValue('img', props.img, this.img);
+		this.link = this.getInitValue('link', props.link, this.link);
+		this.height = this.getInitValue('height', props.height, this.height);
+		this.width = this.getInitValue('width', props.width, this.width);
+		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.outlined = this.getInitValue('outlined', props.outlined, this.outlined);
+		this.raised = this.getInitValue('raised', props.raised, this.raised);
+		this.ripple = this.getInitValue('ripple', props.ripple, this.ripple);
+		this.tile = this.getInitValue('tile', props.tile, this.tile);
+		this.to = this.getInitValue('to', props.to, this.to);
+		this.border = this.getInitValue('border', props.border, this.border);
+		this.density = this.getInitValue('density', props.density, this.density);
+		this.loading = this.getInitValue('loading', props.loading, this.loading);
+		this.position = this.getInitValue('position', props.position, this.position);
+		this.replace = this.getInitValue('replace', props.replace, this.replace);
+		this.round = this.getInitValue('round', props.round, this.round);
+		this.subtitle = this.getInitValue('subtitle', props.subtitle, this.subtitle);
+		this.tag = this.getInitValue('tag', props.tag, this.tag);
+		this.text = this.getInitValue('text', props.text, this.text);
+		this.title = this.getInitValue('title', props.title, this.title);
+		this.variant = this.getInitValue('variant', props.variant, this.variant);
+	}
+}

package/src/components/zd-card/interfaces.ts

@@ -0,0 +1,63 @@
+import { IEventParam } from '@zeedhi/core';
+import { IComponentEvents, IComponentRender } from '../zd-component/interfaces';
+import { Card } from './card';
+
+export type ICardEvent = IEventParam<Card>;
+export type ICardEvents = IComponentEvents<ICardEvent>;
+
+export interface ICard extends IComponentRender {
+	activeClass?: string;
+	append?: boolean;
+	color?: string;
+	elevation?: number | string;
+	events?: ICardEvents;
+	disabled?: boolean;
+	flat?: boolean;
+	hover?: boolean;
+	href?: string;
+	img?: string;
+	link?: boolean;
+	outlined?: boolean;
+	raised?: boolean;
+	ripple?: boolean;
+	tile?: boolean;
+	to?: string;
+	height?: number | string;
+	maxHeight?: number | string;
+	minHeight?: number | string;
+	width?: number | string;
+	maxWidth?: number | string;
+	minWidth?: number | string;
+	// Zeedhi 3.0
+	border?: string | number | boolean;
+	density?: 'default' | 'comfortable' | 'compact';
+	loading?: boolean | string;
+	position?: 'relative' | 'absolute' | 'static' | 'fixed' | 'sticky';
+	replace?: boolean;
+	round?: string | number | boolean;
+	subtitle?: string;
+	tag?: string;
+	text?: string;
+	title?: string;
+	variant?: 'text' | 'flat' | 'elevated' | 'tonal' | 'outlined' | 'plain';
+}
+
+/*
+Modificadas
+activeClass: ???
+append: ???
+color: OK
+disabled: OK
+elevation: OK
+flat: OK
+height: OK
+hover: OK
+href: OK
+img: trocar pra image
+link: OK
+outlined: variant
+raised: variant
+tile: rounded
+ripple: OK
+to: OK
+*/

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

@@ -0,0 +1,288 @@
+import { IButton } from '../zd-button/interfaces';
+import { ComponentRender } from '../zd-component/component-render';
+import { ICarousel, ICarouselEvents, ISlideData } from './interfaces';
+
+/**
+ * Base class for Carousel component.
+ */
+export class Carousel extends ComponentRender implements ICarousel {
+	/**
+	 * Configures the carousel to play automatically
+	 */
+	public autoPlay = false;
+
+	/**
+	 * Configures the carousel to show buttons outside the slides area
+	 */
+	public buttonsOutside = true;
+
+	/**
+	 * Displays the carousel items always in the center (only when using
+	 * a non-integer number in slidesPerView, like 1.5)
+	 */
+	public center = false;
+
+	/**
+	 * Current slide being displayed
+	 */
+	public currentSlide: number;
+
+	/**
+	 * Events registered to the carousel
+	 */
+	public events: ICarouselEvents = {};
+
+	/**
+	 * Displays the pagination as a fraction in the following format: currentSlide/slidesCount.
+	 * Only works when <code>showPagination</code> property is true
+	 */
+	public fractionPagination = false;
+
+	/**
+	 * Sets the carousel height. Example values: 'auto', '100%', '400px',
+	 * '30em', '400', 400. Values without measurement unit will be notated in pixels by default
+	 */
+	public height: number | string = 'auto';
+
+	/**
+	 * Sets the carousel max height. Example values: 'auto', '100%', '400px',
+	 * '30em', '400', 400. Values without measurement unit will be notated in pixels by default
+	 */
+	public maxHeight: number | string = 'none';
+
+	/**
+	 * Sets the carousel min height. Example values: 'auto', '100%', '400px',
+	 * '30em', '400', 400. Values without measurement unit will be notated in pixels by default
+	 */
+	public minHeight: number | string = 'auto';
+
+	/**
+	 * Set component height to fill all space available
+	 */
+	public fillHeight = false;
+
+	/**
+	 * Configures the carousel as infinite (the slide after the last one is the first slide, and vice-versa)
+	 */
+	public infiniteScroll = true;
+
+	/**
+	 * Configures the carousel's initial slide
+	 */
+	public initialSlide = 0;
+
+	/**
+	 * If autoPlay is enabled, sets the time duration of each slide in milliseconds
+	 */
+	public interval = 4000;
+
+	/**
+	 * Allows controlling the carousel using the keyboard arrow keys
+	 */
+	public keysControl = true;
+
+	/**
+	 * Allows controlling the carousel using mouse drag
+	 */
+	public mouseControl = false;
+
+	/**
+	 * Displays the pagination background
+	 */
+	public paginationBackground = true;
+
+	/**
+	 * If autoPlay is enabled, it will pause on mouse hover
+	 */
+	public pauseOnHover = true;
+
+	/**
+	 * Show the navigation arrows.
+	 */
+	public showArrows = true;
+
+	/**
+	 * The navigation arrows will be shown only on mouse hover.
+	 * Only works when <code>showArrows</code> property is true
+	 */
+	public showArrowsOnHover = false;
+
+	/**
+	 * Show the carousel pagination menu
+	 */
+	public showPagination = false;
+
+	/**
+	 * Show a progress bar that fills as the carousel approaches the last slide
+	 */
+	public showProgress = false;
+
+	/**
+	 * Css class to be added to slides
+	 */
+	public slideCssClass = 'zd-pa-4';
+
+	/**
+	 * Number of slides to be shown for each view (non-integer numbers are allowed)
+	 */
+	public slidesPerView = 1;
+
+	/**
+	 * Number of slides to be slided
+	 */
+	public slidesToSlide = 1;
+
+	/**
+	 * Allows controlling the carousel using touch for mobile
+	 */
+	public touchControl = true;
+
+	/**
+	 * Duration of the slide transition in milliseconds
+	 */
+	public transitionDuration = 300;
+
+	/**
+	 * Allows controlling the carousel using the mouse wheel
+	 */
+	public wheelControl = false;
+
+	/**
+	 * Carousel's right side button.
+	 */
+	public nextButton: IButton = {
+		name: '<<NAME>>_nextButton',
+		component: 'ZdButton',
+		iconName: 'next',
+		icon: true,
+	};
+
+	/**
+	 * Carousel's left side button
+	 */
+	public prevButton: IButton = {
+		name: '<<NAME>>_prevButton',
+		component: 'ZdButton',
+		iconName: 'prev',
+		icon: true,
+	};
+
+	/* istanbul ignore next */
+	/**
+	 * Creates a new Carousel
+	 * @param props Carousel properties
+	 */
+	constructor(props: ICarousel) {
+		super(props);
+		this.autoPlay = this.getInitValue('autoPlay', props.autoPlay, this.autoPlay);
+		this.buttonsOutside = this.getInitValue('buttonsOutside', props.buttonsOutside, this.buttonsOutside);
+		this.center = this.getInitValue('center', props.center, this.center);
+		this.height = this.getInitValue('height', props.height, this.height);
+		this.maxHeight = this.getInitValue('maxHeight', props.maxHeight, this.maxHeight);
+		this.minHeight = this.getInitValue('minHeight', props.minHeight, this.minHeight);
+		this.fillHeight = this.getInitValue('fillHeight', props.fillHeight, this.fillHeight);
+		this.infiniteScroll = this.getInitValue('infiniteScroll', props.infiniteScroll, this.infiniteScroll);
+		this.initialSlide = this.getInitValue('initialSlide', props.initialSlide, this.initialSlide);
+		this.currentSlide = this.getInitValue('currentSlide', props.currentSlide, this.initialSlide);
+		this.interval = this.getInitValue('interval', props.interval, this.interval);
+		this.keysControl = this.getInitValue('keysControl', props.keysControl, this.keysControl);
+		this.mouseControl = this.getInitValue('mouseControl', props.mouseControl, this.mouseControl);
+		this.nextButton = props.nextButton || this.nextButton;
+		this.fractionPagination = this.getInitValue(
+			'fractionPagination',
+			props.fractionPagination,
+			this.fractionPagination,
+		);
+		this.paginationBackground = this.getInitValue(
+			'paginationBackground',
+			props.paginationBackground,
+			this.paginationBackground,
+		);
+		this.pauseOnHover = this.getInitValue('pauseOnHover', props.pauseOnHover, this.pauseOnHover);
+		this.prevButton = props.prevButton || this.prevButton;
+		this.showArrowsOnHover = this.getInitValue('showArrowsOnHover', props.showArrowsOnHover, this.showArrowsOnHover);
+		this.showArrows = this.getInitValue('showArrows', props.showArrows, this.showArrows);
+		this.showPagination = this.getInitValue('showPagination', props.showPagination, this.showPagination);
+		this.showProgress = this.getInitValue('showProgress', props.showProgress, this.showProgress);
+		this.slideCssClass = this.getInitValue('slideCssClass', props.slideCssClass, this.slideCssClass);
+		this.slidesPerView = this.getInitValue('slidesPerView', props.slidesPerView, this.slidesPerView);
+		this.slidesToSlide = this.getInitValue('slidesToSlide', props.slidesToSlide, this.slidesToSlide);
+		this.touchControl = this.getInitValue('touchControl', props.touchControl, this.touchControl);
+		this.transitionDuration = this.getInitValue(
+			'transitionDuration',
+			props.transitionDuration,
+			this.transitionDuration,
+		);
+		this.wheelControl = this.getInitValue('wheelControl', props.wheelControl, this.wheelControl);
+		this.prevButton = this.changeDefaultButtonName(this.prevButton);
+		this.nextButton = this.changeDefaultButtonName(this.nextButton);
+		this.createAccessors();
+
+		if (props.events) {
+			this.events = { ...props.events };
+		}
+	}
+
+	/**
+	 * Slides the carousel to the defined index
+	 * @param index Index of the slide to be slided to
+	 */
+	public slideTo(index: number) {
+		const slideCount = this.children.length;
+		this.currentSlide = index < 0 ? (index + slideCount) % slideCount : index % slideCount;
+	}
+
+	/**
+	 * Slides to the next slide
+	 */
+	public slideNext() {
+		const slideCount = this.children.length;
+		if (this.infiniteScroll || this.currentSlide < slideCount - 1) {
+			this.slideTo(this.currentSlide + this.slidesToSlide);
+		}
+	}
+
+	/**
+	 * Slides to the previous slide
+	 */
+	public slidePrev() {
+		if (this.infiniteScroll || this.currentSlide > 0) {
+			this.slideTo(this.currentSlide - this.slidesToSlide);
+		}
+	}
+
+	/**
+	 * Event triggered before the current slide changes
+	 * @param event Event that triggered the beforeSlide event
+	 * @param element Carousel element
+	 * @param slideData Data related to the beforeSlide event
+	 */
+	public beforeSlide(element: any, slideData: ISlideData, event?: Event) {
+		this.callEvent('beforeSlide', {
+			event,
+			element,
+			slideData,
+			component: this,
+		});
+	}
+
+	/**
+	 * Event triggered when the current slide changes.
+	 * @param event Event that triggered the slide event
+	 * @param element Carousel element
+	 * @param slideData Data related to the slide event
+	 */
+	public slide(element: any, slideData: ISlideData, event?: Event) {
+		this.callEvent('slide', {
+			event,
+			element,
+			slideData,
+			component: this,
+		});
+	}
+
+	private changeDefaultButtonName(button: IButton) {
+		button.name = button.name.replace('<<NAME>>', this.name);
+		return button;
+	}
+}

package/src/components/zd-carousel/interfaces.ts

@@ -0,0 +1,53 @@
+import { IButton } from '../zd-button/interfaces';
+import { IComponentEvents, IComponentRender } from '../zd-component/interfaces';
+import { Carousel } from './carousel';
+
+export interface ISlideData {
+	currentSlide: number;
+	slideFrom?: number;
+	slideTo?: number;
+}
+
+export interface ICarouselEventParam {
+	component: Carousel;
+	event?: Event | undefined;
+	element?: any;
+	slideData?: ISlideData;
+}
+
+export interface ICarouselEvents extends IComponentEvents<ICarouselEventParam> {
+	beforeSlide?: (data: ICarouselEventParam) => void;
+	slide?: (data: ICarouselEventParam) => void;
+}
+
+export interface ICarousel extends IComponentRender {
+	autoPlay?: boolean;
+	buttonsOutside?: boolean;
+	center?: boolean;
+	currentSlide?: number;
+	infiniteScroll?: boolean;
+	initialSlide?: number;
+	interval?: number;
+	keysControl?: boolean;
+	mouseControl?: boolean;
+	nextButton?: IButton;
+	fractionPagination?: boolean;
+	paginationBackground?: boolean;
+	pauseOnHover?: boolean;
+	prevButton?: IButton;
+	showArrowsOnHover?: boolean;
+	showArrows?: boolean;
+	showPagination?: boolean;
+	showProgress?: boolean;
+	slideCssClass?: string;
+	slidesPerView?: number;
+	slidesToSlide?: number;
+	touchControl?: boolean;
+	transitionDuration?: number;
+	wheelControl?: boolean;
+	height?: number | string;
+	maxHeight?: number | string;
+	minHeight?: number | string;
+	fillHeight?: boolean;
+	events?: ICarouselEvents;
+}

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

@@ -0,0 +1,21 @@
+import { InputFactory } from '../zd-input/input-factory';
+import { Toggleable } from '../zd-toggleable/toggleable';
+import { ICheckbox } from './interfaces';
+
+/**
+ * Base class for Checkbox component.
+ */
+export class Checkbox extends Toggleable implements ICheckbox {
+	/* istanbul ignore next */
+	/**
+	 * Create a new Checkbox.
+	 * @param props Checkbox properties
+	 */
+	constructor(props: ICheckbox) {
+		super(props);
+		this.showHelper = false;
+		this.createAccessors();
+	}
+}
+
+InputFactory.register('ZdCheckbox', Checkbox);

package/src/components/zd-checkbox/interfaces.ts

@@ -0,0 +1,7 @@
+import { IEventParam } from '@zeedhi/core';
+import { IToggleable } from '../zd-toggleable/interfaces';
+import { Checkbox } from './checkbox';
+
+export type ICheckboxEvent = IEventParam<Checkbox>;
+
+export type ICheckbox = IToggleable;