@mantic-ui/angular
Version:
mantic UI for Angular
1,140 lines (1,115 loc) • 544 kB
JavaScript
import * as i0 from '@angular/core';
import { inject, ElementRef, Injectable, Optional, Inject, Directive, Input, HostBinding, Component, EventEmitter, HostListener, Output, ContentChild, ContentChildren, ViewChild, SkipSelf, ViewContainerRef, makeEnvironmentProviders, ViewChildren, input, TemplateRef, Pipe, ChangeDetectionStrategy, viewChild, effect, InjectionToken, Injector, signal, NgModule, LOCALE_ID } from '@angular/core';
import { Subject, ReplaySubject, fromEvent, animationFrameScheduler, BehaviorSubject, throttleTime, delay, merge, distinctUntilChanged, race } from 'rxjs';
import { takeUntil, filter, map } from 'rxjs/operators';
import * as i1$3 from '@angular/common';
import { NgClass, NgTemplateOutlet, DatePipe, AsyncPipe, CommonModule, NgComponentOutlet, registerLocaleData } from '@angular/common';
import * as i1 from '@fortawesome/angular-fontawesome';
import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
import * as i1$1 from '@angular/forms';
import { FormsModule } from '@angular/forms';
import * as i1$4 from '@angular/router';
import { RouterLink, NavigationEnd, UrlSegment, TitleStrategy, DefaultUrlSerializer, UrlSerializer } from '@angular/router';
import * as i1$2 from '@angular/platform-browser';
const toBoolean = (value) => {
return value === '' || value === true || value?.toString().toLowerCase() === 'true';
};
class SortedClassesService {
constructor() {
this.entries = new Map();
this.elementRef = inject(ElementRef);
}
/**
* Registers one or more keys. The keys will only registered if they are not already registered.
*/
registerFallback(...keys) {
for (const key of keys) {
if (this.has(key)) {
continue;
}
this.registerEntry(key);
}
return this;
}
/**
* Registers one or more keys. If they are already registered, the order will be updated.
*/
register(...keys) {
for (const key of keys) {
const existingEntry = this.getEntry(key);
if (existingEntry) {
for (let [_, entry] of this.entries) {
if (entry.order > existingEntry.order) {
entry.order--;
}
}
existingEntry.order = this.entries.size - 1;
}
else {
this.registerEntry(key);
}
}
return this;
}
registerFixed(...keys) {
for (const key of keys) {
this.registerEntry(key, { fixed: true });
}
return this;
}
unregister(...keys) {
for (const key of keys) {
this.entries.delete(key.toLocaleLowerCase());
}
return this;
}
ignore(...keys) {
for (const key of keys) {
this.registerEntry(key, { ignore: true });
}
return this;
}
registerEntry(key, options) {
if (!key) {
return;
}
if (this.has(key)) {
console.warn(`'${key}' is already registered on <${this.elementRef.nativeElement.tagName}>.`);
}
const entry = {
...options,
key: key.toLocaleLowerCase(),
value: options?.fixed ? key : options?.value ?? '',
order: this.entries.size
};
this.entries.set(entry.key, entry);
}
getEntry(key) {
key = key.toLocaleLowerCase();
return this.entries.get(key);
}
set(key, value, options) {
let entry = this.getEntry(key);
if (!entry) {
console.warn(`Set an unregistered value '${key}' on <${this.elementRef.nativeElement.tagName}> is not recommended. Call register(key) method once, before using set(...) method.`);
entry = this.register(key).getEntry(key);
}
if (!entry) {
throw new Error('Entry not found #dki3kjk');
}
if (entry.fixed) {
console.error(`Can not change an fixed value '${key} on <${this.elementRef.nativeElement.tagName}>. Use register(key) instead of registerFixed(key)`);
return this;
}
if (value === true) {
entry.value = key;
}
else if (value === false || value === undefined || value === null) {
entry.value = '';
}
else {
entry.value = value.toString();
}
if (options?.refresh !== false) {
this.updateEntry(entry);
}
return this;
}
get(key) {
return this.getEntry(key)?.value;
}
has(key) {
return !!this.getEntry(key);
}
toString() {
return Array.from(this.entries.values())
.sort(SortedClassesService.sortByOrder)
.map(entry => entry.value)
.filter(value => value)
.join(' ');
}
update() {
Array.from(this.entries.values())
.filter(entry => !entry.ignore)
.sort(SortedClassesService.sortByOrder)
.forEach(entry => this.updateEntry(entry));
}
updateEntry(entry) {
const classList = this.elementRef.nativeElement.classList;
if (entry.previous) {
classList.remove(...entry.previous);
}
const values = entry.value.split(' ').filter(x => !!x);
classList.add(...values);
entry.previous = values;
}
static sortByOrder(left, right) {
return left.order > right.order ? 1 : left.order < right.order ? -1 : 0;
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: SortedClassesService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: SortedClassesService }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: SortedClassesService, decorators: [{
type: Injectable
}] });
class Destroyable {
constructor() {
this.destroySubject = new Subject();
/**
* An observable that emits when the component is destroyed.
*/
this.destroy = this.destroySubject.asObservable();
}
/**
* Pipe this method to a subject to take values until the component is destroyed.
* Example: `observable.pipe(this.takeUntilDestroy()).subscribe(...);`
* Equals to `observable.pipe(takeUntil(this.destroy)).subscribe(...);`.
*/
takeUntilDestroy() {
return takeUntil(this.destroy);
}
ngOnDestroy() {
this.destroySubject.next();
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: Destroyable, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: Destroyable }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: Destroyable, decorators: [{
type: Injectable
}] });
class BaseComponent extends Destroyable {
static { this.providers = [SortedClassesService]; }
get noClasses() {
return this.noClassesValue;
}
set noClasses(value) {
this.noClassesValue = value;
this.refreshClasses();
}
constructor(useUiClass = true) {
super();
this.classes = inject(SortedClassesService, { self: true });
this.noClassesValue = false;
this.initialized = false;
this.elementRef = inject(ElementRef);
this.validateAttributes = true;
this.tag = this.elementRef.nativeElement.tagName.toLowerCase();
if (useUiClass) {
this.classes.registerFixed('ui');
}
this.classes.register('style');
}
ngOnInit() {
this.initialized = true;
if (this.classes) {
this.readPropertiesFromAttributes();
this.refreshClasses();
}
}
readPropertiesFromAttributes() {
if (!this.validateAttributes) {
return;
}
for (let index = 0; index < this.elementRef.nativeElement.attributes.length; index++) {
const attribute = this.elementRef.nativeElement.attributes[index];
if (attribute.name.indexOf('_ng') === 0 || attribute.name.indexOf('ng-') === 0 || attribute.name.indexOf('m-') === 0 || attribute.name === 'class' || attribute.name === 'title') {
continue;
}
if (!this.classes.has(attribute.name)) {
console.warn(`Unknown attribute '${attribute.name}' on <${this.tag}> found.`, this.elementRef.nativeElement);
}
}
}
// TODO: Check usage
refreshClasses() {
if (!this.initialized) {
return;
}
this.classes.update();
}
toBoolean(value) {
return toBoolean(value);
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: BaseComponent, deps: [{ token: 'none', optional: true }], target: i0.ɵɵFactoryTarget.Directive }); }
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.0", type: BaseComponent, isStandalone: true, providers: BaseComponent.providers, usesInheritance: true, ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: BaseComponent, decorators: [{
type: Directive,
args: [{
providers: BaseComponent.providers
}]
}], ctorParameters: () => [{ type: undefined, decorators: [{
type: Optional
}, {
type: Inject,
args: ['none']
}] }] });
/**
* @deprecated Use Destroyable instead
*/
class DestroyableComponent extends Destroyable {
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: DestroyableComponent, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.0", type: DestroyableComponent, isStandalone: true, usesInheritance: true, ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: DestroyableComponent, decorators: [{
type: Directive
}] });
/**
* @deprecated Use Destroyable instead
*/
class DestroyableDirective extends Destroyable {
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: DestroyableDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.0", type: DestroyableDirective, isStandalone: true, usesInheritance: true, ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: DestroyableDirective, decorators: [{
type: Directive
}] });
class ActiveDirective {
static { this.active = 'active'; }
static { this.default = { directive: ActiveDirective, inputs: [ActiveDirective.active] }; }
constructor() {
this.classes = inject(SortedClassesService);
this.isActive = false;
this.classes.registerFallback(ActiveDirective.active);
}
get active() {
return this.isActive;
}
set active(value) {
this.isActive = toBoolean(value);
this.classes.set(ActiveDirective.active, this.isActive);
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: ActiveDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.0", type: ActiveDirective, isStandalone: true, selector: "[-m-active]", inputs: { active: "active" }, ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: ActiveDirective, decorators: [{
type: Directive,
args: [{
selector: '[-m-active]',
}]
}], ctorParameters: () => [], propDecorators: { active: [{
type: Input
}] } });
class BasicDirective {
static { this.basic = 'basic'; }
static { this.default = { directive: BasicDirective, inputs: [BasicDirective.basic] }; }
constructor() {
this.classes = inject(SortedClassesService);
this.isBasic = false;
this.classes.registerFallback(BasicDirective.basic);
}
get basic() {
return this.isBasic;
}
set basic(value) {
this.isBasic = toBoolean(value);
this.classes.set(BasicDirective.basic, this.isBasic);
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: BasicDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.0", type: BasicDirective, isStandalone: true, selector: "[-m-basic]", inputs: { basic: "basic" }, ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: BasicDirective, decorators: [{
type: Directive,
args: [{
selector: '[-m-basic]',
}]
}], ctorParameters: () => [], propDecorators: { basic: [{
type: Input
}] } });
class ColorDirective {
static { this.color = 'color'; }
static { this.default = { directive: ColorDirective, inputs: [ColorDirective.color] }; }
constructor() {
this.classes = inject(SortedClassesService);
this.classes.registerFallback(ColorDirective.color);
}
get color() {
return this.colorValue;
}
set color(value) {
this.colorValue = value;
this.classes.set(ColorDirective.color, value);
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: ColorDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.0", type: ColorDirective, isStandalone: true, selector: "[-m-color]", inputs: { color: "color" }, ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: ColorDirective, decorators: [{
type: Directive,
args: [{
selector: '[-m-color]'
}]
}], ctorParameters: () => [], propDecorators: { color: [{
type: Input
}] } });
class DisabledDirective {
static { this.disabled = 'disabled'; }
static { this.default = { directive: DisabledDirective, inputs: [DisabledDirective.disabled] }; }
constructor() {
this.classes = inject(SortedClassesService);
this.isDisabled = false;
this.classes.registerFallback(DisabledDirective.disabled);
}
get disabled() {
return this.isDisabled;
}
set disabled(value) {
this.isDisabled = toBoolean(value);
this.classes.set(DisabledDirective.disabled, this.isDisabled);
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: DisabledDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.0", type: DisabledDirective, isStandalone: true, selector: "[-m-disabled]", inputs: { disabled: "disabled" }, ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: DisabledDirective, decorators: [{
type: Directive,
args: [{
selector: '[-m-disabled]',
}]
}], ctorParameters: () => [], propDecorators: { disabled: [{
type: Input
}] } });
class InvertedDirective {
static { this.inverted = 'inverted'; }
static { this.default = { directive: InvertedDirective, inputs: [InvertedDirective.inverted] }; }
get inverted() {
return this.isInverted ?? this.isInvertedDefault;
}
set inverted(value) {
this.isInverted = toBoolean(value);
this.classes.set(InvertedDirective.inverted, this.inverted);
}
constructor() {
this.classes = inject(SortedClassesService);
this.isInvertedDefault = false;
this.classes.registerFallback(InvertedDirective.inverted);
}
setInvertedDefault(value) {
this.isInvertedDefault = value;
this.classes.set(InvertedDirective.inverted, this.inverted);
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: InvertedDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.0", type: InvertedDirective, isStandalone: true, selector: "[-m-inverted]", inputs: { inverted: "inverted" }, ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: InvertedDirective, decorators: [{
type: Directive,
args: [{
selector: '[-m-inverted]',
}]
}], ctorParameters: () => [], propDecorators: { inverted: [{
type: Input
}] } });
class LoadingDirective {
static { this.loading = 'loading'; }
static { this.default = { directive: LoadingDirective, inputs: [LoadingDirective.loading] }; }
constructor() {
this.classes = inject(SortedClassesService);
this.isLoading = false;
this.classes.registerFallback(LoadingDirective.loading);
}
get loading() {
return this.isLoading;
}
set loading(value) {
this.isLoading = toBoolean(value);
this.classes.set(LoadingDirective.loading, this.isLoading);
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: LoadingDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.0", type: LoadingDirective, isStandalone: true, selector: "[-m-loading]", inputs: { loading: "loading" }, ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: LoadingDirective, decorators: [{
type: Directive,
args: [{
selector: '[-m-loading]',
}]
}], ctorParameters: () => [], propDecorators: { loading: [{
type: Input
}] } });
class InvertibleComponent extends BaseComponent {
static { this.providers = [...BaseComponent.providers]; }
get inverted() {
return this.isInverted;
}
set inverted(value) {
this.isInvertedChanged = true;
this.isInverted = this.toBoolean(value);
this.classes.set('inverted', this.isInverted);
}
constructor(useUiClass = true) {
super(useUiClass);
this.isInverted = false;
this.isInvertedChanged = false;
this.classes.register('inverted');
}
refreshInverted(value) {
if (this.isInvertedChanged) {
return;
}
this.inverted = value;
this.isInvertedChanged = false;
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: InvertibleComponent, deps: [{ token: 'none', optional: true }], target: i0.ɵɵFactoryTarget.Directive }); }
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.0", type: InvertibleComponent, isStandalone: true, inputs: { inverted: "inverted" }, usesInheritance: true, ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: InvertibleComponent, decorators: [{
type: Directive
}], ctorParameters: () => [{ type: undefined, decorators: [{
type: Optional
}, {
type: Inject,
args: ['none']
}] }], propDecorators: { inverted: [{
type: Input
}] } });
class ButtonBaseComponent extends InvertibleComponent {
static { this.providers = [...InvertibleComponent.providers]; }
get primary() {
return this.isPrimary;
}
set primary(value) {
this.isPrimary = this.toBoolean(value);
}
get secondary() {
return this.isSecondary;
}
set secondary(value) {
this.isSecondary = this.toBoolean(value);
}
get positive() {
return this.isPositive;
}
set positive(value) {
this.isPositive = this.toBoolean(value);
}
get negative() {
return this.isNegative;
}
set negative(value) {
this.isNegative = this.toBoolean(value);
}
get size() {
return this.sizeValue;
}
set size(value) {
this.sizeValue = value;
this.classes.set('size', value);
}
get circular() {
return this.isCircular;
}
set circular(value) {
this.isCircular = this.toBoolean(value);
}
get attachedLeft() {
return this.isAttachedLeft;
}
set attachedLeft(value) {
this.isAttachedLeft = this.toBoolean(value);
}
get attachedTop() {
return this.isAttachedTop;
}
set attachedTop(value) {
this.isAttachedTop = this.toBoolean(value);
}
get attachedRight() {
return this.isAttachedRight;
}
set attachedRight(value) {
this.isAttachedRight = this.toBoolean(value);
}
get attachedBottom() {
return this.isAttachedBottom;
}
set attachedBottom(value) {
this.isAttachedBottom = this.toBoolean(value);
}
get attached() {
return this.isAttachedTop || this.attachedBottom || this.attachedLeft || this.attachedRight;
}
constructor() {
super();
this.sizeValue = '';
this.isPrimary = false;
this.isSecondary = false;
this.isPositive = false;
this.isNegative = false;
this.isCircular = false;
this.isAttachedLeft = false;
this.isAttachedTop = false;
this.isAttachedRight = false;
this.isAttachedBottom = false;
this.button = true;
this.elementRef.nativeElement.setAttribute('tabindex', '0');
this.classes.register('size', 'primary', 'secondary', 'positive', 'negative', 'circular', 'tabindex', 'attachedLeft', 'attachedRight', 'attachedTop', 'attachedBottom');
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: ButtonBaseComponent, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.0", type: ButtonBaseComponent, isStandalone: true, inputs: { primary: "primary", secondary: "secondary", positive: "positive", negative: "negative", size: "size", circular: "circular", attachedLeft: "attachedLeft", attachedTop: "attachedTop", attachedRight: "attachedRight", attachedBottom: "attachedBottom" }, host: { properties: { "class.primary": "this.primary", "class.secondary": "this.secondary", "class.positive": "this.positive", "class.negative": "this.negative", "class.circular": "this.circular", "class.left": "this.attachedLeft", "class.top": "this.attachedTop", "class.right": "this.attachedRight", "class.bottom": "this.attachedBottom", "class.attached": "this.attached", "class.button": "this.button" } }, providers: ButtonBaseComponent.providers, usesInheritance: true, hostDirectives: [{ directive: ColorDirective, inputs: ["color", "color"] }, { directive: BasicDirective, inputs: ["basic", "basic"] }, { directive: InvertedDirective, inputs: ["inverted", "inverted"] }, { directive: DisabledDirective, inputs: ["disabled", "disabled"] }, { directive: LoadingDirective, inputs: ["loading", "loading"] }, { directive: ActiveDirective, inputs: ["active", "active"] }], ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: ButtonBaseComponent, decorators: [{
type: Directive,
args: [{
hostDirectives: [ColorDirective.default, BasicDirective.default, InvertedDirective.default, DisabledDirective.default, LoadingDirective.default, ActiveDirective.default],
providers: ButtonBaseComponent.providers
}]
}], ctorParameters: () => [], propDecorators: { primary: [{
type: Input
}, {
type: HostBinding,
args: ['class.primary']
}], secondary: [{
type: Input
}, {
type: HostBinding,
args: ['class.secondary']
}], positive: [{
type: Input
}, {
type: HostBinding,
args: ['class.positive']
}], negative: [{
type: Input
}, {
type: HostBinding,
args: ['class.negative']
}], size: [{
type: Input
}], circular: [{
type: Input
}, {
type: HostBinding,
args: ['class.circular']
}], attachedLeft: [{
type: Input
}, {
type: HostBinding,
args: ['class.left']
}], attachedTop: [{
type: Input
}, {
type: HostBinding,
args: ['class.top']
}], attachedRight: [{
type: Input
}, {
type: HostBinding,
args: ['class.right']
}], attachedBottom: [{
type: Input
}, {
type: HostBinding,
args: ['class.bottom']
}], attached: [{
type: HostBinding,
args: ['class.attached']
}], button: [{
type: HostBinding,
args: ['class.button']
}] } });
class BaseDirective extends Destroyable {
static { this.providers = [SortedClassesService]; }
get noClasses() {
return this.noClassesValue;
}
set noClasses(value) {
this.noClassesValue = value;
this.refreshClasses();
}
constructor(useUiClass = true) {
super();
this.classes = inject(SortedClassesService, { self: true });
this.noClassesValue = false;
this.initialized = false;
this.elementRef = inject(ElementRef, { self: true });
this.validateAttributes = true;
this.tag = this.elementRef.nativeElement.tagName.toLowerCase();
if (useUiClass) {
this.classes.registerFixed('ui');
}
}
ngOnInit() {
this.initialized = true;
this.readPropertiesFromAttributes();
this.refreshClasses();
}
readPropertiesFromAttributes() {
if (!this.validateAttributes) {
return;
}
for (let index = 0; index < this.elementRef.nativeElement.attributes.length; index++) {
const attribute = this.elementRef.nativeElement.attributes[index];
if (attribute.name.indexOf('_ng') === 0 || attribute.name.indexOf('ng-') === 0 || attribute.name.indexOf('m-') === 0 || attribute.name === 'class' || attribute.name === 'title') {
continue;
}
if (!this.classes.has(attribute.name)) {
console.warn(`Unknown attribute '${attribute.name}' on <${this.tag}> found.`, this.elementRef.nativeElement);
}
}
}
refreshClasses() {
if (!this.initialized) {
return;
}
this.classes.update();
}
toBoolean(value) {
return toBoolean(value);
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: BaseDirective, deps: [{ token: 'none', optional: true }], target: i0.ɵɵFactoryTarget.Directive }); }
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.0", type: BaseDirective, isStandalone: true, usesInheritance: true, ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: BaseDirective, decorators: [{
type: Directive
}], ctorParameters: () => [{ type: undefined, decorators: [{
type: Optional
}, {
type: Inject,
args: ['none']
}] }] });
class AnimationComponent extends BaseComponent {
constructor() {
super(false);
this.hidden = true;
this.classes.registerFixed('content');
this.classes.register('hidden', 'direction');
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: AnimationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.0", type: AnimationComponent, isStandalone: true, selector: "m-animation", inputs: { hidden: "hidden", direction: "direction" }, host: { properties: { "class.hidden": "this.hidden" } }, providers: [...BaseComponent.providers], usesInheritance: true, ngImport: i0, template: "<ng-content></ng-content>", styles: [""] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: AnimationComponent, decorators: [{
type: Component,
args: [{ selector: 'm-animation', providers: [...BaseComponent.providers], template: "<ng-content></ng-content>" }]
}], ctorParameters: () => [], propDecorators: { hidden: [{
type: Input
}, {
type: HostBinding,
args: ['class.hidden']
}], direction: [{
type: Input
}] } });
class BreadcrumbComponent extends BaseComponent {
constructor() {
super();
this.classes.registerFixed('breadcrumb');
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: BreadcrumbComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.0", type: BreadcrumbComponent, isStandalone: true, selector: "m-breadcrumb", providers: [...BaseComponent.providers], usesInheritance: true, ngImport: i0, template: "<!-- TODO: Not yet implemented -->\r\n<!-- <a class=\"section\">Home</a>-->\r\n<!-- <i class=\"right angle icon divider\"></i>-->\r\n<!-- <a class=\"section\">Store</a>-->\r\n<!-- <i class=\"right angle icon divider\"></i>-->\r\n<!-- <div class=\"active section\">T-Shirt</div>-->\r\n", styles: [""] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: BreadcrumbComponent, decorators: [{
type: Component,
args: [{ selector: 'm-breadcrumb', providers: [...BaseComponent.providers], template: "<!-- TODO: Not yet implemented -->\r\n<!-- <a class=\"section\">Home</a>-->\r\n<!-- <i class=\"right angle icon divider\"></i>-->\r\n<!-- <a class=\"section\">Store</a>-->\r\n<!-- <i class=\"right angle icon divider\"></i>-->\r\n<!-- <div class=\"active section\">T-Shirt</div>-->\r\n" }]
}], ctorParameters: () => [] });
class Key {
static { this.space = new Key('Space'); }
static { this.enter = new Key('Enter'); }
static { this.escape = new Key('Escape'); }
constructor(code) {
this.code = code;
}
is(event) {
return Key.is(event, this);
}
static is(event, ...keys) {
return keys.some(key => event.key === (typeof key === 'string' ? key : key.code));
}
}
class ToggleButtonComponent extends ButtonBaseComponent {
get active() {
return this.activeDirective.active;
}
set active(value) {
this.activeDirective.active = value;
}
get checked() {
return this.active;
}
set checked(value) {
this.active = value;
}
constructor() {
super();
this.activeDirective = inject(ActiveDirective, { self: true });
this.activeTemplate = null;
this.checkedChange = new EventEmitter();
this.classes.register('checked')
.registerFixed('toggle');
}
toggle() {
if (this.checked) {
this.uncheck();
}
else {
this.check();
}
}
onKeyDown(event) {
if (Key.is(event, Key.space, Key.enter)) {
this.toggle();
event.preventDefault();
}
}
check() {
if (this.checked) {
return;
}
this.checked = true;
this.checkedChange.emit(this.checked);
}
uncheck() {
if (!this.checked) {
return;
}
this.checked = false;
this.checkedChange.emit(this.checked);
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: ToggleButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.0", type: ToggleButtonComponent, isStandalone: true, selector: "m-toggle-button", inputs: { checked: "checked" }, outputs: { checkedChange: "checkedChange" }, host: { listeners: { "click": "toggle()", "keydown": "onKeyDown($event)" }, properties: { "class.checked": "this.checked" } }, providers: [...ButtonBaseComponent.providers], queries: [{ propertyName: "activeTemplate", first: true, predicate: ["active"], descendants: true }], usesInheritance: true, ngImport: i0, template: "@if (!active || !activeTemplate) {\n <ng-content></ng-content>\n} @else {\n <ng-template [ngTemplateOutlet]=\"activeTemplate\"></ng-template>\n}\n", styles: [""] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: ToggleButtonComponent, decorators: [{
type: Component,
args: [{ selector: 'm-toggle-button', imports: [], providers: [...ButtonBaseComponent.providers], template: "@if (!active || !activeTemplate) {\n <ng-content></ng-content>\n} @else {\n <ng-template [ngTemplateOutlet]=\"activeTemplate\"></ng-template>\n}\n" }]
}], ctorParameters: () => [], propDecorators: { activeTemplate: [{
type: ContentChild,
args: ['active']
}], checked: [{
type: Input
}, {
type: HostBinding,
args: ['class.checked']
}], checkedChange: [{
type: Output
}], toggle: [{
type: HostListener,
args: ['click']
}], onKeyDown: [{
type: HostListener,
args: ['keydown', ['$event']]
}] } });
class ButtonGroupComponent extends BaseComponent {
get attachedLeft() {
return this.isAttachedLeft;
}
set attachedLeft(value) {
this.isAttachedLeft = this.toBoolean(value);
}
get attachedTop() {
return this.isAttachedTop;
}
set attachedTop(value) {
this.isAttachedTop = this.toBoolean(value);
}
get attachedRight() {
return this.isAttachedRight;
}
set attachedRight(value) {
this.isAttachedRight = this.toBoolean(value);
}
get attachedBottom() {
return this.isAttachedBottom;
}
set attachedBottom(value) {
this.isAttachedBottom = this.toBoolean(value);
}
get attached() {
return this.isAttachedTop || this.attachedBottom || this.attachedLeft || this.attachedRight;
}
get toggleButtons() {
return this.toggleButtonsValue;
}
set toggleButtons(query) {
this.toggleButtonsChangeSubscription?.unsubscribe();
this.toggleButtonsChangeSubscription = query?.changes.subscribe(() => this.subscribeToggleButtons());
this.toggleButtonsValue = query;
this.subscribeToggleButtons();
}
constructor() {
super();
this.isAttachedLeft = false;
this.isAttachedTop = false;
this.isAttachedRight = false;
this.isAttachedBottom = false;
this.classes.registerFixed('buttons');
}
subscribeToggleButtons() {
this.toggleButtonSubscriptions?.forEach(subscription => subscription.unsubscribe());
this.toggleButtonSubscriptions = this.toggleButtons?.map(button => button.checkedChange.subscribe(value => value ? this.uncheckOthers(button) : this.keepOneChecked()));
}
uncheckOthers(button) {
this.toggleButtons?.filter(x => x !== button).forEach(x => x.uncheck());
}
keepOneChecked() {
const buttons = Array.from(this.toggleButtons ?? []);
if (buttons.length > 0 && buttons.every(button => !button.checked)) {
buttons[0].check();
}
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: ButtonGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.0", type: ButtonGroupComponent, isStandalone: true, selector: "m-button-group", inputs: { attachedLeft: "attachedLeft", attachedTop: "attachedTop", attachedRight: "attachedRight", attachedBottom: "attachedBottom" }, host: { properties: { "class.left": "this.attachedLeft", "class.top": "this.attachedTop", "class.right": "this.attachedRight", "class.bottom": "this.attachedBottom", "class.attached": "this.attached" } }, providers: [...BaseComponent.providers], queries: [{ propertyName: "toggleButtons", predicate: ToggleButtonComponent }], usesInheritance: true, hostDirectives: [{ directive: ColorDirective, inputs: ["color", "color"] }], ngImport: i0, template: "<ng-content></ng-content>", styles: [":host{flex-wrap:wrap}\n"] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: ButtonGroupComponent, decorators: [{
type: Component,
args: [{ selector: 'm-button-group', hostDirectives: [ColorDirective.default], providers: [...BaseComponent.providers], template: "<ng-content></ng-content>", styles: [":host{flex-wrap:wrap}\n"] }]
}], ctorParameters: () => [], propDecorators: { attachedLeft: [{
type: Input
}, {
type: HostBinding,
args: ['class.left']
}], attachedTop: [{
type: Input
}, {
type: HostBinding,
args: ['class.top']
}], attachedRight: [{
type: Input
}, {
type: HostBinding,
args: ['class.right']
}], attachedBottom: [{
type: Input
}, {
type: HostBinding,
args: ['class.bottom']
}], attached: [{
type: HostBinding,
args: ['class.attached']
}], toggleButtons: [{
type: ContentChildren,
args: [ToggleButtonComponent]
}] } });
class FluidDirective {
static { this.fluid = 'fluid'; }
static { this.default = { directive: FluidDirective, inputs: [FluidDirective.fluid] }; }
constructor() {
this.classes = inject(SortedClassesService);
this.isFluid = false;
this.classes.registerFallback(FluidDirective.fluid);
}
get fluid() {
return this.isFluid;
}
set fluid(value) {
this.isFluid = toBoolean(value);
this.classes.set(FluidDirective.fluid, this.isFluid);
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: FluidDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.0", type: FluidDirective, isStandalone: true, selector: "[-m-fluid]", inputs: { fluid: "fluid" }, ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: FluidDirective, decorators: [{
type: Directive,
args: [{
selector: '[-m-fluid]',
}]
}], ctorParameters: () => [], propDecorators: { fluid: [{
type: Input
}] } });
class PointingDirective {
static { this.pointing = 'pointing'; }
static { this.default = { directive: PointingDirective, inputs: [PointingDirective.pointing] }; }
constructor() {
this.classes = inject(SortedClassesService);
this.isPointing = false;
this.classes.registerFallback(PointingDirective.pointing);
}
get pointing() {
return this.isPointing;
}
set pointing(value) {
this.isPointing = toBoolean(value);
this.classes.set(PointingDirective.pointing, this.isPointing);
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: PointingDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.0", type: PointingDirective, isStandalone: true, selector: "[-m-pointing]", inputs: { pointing: "pointing" }, ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: PointingDirective, decorators: [{
type: Directive,
args: [{
selector: '[-m-pointing]',
}]
}], ctorParameters: () => [], propDecorators: { pointing: [{
type: Input
}] } });
class IconComponent {
constructor() {
this.iconClass = 'icon';
}
get icon() {
return this.mIcon ?? this.faIcon;
}
set icon(value) {
if (typeof value === 'string') {
this.mIcon = value;
}
else {
this.faIcon = value;
}
}
get size() {
return this.mSize ?? this.faSize;
}
set size(value) {
switch (value) {
case 'mini':
case 'tiny':
case 'small':
this.mSize = value;
this.faSize = 'xs';
break;
case 'large':
case 'lg':
this.mSize = 'large';
this.faSize = 'lg';
break;
case 'big':
case '2x':
this.mSize = 'big';
this.faSize = '2x';
break;
case 'huge':
case '4x':
this.mSize = 'huge';
this.faSize = '4x';
break;
case 'massive':
case '8x':
this.mSize = 'massive';
this.faSize = '8x';
break;
case 'xs':
case 'sm':
case '1x':
this.mSize = 'small';
this.faSize = value;
break;
case '3x':
this.mSize = 'big';
this.faSize = value;
break;
case '5x':
case '6x':
this.mSize = 'huge';
this.faSize = value;
break;
case '7x':
case '9x':
case '10x':
this.mSize = 'massive';
this.faSize = value;
break;
}
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: IconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.0", type: IconComponent, isStandalone: true, selector: "m-icon", inputs: { icon: "icon", size: "size", iconClass: "iconClass" }, ngImport: i0, template: "@if (mIcon) {\n <i class=\"{{icon}} {{size}}\" [ngClass]=\"iconClass\"></i>\n}\n@if (faIcon) {\n <fa-icon [icon]=\"faIcon\" [size]=\"faSize ?? '1x'\" [ngClass]=\"iconClass\" />\n}\n\n", styles: [""], dependencies: [{ kind: "ngmodule", type: FontAwesomeModule }, { kind: "component", type: i1.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "animation", "mask", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "transform", "a11yRole"], outputs: ["iconChange", "titleChange", "animationChange", "maskChange", "flipChange", "sizeChange", "pullChange", "borderChange", "inverseChange", "symbolChange", "rotateChange", "fixedWidthChange", "transformChange", "a11yRoleChange"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: IconComponent, decorators: [{
type: Component,
args: [{ selector: 'm-icon', imports: [FontAwesomeModule, NgClass], template: "@if (mIcon) {\n <i class=\"{{icon}} {{size}}\" [ngClass]=\"iconClass\"></i>\n}\n@if (faIcon) {\n <fa-icon [icon]=\"faIcon\" [size]=\"faSize ?? '1x'\" [ngClass]=\"iconClass\" />\n}\n\n" }]
}], propDecorators: { icon: [{
type: Input
}], size: [{
type: Input
}], iconClass: [{
type: Input
}] } });
class LabelComponent extends BaseComponent {
get position() {
return this.positionValue;
}
set position(value) {
this.positionValue = value;
this.classes.set('position', value);
}
get pointing() {
return this.pointingValue;
}
set pointing(value) {
this.pointingValue = value;
this.classes.set('pointing', value);
}
get horizontal() {
return this.isHorizontal;
}
set horizontal(value) {
this.isHorizontal = this.toBoolean(value);
}
constructor() {
super();
this.isHorizontal = false;
this.classes.register('pointing', 'position', 'horizontal')
.registerFixed('label');
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: LabelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.0", type: LabelComponent, isStandalone: true, selector: "m-label", inputs: { position: "position", pointing: "pointing", horizontal: "horizontal" }, host: { properties: { "class.horizontal": "this.horizontal" } }, providers: [...BaseComponent.providers], usesInheritance: true, hostDirectives: [{ directive: BasicDirective, inputs: ["basic", "basic"] }, { directive: ColorDirective, inputs: ["color", "color"] }], ngImport: i0, template: "<ng-content></ng-content>", styles: [""] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: LabelComponent, decorators: [{
type: Component,
args: [{ selector: 'm-label', hostDirectives: [BasicDirective.default, ColorDirective.default], providers: [...BaseComponent.providers], template: "<ng-content></ng-content>" }]
}], ctorParameters: () => [], propDecorators: { position: [{
type: Input
}], pointing: [{
type: Input
}], horizontal: [{
type: Input
}, {
type: HostBinding,
args: ['class.horizontal']
}] } });
class ButtonComponent extends ButtonBaseComponent {
static { this.defaults = {
inverted: false,
invertedChange: new ReplaySubject(1)
}; }
get basic() {
return this.basicDirective.basic;
}
get color() {
return this.colorDirective.color;
}
get animated() {
return this.animatedField;
}
set animated(value) {
this.animatedField = value;
this.refreshClasses();
}
get animation() {
return this.animated ? this.animated.direction : undefined;
}
get label() {
return this.labelField;
}
set label(value) {
this.labelField = value;
this.classes.set('labeled', !!value);
}
get labelPosition() {
return this.label ? this.label.position : undefined;
}
get icon() {
return this.icoValue;
}
set icon(value) {
this.icoValue = value;
this.classes.set('icon', !!value);
this.classes.set('iconLabeled', value ? 'labeled' : undefined);
}
get iconPosition() {
return this.iconPositionValue;
}
set iconPosition(value) {
this.iconPositionValue = value;
this.classes.set('iconPosition', value);
}
get social() {
return this.socialValue;
}
set social(value) {
this.socialValue = value;
this.classes.set('social', value);
}
constructor() {
super();
this.basicDirective = inject(BasicDirective, { self: true });
this.colorDirective = inject(ColorDirective, { self: true });
this.classes.register('animation', 'animated', 'labelPosition', 'iconPosition', 'label', 'labeled', 'iconLabeled', 'social', 'icon');
}
ngOnInit() {
super.ngOnInit();
ButtonCompon