@alyle/ui
Version:
Minimal Design, a set of components for Angular
374 lines (368 loc) • 18.9 kB
JavaScript
import * as i0 from '@angular/core';
import { InjectionToken, forwardRef, EventEmitter, ViewChild, Output, Input, Inject, ChangeDetectionStrategy, ViewEncapsulation, Component, NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import * as i1 from '@alyle/ui';
import { LY_COMMON_STYLES, st2c, StyleCollection, mixinDisableRipple, StyleRenderer, Style, LyCommonModule } from '@alyle/ui';
import { __decorate } from 'tslib';
import { NG_VALUE_ACCESSOR } from '@angular/forms';
import { coerceBooleanProperty } from '@angular/cdk/coercion';
import * as i2 from '@angular/cdk/platform';
/** Injection token to be used to override the default options for `ly-checkbox`. */
const LY_CHECKBOX_DEFAULT_OPTIONS = new InjectionToken('ly-checkbox-default-options', {
providedIn: 'root',
factory: LY_CHECKBOX_DEFAULT_OPTIONS_FACTORY,
});
/** @docs-private */
function LY_CHECKBOX_DEFAULT_OPTIONS_FACTORY() {
return {
color: 'accent'
};
}
const STYLE_PRIORITY = -2;
const DEFAULT_DISABLE_RIPPLE = false;
// Default checkbox configuration.
const defaults = LY_CHECKBOX_DEFAULT_OPTIONS_FACTORY();
const STYLES = (theme, ref) => {
const checkbox = ref.selectorsOf(STYLES);
const { after } = theme;
return {
$name: LyCheckbox.и,
$priority: STYLE_PRIORITY,
root: () => (_className) => `${_className}{display:inline-flex;-webkit-tap-highlight-color:transparent;}${_className}${checkbox.disabled}:not(${checkbox.checked}) ${checkbox.icon}:before{color:${theme.disabled.contrast};}${_className}${checkbox.disabled}{pointer-events:none;}${_className}${checkbox.disabled} ${checkbox.layout}{color:${theme.text.secondary};}${_className}${checkbox.disabled}${checkbox.indeterminate} ${checkbox.icon}:before,${_className}${checkbox.disabled}${checkbox.checked} ${checkbox.icon}:before{border:0;background:${theme.disabled.contrast};}${_className}${checkbox.onFocusByKeyboard} ${checkbox.icon}::after{box-shadow:0 0 0 12px;opacity:.13;border-radius:50%;}${_className}:not(${checkbox.checked}) ${checkbox.icon}{color:${theme.text.secondary};}${_className}${checkbox.checked} ${checkbox.icon}::before,${_className}${checkbox.indeterminate} ${checkbox.icon}::before{background:currentColor;-webkit-print-color-adjust:exact;color-adjust:exact;}${_className}${checkbox.checked} ${checkbox.icon} polyline,${_className}${checkbox.indeterminate} ${checkbox.icon} polyline{stroke-dashoffset:0;}${st2c(((theme.checkbox
&& theme.checkbox.root
&& (theme.checkbox.root instanceof StyleCollection
? theme.checkbox.root.setTransformer(fn => fn(checkbox))
: theme.checkbox.root(checkbox)))), `${_className}`)}`,
layout: () => (_className) => `${_className}{display:inline-flex;align-items:baseline;cursor:pointer;user-select:none;white-space:nowrap;}${_className} ${checkbox.label}{user-select:auto;}`,
icon: (_className) => `${_className}{position:relative;margin:auto;margin-${after}:8px;width:16px;height:16px;user-select:none;}${_className}::before,${_className}::after{content:'';}${st2c((LY_COMMON_STYLES.fill), `${_className}::before,${_className}::after`)}${_className}::before,${_className}::after{width:16px;height:16px;margin:auto;box-sizing:border-box;}${_className}::before{border:solid 2px;border-radius:2px;}${_className} svg{position:absolute;left:0;}${_className} svg polyline{fill:none;stroke:${theme.background.primary.default};stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:18px;stroke-dashoffset:18px;}`,
label: (_className) => `${_className}{line-height:24px;}`,
unchecked: null,
checked: null,
indeterminate: null,
input: LY_COMMON_STYLES.visuallyHidden,
onFocusByKeyboard: null,
disabled: () => (_className) => `${_className} ${checkbox.input}{visibility:hidden;}${_className} ${checkbox.icon}{color:inherit !important;}`,
animations: () => (_className) => `${_className} ${checkbox.icon} svg polyline{transition:all ${theme.animations.durations.complex}ms ${theme.animations.curves.deceleration};transform:rotate(0deg);transform-origin:center;}`,
indeterminateToUnchecked: null,
indeterminateToChecked: null,
checkedToUnChecked: null,
checkedToIndeterminate: null,
uncheckedToChecked: null,
uncheckedToIndeterminate: null,
};
};
/**
* This allows it to support [(ngModel)].
* @ignore
*/
const LY_CHECKBOX_CONTROL_VALUE_ACCESSOR = {
provide: NG_VALUE_ACCESSOR,
useExisting: forwardRef(() => LyCheckbox),
multi: true
};
/** Change event object emitted by LyCheckbox. */
class LyCheckboxChange {
}
/** @docs-private */
class LyCheckboxBase {
constructor(_theme, _ngZone, _platform) {
this._theme = _theme;
this._ngZone = _ngZone;
this._platform = _platform;
}
}
/** @docs-private */
const LyCheckboxMixinBase = mixinDisableRipple(LyCheckboxBase);
/**
* @dynamic
*/
class LyCheckbox extends LyCheckboxMixinBase {
/** @ignore */
static { this.и = 'LyCheckbox'; }
/**
* Whether the checkbox is checked.
*/
get checked() { return this._checked; }
set checked(val) {
const newVal = coerceBooleanProperty(val);
if (newVal !== this.checked) {
this._checked = newVal;
this._updateCheckedState();
this._markForCheck();
}
}
get indeterminate() {
return this._indeterminate;
}
set indeterminate(value) {
const newVal = coerceBooleanProperty(value);
if (newVal !== this.indeterminate) {
this._indeterminate = newVal;
this.indeterminateChange.emit(this._indeterminate);
this._updateCheckboxState();
this._markForCheck();
}
}
get required() {
return this._required;
}
set required(val) {
this._required = coerceBooleanProperty(val);
}
get disabled() {
return this._disabled;
}
set disabled(val) {
const newVal = coerceBooleanProperty(val);
if (newVal !== this.disabled) {
this._disabled = newVal;
if (newVal) {
this._renderer.addClass(this._el.nativeElement, this.classes.disabled);
}
else {
this._renderer.removeClass(this._el.nativeElement, this.classes.disabled);
}
this._markForCheck();
}
}
constructor(_commonStyles, _theme, _el, _renderer, _changeDetectorRef, _focusState, sRenderer, ngZone, platform, _options) {
super(_theme, ngZone, platform);
this._commonStyles = _commonStyles;
this._el = _el;
this._renderer = _renderer;
this._changeDetectorRef = _changeDetectorRef;
this._focusState = _focusState;
this.sRenderer = sRenderer;
this._options = _options;
/**
* styles
* @ignore
*/
this.classes = this._theme.renderStyleSheet(STYLES);
this._currentCheckState = "Init" /* CheckboxState.Init */;
this.name = null;
this._indeterminate = false;
/** Event emitted when the checkbox's `checked` value changes. */
this.change = new EventEmitter();
/** Event emitted when the checkbox's `indeterminate` value changes. */
this.indeterminateChange = new EventEmitter();
this._onTouched = () => { };
this._controlValueAccessorChangeFn = () => { };
this._options = this._options || defaults;
this._triggerElement = this._el;
this._rippleConfig = {
centered: true,
radius: 'containerSize',
percentageToIncrease: 150
};
}
ngOnInit() {
this._renderer.addClass(this._el.nativeElement, this.classes.root);
// set default color
if (!this.color) {
this.color = this._options?.color || defaults.color;
}
}
ngAfterViewInit() {
const focusState = this._focusState.listen(this._inputElement, this._el);
if (focusState) {
focusState.subscribe((event) => {
if (this._onFocusByKeyboardState === true) {
this._renderer.removeClass(this._el.nativeElement, this.classes.onFocusByKeyboard);
this._onFocusByKeyboardState = false;
}
if (event === 'keyboard') {
this._onFocusByKeyboardState = true;
this._renderer.addClass(this._el.nativeElement, this.classes.onFocusByKeyboard);
}
this._onTouched();
});
}
this._rippleContainer = this._innerContainer;
// set default disable ripple
if (this.disableRipple == null) {
this.disableRipple = DEFAULT_DISABLE_RIPPLE;
}
this._renderer.addClass(this._el.nativeElement, this.classes.animations);
}
ngOnDestroy() {
this._focusState.unlisten(this._el);
this._removeRippleEvents();
}
/** @docs-private */
writeValue(value) {
this.checked = !!value;
}
/** @docs-private */
registerOnChange(fn) {
this._controlValueAccessorChangeFn = fn;
}
/** @docs-private */
registerOnTouched(fn) {
this._onTouched = fn;
}
/** @docs-private */
setDisabledState(isDisabled) {
this.disabled = isDisabled;
}
/** Toggles the `checked` state of the checkbox. */
toggle() {
this.checked = !this.checked;
this._controlValueAccessorChangeFn(this.checked);
}
_onInputClick(event) {
event.stopPropagation();
if (!this.disabled) {
if (this.indeterminate) {
Promise.resolve().then(() => {
this._indeterminate = false;
this._updateCheckboxState();
this.indeterminateChange.emit(this._indeterminate);
});
}
this.checked = !this.checked;
this._emitChangeEvent();
}
this._markForCheck();
}
_onChange(event) {
event.stopPropagation();
}
_emitChangeEvent() {
this._controlValueAccessorChangeFn(this.checked);
this.change.emit({
source: this,
checked: this.checked
});
}
_updateCheckedState() {
this.sRenderer.toggleClass(this.classes.checked, !!this.checked);
this.sRenderer.toggleClass(this.classes.unchecked, !this.checked);
}
_updateCheckboxState() {
const oldState = this._currentCheckState;
const newState = this.indeterminate
? "Indeterminate" /* CheckboxState.Indeterminate */
: this.checked
? "Checked" /* CheckboxState.Checked */
: "Unchecked" /* CheckboxState.Unchecked */;
if (oldState === newState) {
return;
}
this.sRenderer.toggleClass(this.classes.indeterminate, newState === "Indeterminate" /* CheckboxState.Indeterminate */);
let newClass = null;
switch (oldState) {
case "Init" /* CheckboxState.Init */:
break;
case "Indeterminate" /* CheckboxState.Indeterminate */:
newClass = newState === "Checked" /* CheckboxState.Checked */
? this.classes.indeterminateToChecked
: this.classes.indeterminateToUnchecked;
break;
case "Checked" /* CheckboxState.Checked */:
newClass = newState === "Indeterminate" /* CheckboxState.Indeterminate */
? this.classes.checkedToIndeterminate
: this.classes.checkedToUnChecked;
break;
case "Unchecked" /* CheckboxState.Unchecked */:
newClass = newState === "Indeterminate" /* CheckboxState.Indeterminate */
? this.classes.uncheckedToIndeterminate
: this.classes.uncheckedToChecked;
break;
}
if (newClass) {
this.sRenderer.updateClass(newClass, this._currentCheckStateClass);
this._currentCheckStateClass = newClass;
const animationClass = this._currentCheckStateClass;
this._ngZone.runOutsideAngular(() => {
setTimeout(() => {
this.sRenderer.removeClass(animationClass);
}, 1000);
});
}
this._currentCheckState = newState;
}
_markForCheck() {
this._changeDetectorRef.markForCheck();
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: LyCheckbox, deps: [{ token: i1.LyCoreStyles }, { token: i1.LyTheme2 }, { token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.ChangeDetectorRef }, { token: i1.LyFocusState }, { token: i1.StyleRenderer }, { token: i0.NgZone }, { token: i2.Platform }, { token: LY_CHECKBOX_DEFAULT_OPTIONS }], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.10", type: LyCheckbox, isStandalone: false, selector: "ly-checkbox", inputs: { disableRipple: "disableRipple", value: "value", name: "name", color: "color", checked: "checked", indeterminate: "indeterminate", required: "required", disabled: "disabled" }, outputs: { change: "change", indeterminateChange: "indeterminateChange" }, providers: [
StyleRenderer,
LY_CHECKBOX_CONTROL_VALUE_ACCESSOR,
], viewQueries: [{ propertyName: "_innerContainer", first: true, predicate: ["innerContainer"], descendants: true }, { propertyName: "_inputElement", first: true, predicate: ["input"], descendants: true }], exportAs: ["lyCheckbox"], usesInheritance: true, ngImport: i0, template: "\n<label [className]=\"classes.layout\">\n <input #input\n [className]=\"classes.input\"\n type=\"checkbox\"\n [checked]=\"checked\"\n [required]=\"required\"\n [attr.value]=\"value\"\n [attr.name]=\"name\"\n [disabled]=\"disabled\"\n (click)=\"_onInputClick($event)\"\n (change)=\"_onChange($event)\"\n >\n <div #innerContainer [className]=\"classes.icon\">\n <svg width=\"16px\" height=\"16px\" viewBox=\"0 0 20 20\">\n <polyline [attr.points]=\"indeterminate ? '5 10 10 10 15 10' : '4 11 8 15 16 6'\"></polyline>\n </svg>\n </div>\n <div #label [class]=\"classes.label\">\n <ng-content></ng-content>\n </div>\n</label>", changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
}
__decorate([
Style(val => (theme, ref) => {
const checkbox = ref.selectorsOf(STYLES);
const color = theme.colorOf(val);
if (theme.checkbox && theme.checkbox.color) {
return theme.checkbox.color(checkbox, color);
}
throw new Error(`${LyCheckbox.и}: styles theme.checkbox.color is undefined`);
}, STYLE_PRIORITY)
], LyCheckbox.prototype, "color", void 0);
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: LyCheckbox, decorators: [{
type: Component,
args: [{ selector: 'ly-checkbox', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [
StyleRenderer,
LY_CHECKBOX_CONTROL_VALUE_ACCESSOR,
], exportAs: 'lyCheckbox', inputs: [
'disableRipple'
], standalone: false, template: "\n<label [className]=\"classes.layout\">\n <input #input\n [className]=\"classes.input\"\n type=\"checkbox\"\n [checked]=\"checked\"\n [required]=\"required\"\n [attr.value]=\"value\"\n [attr.name]=\"name\"\n [disabled]=\"disabled\"\n (click)=\"_onInputClick($event)\"\n (change)=\"_onChange($event)\"\n >\n <div #innerContainer [className]=\"classes.icon\">\n <svg width=\"16px\" height=\"16px\" viewBox=\"0 0 20 20\">\n <polyline [attr.points]=\"indeterminate ? '5 10 10 10 15 10' : '4 11 8 15 16 6'\"></polyline>\n </svg>\n </div>\n <div #label [class]=\"classes.label\">\n <ng-content></ng-content>\n </div>\n</label>" }]
}], ctorParameters: () => [{ type: i1.LyCoreStyles }, { type: i1.LyTheme2 }, { type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i0.ChangeDetectorRef }, { type: i1.LyFocusState }, { type: i1.StyleRenderer }, { type: i0.NgZone }, { type: i2.Platform }, { type: undefined, decorators: [{
type: Inject,
args: [LY_CHECKBOX_DEFAULT_OPTIONS]
}] }], propDecorators: { _innerContainer: [{
type: ViewChild,
args: ['innerContainer']
}], value: [{
type: Input
}], name: [{
type: Input
}], color: [{
type: Input
}], checked: [{
type: Input
}], indeterminate: [{
type: Input
}], required: [{
type: Input
}], disabled: [{
type: Input
}], change: [{
type: Output
}], indeterminateChange: [{
type: Output
}], _inputElement: [{
type: ViewChild,
args: ['input']
}] } });
class LyCheckboxModule {
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: LyCheckboxModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.10", ngImport: i0, type: LyCheckboxModule, declarations: [LyCheckbox], imports: [CommonModule,
LyCommonModule], exports: [LyCommonModule,
LyCheckbox] }); }
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: LyCheckboxModule, imports: [CommonModule,
LyCommonModule, LyCommonModule] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: LyCheckboxModule, decorators: [{
type: NgModule,
args: [{
declarations: [
LyCheckbox
],
imports: [
CommonModule,
LyCommonModule
],
exports: [
LyCommonModule,
LyCheckbox
]
}]
}] });
/**
* Generated bundle index. Do not edit.
*/
export { LY_CHECKBOX_CONTROL_VALUE_ACCESSOR, LyCheckbox, LyCheckboxBase, LyCheckboxChange, LyCheckboxMixinBase, LyCheckboxModule, STYLES };
//# sourceMappingURL=alyle-ui-checkbox.mjs.map