@doku-dev/doku-fragment
Version:
A new Angular UI library that moving away from Bootstrap and built from scratch.
56 lines • 6.02 kB
JavaScript
import { Directive, HostBinding, Input } from '@angular/core';
import * as i0 from "@angular/core";
export class DokuFieldPrefix {
constructor() {
/**
* The appearance of the prefix content.
* - `inline`, use field padding - ideal for icon.
* - `border-block`, has own padding and border as a separator - ideal for text like "IDR".
* - `block`, the looks will be based on the provided content - ideal for component like Button.
* - `border-block-inside`, looks like border block but no padding
* and inside the wrapper border - ideal for select component.
*/
this.appearance = 'inline';
/**
* Whether to use background color. Support is limited by appearance.
*
* Supported appearances:
* - `border-block`
* - `border-block-inside`
*/
this.useBackgroundColor = false;
this.classPrefix = true;
}
get classAppearance() {
return [`d-field-prefix-${this.appearance}`, this.getBackgroundClass()];
}
getBackgroundClass() {
if (!this.useBackgroundColor)
return null;
if (this.appearance === 'border-block' || this.appearance === 'border-block-inside') {
return 'd-field-prefix-use-background';
}
return null;
}
}
DokuFieldPrefix.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: DokuFieldPrefix, deps: [], target: i0.ɵɵFactoryTarget.Directive });
DokuFieldPrefix.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.9", type: DokuFieldPrefix, isStandalone: true, selector: "[doku-field-prefix]", inputs: { appearance: "appearance", useBackgroundColor: "useBackgroundColor" }, host: { properties: { "class.d-field-prefix": "this.classPrefix", "class": "this.classAppearance" } }, exportAs: ["dokuFieldPrefix"], ngImport: i0 });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: DokuFieldPrefix, decorators: [{
type: Directive,
args: [{
selector: '[doku-field-prefix]',
exportAs: 'dokuFieldPrefix',
standalone: true,
}]
}], propDecorators: { appearance: [{
type: Input
}], useBackgroundColor: [{
type: Input
}], classPrefix: [{
type: HostBinding,
args: ['class.d-field-prefix']
}], classAppearance: [{
type: HostBinding,
args: ['class']
}] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZmllbGQtcHJlZml4LmRpcmVjdGl2ZS5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL2Rva3UtZnJhZ21lbnQvc3JjL2xpYi9mb3JtLWZpZWxkL2RpcmVjdGl2ZXMvZmllbGQtcHJlZml4LmRpcmVjdGl2ZS50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFDQSxPQUFPLEVBQUUsU0FBUyxFQUFFLFdBQVcsRUFBRSxLQUFLLEVBQUUsTUFBTSxlQUFlLENBQUM7O0FBTzlELE1BQU0sT0FBTyxlQUFlO0lBTDVCO1FBTUU7Ozs7Ozs7V0FPRztRQUNNLGVBQVUsR0FBZ0UsUUFBUSxDQUFDO1FBRTVGOzs7Ozs7V0FNRztRQUNNLHVCQUFrQixHQUFHLEtBQUssQ0FBQztRQUdqQixnQkFBVyxHQUFHLElBQUksQ0FBQztLQWN2QztJQVpDLElBQ2MsZUFBZTtRQUMzQixPQUFPLENBQUMsa0JBQWtCLElBQUksQ0FBQyxVQUFVLEVBQUUsRUFBRSxJQUFJLENBQUMsa0JBQWtCLEVBQUUsQ0FBQyxDQUFDO0lBQzFFLENBQUM7SUFFTyxrQkFBa0I7UUFDeEIsSUFBSSxDQUFDLElBQUksQ0FBQyxrQkFBa0I7WUFBRSxPQUFPLElBQUksQ0FBQztRQUMxQyxJQUFJLElBQUksQ0FBQyxVQUFVLEtBQUssY0FBYyxJQUFJLElBQUksQ0FBQyxVQUFVLEtBQUsscUJBQXFCLEVBQUU7WUFDbkYsT0FBTywrQkFBK0IsQ0FBQztTQUN4QztRQUNELE9BQU8sSUFBSSxDQUFDO0lBQ2QsQ0FBQzs7NEdBbENVLGVBQWU7Z0dBQWYsZUFBZTsyRkFBZixlQUFlO2tCQUwzQixTQUFTO21CQUFDO29CQUNULFFBQVEsRUFBRSxxQkFBcUI7b0JBQy9CLFFBQVEsRUFBRSxpQkFBaUI7b0JBQzNCLFVBQVUsRUFBRSxJQUFJO2lCQUNqQjs4QkFVVSxVQUFVO3NCQUFsQixLQUFLO2dCQVNHLGtCQUFrQjtzQkFBMUIsS0FBSztnQkFHYSxXQUFXO3NCQUQ3QixXQUFXO3VCQUFDLHNCQUFzQjtnQkFJckIsZUFBZTtzQkFENUIsV0FBVzt1QkFBQyxPQUFPIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgTmdDbGFzcyB9IGZyb20gJ0Bhbmd1bGFyL2NvbW1vbic7XG5pbXBvcnQgeyBEaXJlY3RpdmUsIEhvc3RCaW5kaW5nLCBJbnB1dCB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuXG5ARGlyZWN0aXZlKHtcbiAgc2VsZWN0b3I6ICdbZG9rdS1maWVsZC1wcmVmaXhdJyxcbiAgZXhwb3J0QXM6ICdkb2t1RmllbGRQcmVmaXgnLFxuICBzdGFuZGFsb25lOiB0cnVlLFxufSlcbmV4cG9ydCBjbGFzcyBEb2t1RmllbGRQcmVmaXgge1xuICAvKipcbiAgICogVGhlIGFwcGVhcmFuY2Ugb2YgdGhlIHByZWZpeCBjb250ZW50LlxuICAgKiAtIGBpbmxpbmVgLCB1c2UgZmllbGQgcGFkZGluZyAtIGlkZWFsIGZvciBpY29uLlxuICAgKiAtIGBib3JkZXItYmxvY2tgLCBoYXMgb3duIHBhZGRpbmcgYW5kIGJvcmRlciBhcyBhIHNlcGFyYXRvciAtIGlkZWFsIGZvciB0ZXh0IGxpa2UgXCJJRFJcIi5cbiAgICogLSBgYmxvY2tgLCB0aGUgbG9va3Mgd2lsbCBiZSBiYXNlZCBvbiB0aGUgcHJvdmlkZWQgY29udGVudCAtIGlkZWFsIGZvciBjb21wb25lbnQgbGlrZSBCdXR0b24uXG4gICAqIC0gYGJvcmRlci1ibG9jay1pbnNpZGVgLCBsb29rcyBsaWtlIGJvcmRlciBibG9jayBidXQgbm8gcGFkZGluZ1xuICAgKiBhbmQgaW5zaWRlIHRoZSB3cmFwcGVyIGJvcmRlciAtIGlkZWFsIGZvciBzZWxlY3QgY29tcG9uZW50LlxuICAgKi9cbiAgQElucHV0KCkgYXBwZWFyYW5jZTogJ2lubGluZScgfCAnYm9yZGVyLWJsb2NrJyB8ICdibG9jaycgfCAnYm9yZGVyLWJsb2NrLWluc2lkZScgPSAnaW5saW5lJztcblxuICAvKipcbiAgICogV2hldGhlciB0byB1c2UgYmFja2dyb3VuZCBjb2xvci4gU3VwcG9ydCBpcyBsaW1pdGVkIGJ5IGFwcGVhcmFuY2UuXG4gICAqXG4gICAqIFN1cHBvcnRlZCBhcHBlYXJhbmNlczpcbiAgICogLSBgYm9yZGVyLWJsb2NrYFxuICAgKiAtIGBib3JkZXItYmxvY2staW5zaWRlYFxuICAgKi9cbiAgQElucHV0KCkgdXNlQmFja2dyb3VuZENvbG9yID0gZmFsc2U7XG5cbiAgQEhvc3RCaW5kaW5nKCdjbGFzcy5kLWZpZWxkLXByZWZpeCcpXG4gIHByb3RlY3RlZCByZWFkb25seSBjbGFzc1ByZWZpeCA9IHRydWU7XG5cbiAgQEhvc3RCaW5kaW5nKCdjbGFzcycpXG4gIHByb3RlY3RlZCBnZXQgY2xhc3NBcHBlYXJhbmNlKCk6IE5nQ2xhc3NbJ25nQ2xhc3MnXSB7XG4gICAgcmV0dXJuIFtgZC1maWVsZC1wcmVmaXgtJHt0aGlzLmFwcGVhcmFuY2V9YCwgdGhpcy5nZXRCYWNrZ3JvdW5kQ2xhc3MoKV07XG4gIH1cblxuICBwcml2YXRlIGdldEJhY2tncm91bmRDbGFzcygpIHtcbiAgICBpZiAoIXRoaXMudXNlQmFja2dyb3VuZENvbG9yKSByZXR1cm4gbnVsbDtcbiAgICBpZiAodGhpcy5hcHBlYXJhbmNlID09PSAnYm9yZGVyLWJsb2NrJyB8fCB0aGlzLmFwcGVhcmFuY2UgPT09ICdib3JkZXItYmxvY2staW5zaWRlJykge1xuICAgICAgcmV0dXJuICdkLWZpZWxkLXByZWZpeC11c2UtYmFja2dyb3VuZCc7XG4gICAgfVxuICAgIHJldHVybiBudWxsO1xuICB9XG59XG4iXX0=