@kushki/ng-suka
Version:
<p align="center"> <h1 align="center">Suka Components Angular</h1> <p align="center"> An Angular implementation of the Suka Design System </p> </p>
205 lines • 12.1 kB
JavaScript
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
import { Directive, HostBinding, Input } from '@angular/core';
export class GridDirective {
constructor() {
this.baseClass = true;
}
}
GridDirective.decorators = [
{ type: Directive, args: [{
selector: '[sukaGrid]'
},] }
];
GridDirective.propDecorators = {
baseClass: [{ type: HostBinding, args: ['class.grid',] }]
};
if (false) {
/** @type {?} */
GridDirective.prototype.baseClass;
}
export class RowDirective {
constructor() {
this.baseClass = true;
/**
* Set to `true` for no gutters between columns.
*/
this.noGutters = false;
/**
* Set to `true` to make the columns distribute their height accordingly to the row total height.
*/
this.rowDeck = false;
}
}
RowDirective.decorators = [
{ type: Directive, args: [{
selector: '[sukaRow]'
},] }
];
RowDirective.propDecorators = {
baseClass: [{ type: HostBinding, args: ['class.row',] }],
noGutters: [{ type: HostBinding, args: ['class.no-gutters',] }, { type: Input }],
rowDeck: [{ type: HostBinding, args: ['class.row-deck',] }, { type: Input }]
};
if (false) {
/** @type {?} */
RowDirective.prototype.baseClass;
/**
* Set to `true` for no gutters between columns.
* @type {?}
*/
RowDirective.prototype.noGutters;
/**
* Set to `true` to make the columns distribute their height accordingly to the row total height.
* @type {?}
*/
RowDirective.prototype.rowDeck;
}
export class ColumnDirective {
constructor() {
/**
* Sets the class
*/
this.class = '';
/**
* Object that sets the column numbers according to the breakpoint.
* Breakpoints can be:<br>
* - xs: From 0px<br>
* - sm: From 576px<br>
* - md: From 768px<br>
* - lg: From 992px<br>
* - xl: From 1200px<br>
* - xxl: From 1600px<br>
* - nobreak: For all viewports.
* <br>
* Example:
* ```{xs: 12, sm: 6, md: 4}```
*/
this.columnNumbers = {};
/**
* Object that sets the column offset according to the breakpoint.
* Breakpoints can be:<br>
* - xs: From 0px<br>
* - sm: From 576px<br>
* - md: From 768px<br>
* - lg: From 992px<br>
* - xl: From 1200px<br>
* - xxl: From 1600px<br>
* - nobreak: For all viewports.
* <br>
* Example:
* ```{xs: 12, sm: 6, md: 4}```
*/
this.offsets = {};
// tslint:disable-next-line: variable-name
this._columnClasses = [];
}
/**
* @return {?}
*/
get columnClasses() {
return this._columnClasses.join(' ');
}
/**
* @param {?} classes
* @return {?}
*/
set(classes) {
this._columnClasses = classes.split(' ');
}
/**
* @return {?}
*/
ngOnInit() {
try {
/** @type {?} */
const columnKeys = Object.keys(this.columnNumbers);
if (columnKeys.length <= 0) {
this._columnClasses.push('col');
}
columnKeys.forEach((/**
* @param {?} key
* @return {?}
*/
key => {
if (this.columnNumbers[key] === 'nobreak') {
this._columnClasses.push(`col-${key}`);
}
else {
this._columnClasses.push(`col-${key}-${this.columnNumbers[key]}`);
}
}));
Object.keys(this.offsets).forEach((/**
* @param {?} key
* @return {?}
*/
key => {
this._columnClasses.push(`offset-${key}-${this.offsets[key]}`);
}));
}
catch (err) {
throw new Error(`Malformed \`offsets\` or \`columnNumbers\`: ${err}`);
}
if (this.class) {
this._columnClasses.push(this.class);
}
}
}
ColumnDirective.decorators = [
{ type: Directive, args: [{
selector: '[sukaCol]'
},] }
];
ColumnDirective.propDecorators = {
class: [{ type: Input }],
columnNumbers: [{ type: Input }],
offsets: [{ type: Input }],
columnClasses: [{ type: HostBinding, args: ['class',] }]
};
if (false) {
/**
* Sets the class
* @type {?}
*/
ColumnDirective.prototype.class;
/**
* Object that sets the column numbers according to the breakpoint.
* Breakpoints can be:<br>
* - xs: From 0px<br>
* - sm: From 576px<br>
* - md: From 768px<br>
* - lg: From 992px<br>
* - xl: From 1200px<br>
* - xxl: From 1600px<br>
* - nobreak: For all viewports.
* <br>
* Example:
* ```{xs: 12, sm: 6, md: 4}```
* @type {?}
*/
ColumnDirective.prototype.columnNumbers;
/**
* Object that sets the column offset according to the breakpoint.
* Breakpoints can be:<br>
* - xs: From 0px<br>
* - sm: From 576px<br>
* - md: From 768px<br>
* - lg: From 992px<br>
* - xl: From 1200px<br>
* - xxl: From 1600px<br>
* - nobreak: For all viewports.
* <br>
* Example:
* ```{xs: 12, sm: 6, md: 4}```
* @type {?}
*/
ColumnDirective.prototype.offsets;
/**
* @type {?}
* @protected
*/
ColumnDirective.prototype._columnClasses;
}
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZ3JpZC5kaXJlY3RpdmUuanMiLCJzb3VyY2VSb290Ijoibmc6Ly9Aa3VzaGtpL25nLXN1a2EvIiwic291cmNlcyI6WyJsaWIvZ3JpZC9ncmlkLmRpcmVjdGl2ZS50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiOzs7O0FBQUEsT0FBTyxFQUFFLFNBQVMsRUFBRSxXQUFXLEVBQUUsS0FBSyxFQUFnQixNQUFNLGVBQWUsQ0FBQztBQUs1RSxNQUFNLE9BQU8sYUFBYTtJQUgxQjtRQUk2QixjQUFTLEdBQUcsSUFBSSxDQUFDO0lBQzlDLENBQUM7OztZQUxBLFNBQVMsU0FBQztnQkFDVCxRQUFRLEVBQUUsWUFBWTthQUN2Qjs7O3dCQUVFLFdBQVcsU0FBQyxZQUFZOzs7O0lBQXpCLGtDQUE0Qzs7QUFNOUMsTUFBTSxPQUFPLFlBQVk7SUFIekI7UUFJNEIsY0FBUyxHQUFHLElBQUksQ0FBQzs7OztRQUlELGNBQVMsR0FBRyxLQUFLLENBQUM7Ozs7UUFJcEIsWUFBTyxHQUFHLEtBQUssQ0FBQztJQUMxRCxDQUFDOzs7WUFiQSxTQUFTLFNBQUM7Z0JBQ1QsUUFBUSxFQUFFLFdBQVc7YUFDdEI7Ozt3QkFFRSxXQUFXLFNBQUMsV0FBVzt3QkFJdkIsV0FBVyxTQUFDLGtCQUFrQixjQUFHLEtBQUs7c0JBSXRDLFdBQVcsU0FBQyxnQkFBZ0IsY0FBRyxLQUFLOzs7O0lBUnJDLGlDQUEyQzs7Ozs7SUFJM0MsaUNBQTREOzs7OztJQUk1RCwrQkFBd0Q7O0FBTTFELE1BQU0sT0FBTyxlQUFlO0lBSDVCOzs7O1FBT1csVUFBSyxHQUFHLEVBQUUsQ0FBQzs7Ozs7Ozs7Ozs7Ozs7O1FBZ0JYLGtCQUFhLEdBQUcsRUFBRSxDQUFDOzs7Ozs7Ozs7Ozs7Ozs7UUFnQm5CLFlBQU8sR0FBRyxFQUFFLENBQUM7O1FBR1osbUJBQWMsR0FBYSxFQUFFLENBQUM7SUFxQzFDLENBQUM7Ozs7SUFuQ0MsSUFDSSxhQUFhO1FBQ2YsT0FBTyxJQUFJLENBQUMsY0FBYyxDQUFDLElBQUksQ0FBQyxHQUFHLENBQUMsQ0FBQztJQUN2QyxDQUFDOzs7OztJQUVELEdBQUcsQ0FBQyxPQUFlO1FBQ2pCLElBQUksQ0FBQyxjQUFjLEdBQUcsT0FBTyxDQUFDLEtBQUssQ0FBQyxHQUFHLENBQUMsQ0FBQztJQUMzQyxDQUFDOzs7O0lBRUQsUUFBUTtRQUNOLElBQUk7O2tCQUNJLFVBQVUsR0FBRyxNQUFNLENBQUMsSUFBSSxDQUFDLElBQUksQ0FBQyxhQUFhLENBQUM7WUFDbEQsSUFBSSxVQUFVLENBQUMsTUFBTSxJQUFJLENBQUMsRUFBRTtnQkFDMUIsSUFBSSxDQUFDLGNBQWMsQ0FBQyxJQUFJLENBQUMsS0FBSyxDQUFDLENBQUM7YUFDakM7WUFFRCxVQUFVLENBQUMsT0FBTzs7OztZQUFDLEdBQUcsQ0FBQyxFQUFFO2dCQUN2QixJQUFJLElBQUksQ0FBQyxhQUFhLENBQUMsR0FBRyxDQUFDLEtBQUssU0FBUyxFQUFFO29CQUN6QyxJQUFJLENBQUMsY0FBYyxDQUFDLElBQUksQ0FBQyxPQUFPLEdBQUcsRUFBRSxDQUFDLENBQUM7aUJBQ3hDO3FCQUFNO29CQUNMLElBQUksQ0FBQyxjQUFjLENBQUMsSUFBSSxDQUFDLE9BQU8sR0FBRyxJQUFJLElBQUksQ0FBQyxhQUFhLENBQUMsR0FBRyxDQUFDLEVBQUUsQ0FBQyxDQUFDO2lCQUNuRTtZQUNILENBQUMsRUFBQyxDQUFDO1lBRUgsTUFBTSxDQUFDLElBQUksQ0FBQyxJQUFJLENBQUMsT0FBTyxDQUFDLENBQUMsT0FBTzs7OztZQUFDLEdBQUcsQ0FBQyxFQUFFO2dCQUN0QyxJQUFJLENBQUMsY0FBYyxDQUFDLElBQUksQ0FBQyxVQUFVLEdBQUcsSUFBSSxJQUFJLENBQUMsT0FBTyxDQUFDLEdBQUcsQ0FBQyxFQUFFLENBQUMsQ0FBQztZQUNqRSxDQUFDLEVBQUMsQ0FBQztTQUNKO1FBQUMsT0FBTyxHQUFHLEVBQUU7WUFDWixNQUFNLElBQUksS0FBSyxDQUFDLCtDQUErQyxHQUFHLEVBQUUsQ0FBQyxDQUFDO1NBQ3ZFO1FBRUQsSUFBSSxJQUFJLENBQUMsS0FBSyxFQUFFO1lBQ2QsSUFBSSxDQUFDLGNBQWMsQ0FBQyxJQUFJLENBQUMsSUFBSSxDQUFDLEtBQUssQ0FBQyxDQUFDO1NBQ3RDO0lBQ0gsQ0FBQzs7O1lBOUVGLFNBQVMsU0FBQztnQkFDVCxRQUFRLEVBQUUsV0FBVzthQUN0Qjs7O29CQUtFLEtBQUs7NEJBZ0JMLEtBQUs7c0JBZ0JMLEtBQUs7NEJBS0wsV0FBVyxTQUFDLE9BQU87Ozs7Ozs7SUFyQ3BCLGdDQUFvQjs7Ozs7Ozs7Ozs7Ozs7OztJQWdCcEIsd0NBQTRCOzs7Ozs7Ozs7Ozs7Ozs7O0lBZ0I1QixrQ0FBc0I7Ozs7O0lBR3RCLHlDQUF3QyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IERpcmVjdGl2ZSwgSG9zdEJpbmRpbmcsIElucHV0LCBPbkluaXQsIEhvc3QgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcblxuQERpcmVjdGl2ZSh7XG4gIHNlbGVjdG9yOiAnW3N1a2FHcmlkXSdcbn0pXG5leHBvcnQgY2xhc3MgR3JpZERpcmVjdGl2ZSB7XG4gIEBIb3N0QmluZGluZygnY2xhc3MuZ3JpZCcpIGJhc2VDbGFzcyA9IHRydWU7XG59XG5cbkBEaXJlY3RpdmUoe1xuICBzZWxlY3RvcjogJ1tzdWthUm93XSdcbn0pXG5leHBvcnQgY2xhc3MgUm93RGlyZWN0aXZlIHtcbiAgQEhvc3RCaW5kaW5nKCdjbGFzcy5yb3cnKSBiYXNlQ2xhc3MgPSB0cnVlO1xuICAvKipcbiAgICogU2V0IHRvIGB0cnVlYCBmb3Igbm8gZ3V0dGVycyBiZXR3ZWVuIGNvbHVtbnMuXG4gICAqL1xuICBASG9zdEJpbmRpbmcoJ2NsYXNzLm5vLWd1dHRlcnMnKSBASW5wdXQoKSBub0d1dHRlcnMgPSBmYWxzZTtcbiAgLyoqXG4gICAqIFNldCB0byBgdHJ1ZWAgdG8gbWFrZSB0aGUgY29sdW1ucyBkaXN0cmlidXRlIHRoZWlyIGhlaWdodCBhY2NvcmRpbmdseSB0byB0aGUgcm93IHRvdGFsIGhlaWdodC5cbiAgICovXG4gIEBIb3N0QmluZGluZygnY2xhc3Mucm93LWRlY2snKSBASW5wdXQoKSByb3dEZWNrID0gZmFsc2U7XG59XG5cbkBEaXJlY3RpdmUoe1xuICBzZWxlY3RvcjogJ1tzdWthQ29sXSdcbn0pXG5leHBvcnQgY2xhc3MgQ29sdW1uRGlyZWN0aXZlIGltcGxlbWVudHMgT25Jbml0IHtcbiAgLyoqXG4gICAqIFNldHMgdGhlIGNsYXNzXG4gICAqL1xuICBASW5wdXQoKSBjbGFzcyA9ICcnO1xuXG4gIC8qKlxuICAgKiBPYmplY3QgdGhhdCBzZXRzIHRoZSBjb2x1bW4gbnVtYmVycyBhY2NvcmRpbmcgdG8gdGhlIGJyZWFrcG9pbnQuXG4gICAqIEJyZWFrcG9pbnRzIGNhbiBiZTo8YnI+XG4gICAqIC0geHM6IEZyb20gMHB4PGJyPlxuICAgKiAtIHNtOiBGcm9tIDU3NnB4PGJyPlxuICAgKiAtIG1kOiBGcm9tIDc2OHB4PGJyPlxuICAgKiAtIGxnOiBGcm9tIDk5MnB4PGJyPlxuICAgKiAtIHhsOiBGcm9tIDEyMDBweDxicj5cbiAgICogLSB4eGw6IEZyb20gMTYwMHB4PGJyPlxuICAgKiAtIG5vYnJlYWs6IEZvciBhbGwgdmlld3BvcnRzLlxuICAgKiA8YnI+XG4gICAqIEV4YW1wbGU6XG4gICAqIGBgYHt4czogMTIsIHNtOiA2LCBtZDogNH1gYGBcbiAgICovXG4gIEBJbnB1dCgpIGNvbHVtbk51bWJlcnMgPSB7fTtcblxuICAvKipcbiAgICogT2JqZWN0IHRoYXQgc2V0cyB0aGUgY29sdW1uIG9mZnNldCBhY2NvcmRpbmcgdG8gdGhlIGJyZWFrcG9pbnQuXG4gICAqIEJyZWFrcG9pbnRzIGNhbiBiZTo8YnI+XG4gICAqIC0geHM6IEZyb20gMHB4PGJyPlxuICAgKiAtIHNtOiBGcm9tIDU3NnB4PGJyPlxuICAgKiAtIG1kOiBGcm9tIDc2OHB4PGJyPlxuICAgKiAtIGxnOiBGcm9tIDk5MnB4PGJyPlxuICAgKiAtIHhsOiBGcm9tIDEyMDBweDxicj5cbiAgICogLSB4eGw6IEZyb20gMTYwMHB4PGJyPlxuICAgKiAtIG5vYnJlYWs6IEZvciBhbGwgdmlld3BvcnRzLlxuICAgKiA8YnI+XG4gICAqIEV4YW1wbGU6XG4gICAqIGBgYHt4czogMTIsIHNtOiA2LCBtZDogNH1gYGBcbiAgICovXG4gIEBJbnB1dCgpIG9mZnNldHMgPSB7fTtcblxuICAvLyB0c2xpbnQ6ZGlzYWJsZS1uZXh0LWxpbmU6IHZhcmlhYmxlLW5hbWVcbiAgcHJvdGVjdGVkIF9jb2x1bW5DbGFzc2VzOiBzdHJpbmdbXSA9IFtdO1xuXG4gIEBIb3N0QmluZGluZygnY2xhc3MnKVxuICBnZXQgY29sdW1uQ2xhc3NlcygpOiBzdHJpbmcge1xuICAgIHJldHVybiB0aGlzLl9jb2x1bW5DbGFzc2VzLmpvaW4oJyAnKTtcbiAgfVxuXG4gIHNldChjbGFzc2VzOiBzdHJpbmcpIHtcbiAgICB0aGlzLl9jb2x1bW5DbGFzc2VzID0gY2xhc3Nlcy5zcGxpdCgnICcpO1xuICB9XG5cbiAgbmdPbkluaXQoKSB7XG4gICAgdHJ5IHtcbiAgICAgIGNvbnN0IGNvbHVtbktleXMgPSBPYmplY3Qua2V5cyh0aGlzLmNvbHVtbk51bWJlcnMpO1xuICAgICAgaWYgKGNvbHVtbktleXMubGVuZ3RoIDw9IDApIHtcbiAgICAgICAgdGhpcy5fY29sdW1uQ2xhc3Nlcy5wdXNoKCdjb2wnKTtcbiAgICAgIH1cblxuICAgICAgY29sdW1uS2V5cy5mb3JFYWNoKGtleSA9PiB7XG4gICAgICAgIGlmICh0aGlzLmNvbHVtbk51bWJlcnNba2V5XSA9PT0gJ25vYnJlYWsnKSB7XG4gICAgICAgICAgdGhpcy5fY29sdW1uQ2xhc3Nlcy5wdXNoKGBjb2wtJHtrZXl9YCk7XG4gICAgICAgIH0gZWxzZSB7XG4gICAgICAgICAgdGhpcy5fY29sdW1uQ2xhc3Nlcy5wdXNoKGBjb2wtJHtrZXl9LSR7dGhpcy5jb2x1bW5OdW1iZXJzW2tleV19YCk7XG4gICAgICAgIH1cbiAgICAgIH0pO1xuXG4gICAgICBPYmplY3Qua2V5cyh0aGlzLm9mZnNldHMpLmZvckVhY2goa2V5ID0+IHtcbiAgICAgICAgdGhpcy5fY29sdW1uQ2xhc3Nlcy5wdXNoKGBvZmZzZXQtJHtrZXl9LSR7dGhpcy5vZmZzZXRzW2tleV19YCk7XG4gICAgICB9KTtcbiAgICB9IGNhdGNoIChlcnIpIHtcbiAgICAgIHRocm93IG5ldyBFcnJvcihgTWFsZm9ybWVkIFxcYG9mZnNldHNcXGAgb3IgXFxgY29sdW1uTnVtYmVyc1xcYDogJHtlcnJ9YCk7XG4gICAgfVxuXG4gICAgaWYgKHRoaXMuY2xhc3MpIHtcbiAgICAgIHRoaXMuX2NvbHVtbkNsYXNzZXMucHVzaCh0aGlzLmNsYXNzKTtcbiAgICB9XG4gIH1cbn1cbiJdfQ==