@alyle/ui
Version:
Minimal Design, a set of components for Angular
382 lines (377 loc) • 14.7 kB
JavaScript
import * as i0 from '@angular/core';
import { Input, Directive, NgModule } from '@angular/core';
import * as i1 from '@alyle/ui';
import { eachMedia, StyleCollection, StyleRenderer } from '@alyle/ui';
const STYLE_PRIORITY = -1;
const ALIGN_ALIAS = {
rowReverse: 'row-reverse',
columnReverse: 'column-reverse',
wrapReverse: 'wrap-reverse',
start: 'flex-start',
end: 'flex-end',
between: 'space-between',
around: 'space-around',
evenly: 'space-evenly',
};
const STYLES = () => ({
$priority: STYLE_PRIORITY,
$name: LyGrid.и,
root: (_className) => `${_className}{width:100%;display:flex;flex-wrap:wrap;box-sizing:border-box;}`,
item: (_className) => `${_className},${_className} > :first-child{box-sizing:border-box;}`
});
/**
* Grid container
*/
class LyGrid {
static { this.и = 'LyGrid'; }
get spacingX() {
return this._spacingX;
}
set spacingX(val) {
if (val !== this.spacingX) {
this._spacingX = val;
this._createSpacingClass(undefined, val);
}
}
get spacingY() {
return this._spacingY;
}
set spacingY(val) {
if (val !== this.spacingY) {
this._spacingY = val;
this._createSpacingClass(undefined, undefined, val);
}
}
/**
* Defines the space between the component with the `item` attribute.
* Support breakpoints
*/
get spacing() {
return this._spacing;
}
set spacing(val) {
if (val !== this.spacing) {
this._spacing = val;
this._createSpacingClass(val);
}
}
/**
* Only one param must be defined
*/
_createSpacingClass(xy, x, y) {
const newSpacingClass = this.theme.addStyle(`lyGrid-spacing:${xy}·${x}·${y}`, (theme) => {
const val = (xy || x || y);
const spacingStyles = {};
eachMedia(val, (value, media) => {
const valuePadding = `${(+value) / 2}px`;
const padding = xy != null
? valuePadding
: x != null
? `0 ${valuePadding}`
: `${valuePadding} 0`;
if (media) {
spacingStyles[theme.getBreakpoint(media)] = {
padding
};
}
else {
spacingStyles.padding = padding;
}
});
return spacingStyles;
}, undefined, undefined, STYLE_PRIORITY);
if (xy) {
this._spacingClass = newSpacingClass;
}
else {
if (x) {
this._spacingXClass = newSpacingClass;
}
if (y) {
this._spacingYClass = newSpacingClass;
}
}
this._negativeMarginClass = this.theme.addStyle(`lyGrid-negative-margin:${xy}·${x}·${y}`, (theme) => {
const val = (xy || x || y);
let negativeMarginStyles;
eachMedia(val, (value, media) => {
const valueMargin = `${(-value) / 2}px`;
const margin = xy != null
? valueMargin
: x != null
? `0 ${valueMargin}`
: `${valueMargin} 0`;
const negativeMarginstyles = { margin };
if (xy != null || x != null) {
negativeMarginstyles.width = `calc(100% + ${value}px)`;
}
if (media) {
if (!negativeMarginStyles) {
negativeMarginStyles = {};
}
negativeMarginStyles[theme.getBreakpoint(media)] = negativeMarginstyles;
}
else {
negativeMarginStyles = negativeMarginstyles;
}
});
return negativeMarginStyles;
}, this.el.nativeElement, this._negativeMarginClass, STYLE_PRIORITY);
}
/**
* Defines the justify-content style property.
* Support breakpoints
*/
get justify() {
return this._justify;
}
set justify(val) {
if (val !== this.justify) {
this._justify = val;
this._justifyClass = this.theme.addStyle(`lyGrid-justify:${val}`, (theme) => {
let justifyStyles;
eachMedia(val, (value, media) => {
const newJustifyStyles = {
justifyContent: value in ALIGN_ALIAS
? ALIGN_ALIAS[value]
: value
};
if (media) {
if (!justifyStyles) {
justifyStyles = {};
}
justifyStyles[theme.getBreakpoint(media)] = newJustifyStyles;
}
else {
justifyStyles = newJustifyStyles;
}
});
return justifyStyles;
}, this.el.nativeElement, this._justifyClass, STYLE_PRIORITY);
}
}
/**
* Defines the justify-content style property.
* Support breakpoints
*/
get direction() {
return this._direction;
}
set direction(val) {
if (val !== this.direction) {
this._direction = val;
this._directionClass = this.theme.addStyle(`lyGrid-direction:${val}`, (theme) => {
let directionStyles;
eachMedia(val, (value, media) => {
const newDirectionStyles = {
flexDirection: value in ALIGN_ALIAS
? ALIGN_ALIAS[value]
: value
};
if (media) {
if (!directionStyles) {
directionStyles = {};
}
directionStyles[theme.getBreakpoint(media)] = newDirectionStyles;
}
else {
directionStyles = newDirectionStyles;
}
});
return directionStyles;
}, this.el.nativeElement, this._directionClass, STYLE_PRIORITY);
}
}
/**
* Defines the `align-items` style property.
* Support breakpoints
*/
set alignItems(val) {
this._alignItems = val;
this._alignItemsClass = this.theme.addStyle(`lyGrid.align:${val}`, (theme) => {
let alignItemsStyles;
eachMedia(val, (value, media) => {
const newAlignItemsStyles = {
alignItems: value in ALIGN_ALIAS
? ALIGN_ALIAS[value]
: value
};
if (media) {
if (!alignItemsStyles) {
alignItemsStyles = {};
}
alignItemsStyles[theme.getBreakpoint(media)] = newAlignItemsStyles;
}
else {
alignItemsStyles = newAlignItemsStyles;
}
});
return alignItemsStyles;
}, this.el.nativeElement, this._alignItemsClass, STYLE_PRIORITY);
}
get alignItems() {
return this._alignItems;
}
constructor(theme, el) {
this.theme = theme;
this.el = el;
/**
* Styles
* @docs-private
*/
this.classes = this.theme.renderStyleSheet(STYLES);
this.el.nativeElement.classList.add(this.classes.root);
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: LyGrid, deps: [{ token: i1.LyTheme2 }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.10", type: LyGrid, isStandalone: false, selector: "ly-grid[container]", inputs: { spacingX: "spacingX", spacingY: "spacingY", spacing: "spacing", justify: "justify", direction: "direction", alignItems: "alignItems" }, ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: LyGrid, decorators: [{
type: Directive,
args: [{
selector: 'ly-grid[container]',
standalone: false
}]
}], ctorParameters: () => [{ type: i1.LyTheme2 }, { type: i0.ElementRef }], propDecorators: { spacingX: [{
type: Input
}], spacingY: [{
type: Input
}], spacing: [{
type: Input
}], justify: [{
type: Input
}], direction: [{
type: Input
}], alignItems: [{
type: Input
}] } });
class LyGridItem {
static { this.и = 'LyGridItem'; }
/**
* Defines the number of grids
* Support breakpoints
*/
get col() {
return this._col;
}
set col(val) {
const newVal = this._col = val || 0;
this._colClass = this._sr.add(`${LyGridItem.и}--col-${newVal}`, (theme) => {
const medias = new StyleCollection();
eachMedia(newVal, (value, media) => {
if (typeof value === 'string') {
throw new Error(`${LyGridItem.и}: '${val}' is not valid.`);
}
const maxWidth = value ? value * 100 / 12 : 100;
const flexBasis = value ? value * 100 / 12 : 0;
const flexGrow = value ? 0 : 1;
if (media) {
medias.add((_className) => ` ${theme.breakpoints[media]}{${_className}{max-width:${maxWidth}%;flex-basis:${flexBasis}%;flex-grow:${flexGrow};}}`);
}
else {
medias.add((_className) => `${_className}{max-width:${maxWidth}%;flex-basis:${flexBasis}%;flex-grow:${flexGrow};}`);
}
});
return medias.css;
}, STYLE_PRIORITY, this._colClass);
}
set gridItemCol(val) {
this.col = val;
}
get gridItemCol() {
return this.col;
}
/**
* Defines the order style property.
* Support breakpoints
*/
get order() {
return this._order;
}
set order(val) {
if (val !== this.order) {
this._order = val;
this._orderClass = this.theme.addStyle(`lyGrid-order:${val}`, (theme) => {
let orderStyles;
eachMedia(`${val}`, (value, media) => {
const newOrderStyles = {
order: value
};
if (media) {
if (!orderStyles) {
orderStyles = {};
}
orderStyles[theme.getBreakpoint(media)] = newOrderStyles;
}
else {
orderStyles = newOrderStyles;
}
});
return orderStyles;
}, this.el.nativeElement, this._orderClass, STYLE_PRIORITY);
}
}
constructor(gridContainer, el, renderer, theme, _sr) {
this.gridContainer = gridContainer;
this.el = el;
this.theme = theme;
this._sr = _sr;
if (!gridContainer) {
throw new Error(`Require parent <ly-grid container>`);
}
renderer.addClass(el.nativeElement, this.gridContainer.classes.item);
}
ngOnInit() {
this._updateSpacing();
}
_updateSpacing() {
if (this.gridContainer._spacingClass) {
this.el.nativeElement.classList.add(this.gridContainer._spacingClass);
}
else {
if (this.gridContainer._spacingXClass) {
this.el.nativeElement.classList.add(this.gridContainer._spacingXClass);
}
if (this.gridContainer._spacingYClass) {
this.el.nativeElement.classList.add(this.gridContainer._spacingYClass);
}
}
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: LyGridItem, deps: [{ token: LyGrid }, { token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i1.LyTheme2 }, { token: i1.StyleRenderer }], target: i0.ɵɵFactoryTarget.Directive }); }
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.10", type: LyGridItem, isStandalone: false, selector: "ly-grid[item], [ly-grid-item], [lyGridItem]", inputs: { col: "col", gridItemCol: ["lyGridItem", "gridItemCol"], order: "order" }, providers: [
StyleRenderer
], ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: LyGridItem, decorators: [{
type: Directive,
args: [{
selector: 'ly-grid[item], [ly-grid-item], [lyGridItem]',
providers: [
StyleRenderer
],
standalone: false
}]
}], ctorParameters: () => [{ type: LyGrid }, { type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i1.LyTheme2 }, { type: i1.StyleRenderer }], propDecorators: { col: [{
type: Input
}], gridItemCol: [{
type: Input,
args: ['lyGridItem']
}], order: [{
type: Input
}] } });
class LyGridModule {
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: LyGridModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.10", ngImport: i0, type: LyGridModule, declarations: [LyGrid, LyGridItem], exports: [LyGrid, LyGridItem] }); }
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: LyGridModule }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: LyGridModule, decorators: [{
type: NgModule,
args: [{
exports: [LyGrid, LyGridItem],
declarations: [LyGrid, LyGridItem]
}]
}] });
/**
* Generated bundle index. Do not edit.
*/
export { LyGrid, LyGridItem, LyGridModule, STYLES };
//# sourceMappingURL=alyle-ui-grid.mjs.map