@joster-dev/chaos-control 0.1.1 → 0.2.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/esm2022/lib/chaos-control.module.mjs +19 -9
- package/esm2022/lib/components/busy/busy.component.mjs +11 -0
- package/esm2022/lib/components/choice/choice.component.mjs +5 -4
- package/esm2022/lib/components/color/color.component.mjs +5 -4
- package/esm2022/lib/components/file/file.component.mjs +8 -4
- package/esm2022/lib/components/icon/icon.component.mjs +117 -0
- package/esm2022/lib/components/icon-stack/icon-stack.component.mjs +29 -0
- package/esm2022/lib/components/index.mjs +5 -2
- package/esm2022/lib/components/number/number.component.mjs +5 -4
- package/esm2022/lib/components/readonly/readonly.component.mjs +3 -3
- package/esm2022/lib/components/select/select.component.mjs +55 -25
- package/esm2022/lib/components/text/text.component.mjs +3 -3
- package/esm2022/lib/directives/busy.directive.mjs +71 -0
- package/esm2022/lib/directives/index.mjs +3 -1
- package/esm2022/lib/directives/item.directive.mjs +3 -1
- package/esm2022/lib/directives/size.directive.mjs +38 -0
- package/esm2022/lib/models/icon-types.const.mjs +33 -0
- package/esm2022/lib/models/icon.type.mjs +2 -0
- package/esm2022/lib/models/index.mjs +3 -1
- package/esm2022/public-api.mjs +2 -1
- package/fesm2022/joster-dev-chaos-control.mjs +410 -84
- package/fesm2022/joster-dev-chaos-control.mjs.map +1 -1
- package/lib/chaos-control.module.d.ts +8 -5
- package/lib/components/busy/busy.component.d.ts +5 -0
- package/lib/components/file/file.component.d.ts +2 -1
- package/lib/components/icon/icon.component.d.ts +31 -0
- package/lib/components/icon-stack/icon-stack.component.d.ts +9 -0
- package/lib/components/index.d.ts +4 -1
- package/lib/components/select/select.component.d.ts +12 -7
- package/lib/directives/busy.directive.d.ts +20 -0
- package/lib/directives/index.d.ts +2 -0
- package/lib/directives/item.directive.d.ts +1 -0
- package/lib/directives/size.directive.d.ts +12 -0
- package/lib/models/icon-types.const.d.ts +1 -0
- package/lib/models/icon.type.d.ts +2 -0
- package/lib/models/index.d.ts +2 -0
- package/package.json +2 -2
- package/public-api.d.ts +1 -0
- package/src/lib/styles.scss +7 -62
- package/src/lib/atomic.scss +0 -87
- package/src/lib/variables.scss +0 -3
|
@@ -1,15 +1,22 @@
|
|
|
1
1
|
import * as i2 from '@angular/common';
|
|
2
2
|
import { CommonModule } from '@angular/common';
|
|
3
3
|
import * as i0 from '@angular/core';
|
|
4
|
-
import { Directive, Input, Self,
|
|
4
|
+
import { Component, Directive, Input, Self, HostBinding, ViewChild, HostListener, EventEmitter, Output, NgModule, Injectable } from '@angular/core';
|
|
5
5
|
import * as i1 from '@angular/forms';
|
|
6
6
|
import { Validators, FormsModule } from '@angular/forms';
|
|
7
7
|
import { RouterModule } from '@angular/router';
|
|
8
|
-
import
|
|
9
|
-
import { IconModule } from '@joster-dev/icon';
|
|
10
|
-
import { Subject } from 'rxjs';
|
|
8
|
+
import { Subject, from, interval, map, filter, take, takeUntil } from 'rxjs';
|
|
11
9
|
import { debounceTime } from 'rxjs/operators';
|
|
12
10
|
|
|
11
|
+
class BusyComponent {
|
|
12
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: BusyComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
13
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.5", type: BusyComponent, selector: "jo-busy", ngImport: i0, template: "<!-- <div class=\"spinner spinner-1\"></div> -->\r\n<div class=\"spinner big\"></div>\r\n<div class=\"spinner small\"></div>\r\n", styles: [":host{position:absolute;inset:0;background:color-mix(in srgb,currentColor 30%,transparent);display:flex;align-items:center;justify-content:center}.spinner{position:absolute}.spinner:before{content:\"\";position:absolute;inset:0;border-radius:50%;border:.25rem solid transparent;mask:linear-gradient(#fff 0 0) padding-box,linear-gradient(#fff 0 0);mask-composite:exclude}.big{width:3rem;height:3rem;animation:rotate-animation 1s linear 0s infinite}.big:before{background:conic-gradient(transparent 40%,currentColor) border-box}.small{width:2rem;height:2rem;animation:anti-rotate-animation 1s linear 0s infinite}.small:before{background:conic-gradient(currentColor,transparent 60%) border-box}@keyframes rotate-animation{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes anti-rotate-animation{0%{transform:rotate(0)}to{transform:rotate(-360deg)}}\n", "body{font-family:Arial;margin:0}h1,h2,h3,h4,h5,h6{margin:0}a:not(.jo-ignore),button:not(.jo-ignore),.jo-button,input,textarea{color:inherit;background:transparent;border-width:.15rem;border-style:outset;border-color:currentColor;padding:.5rem;margin:0;font-size:1rem;line-height:1rem;font-family:inherit;min-width:0}a:not(.jo-ignore):active,a:not(.jo-ignore).active,button:not(.jo-ignore):active,button:not(.jo-ignore).active,.jo-button:active,.jo-button.active,input:active,input.active,textarea:active,textarea.active{border-style:inset}a:not(.jo-ignore):disabled,a:not(.jo-ignore).disabled,button:not(.jo-ignore):disabled,button:not(.jo-ignore).disabled,.jo-button:disabled,.jo-button.disabled,input:disabled,input.disabled,textarea:disabled,textarea.disabled{cursor:not-allowed;border-style:solid;box-shadow:none;opacity:.5}a,button,.jo-button{cursor:pointer}.card{border:1px solid currentColor;border-radius:.5rem}.card .card-header{padding:1rem;border-bottom:1px solid currentColor}.card .card-body,.card .card-footer{padding:1rem}.card .card-table{overflow-x:auto}.card .card-body+.card-table,.card .card-table+.card-body,.card .card-body+.card-body,.card .card-table+.card-table,.card .card-table+.card-footer,.card .card-body+.card-footer{border-top:1px solid currentColor}.card table{width:100%;border-collapse:collapse}.card table>thead{text-align:left}.card table>thead th{border-bottom:1px solid currentColor}.card table>tfoot td{margin-top:1px;border-top:1px solid currentColor}.card table th,.card table td{padding:1rem}.card table tbody tr>td:last-child{text-align:right}.card table tbody tr:nth-child(odd) td{-webkit-backdrop-filter:brightness(85%);backdrop-filter:brightness(85%)}.card table tbody tr:last-child>td:first-child{border-bottom-left-radius:.5rem}.card table tbody tr:last-child>td:last-child{border-bottom-right-radius:.5rem}.card table tbody tr.active td{font-weight:700}.position-relative{position:relative}.d-flex{display:flex}.flex-row{flex-direction:row}.flex-column{flex-direction:column}.align-items-start{align-items:flex-start}.align-items-end{align-items:flex-end}.align-items-center{align-items:center}.align-items-baseline{align-items:baseline}.align-items-stretch{align-items:stretch}.justify-content-start{justify-content:flex-start}.justify-content-end{justify-content:flex-end}.justify-content-center{justify-content:center}.justify-content-between{justify-content:space-between}.justify-content-around{justify-content:space-around}.justify-content-evenly{justify-content:space-evenly}.flex-wrap{flex-wrap:wrap}.flex-1{flex:1}.flex-2{flex:2}.flex-3{flex:3}.flex-4{flex:4}.gap-1{gap:.25rem}.m-1{margin:.25rem}.p-1{padding:.25rem}.mx-1{margin-right:.25rem;margin-left:.25rem}.my-1{margin-top:.25rem;margin-bottom:.25rem}.px-1{padding-right:.25rem;padding-left:.25rem}.py-1{padding-top:.25rem;padding-bottom:.25rem}.ms-1{margin-right:.25rem}.me-1{margin-left:.25rem}.mt-1{margin-top:.25rem}.mb-1{margin-bottom:.25rem}.ps-1{padding-right:.25rem}.pe-1{padding-left:.25rem}.pt-1{padding-top:.25rem}.pb-1{padding-bottom:.25rem}.gap-2{gap:.5rem}.m-2{margin:.5rem}.p-2{padding:.5rem}.mx-2{margin-right:.5rem;margin-left:.5rem}.my-2{margin-top:.5rem;margin-bottom:.5rem}.px-2{padding-right:.5rem;padding-left:.5rem}.py-2{padding-top:.5rem;padding-bottom:.5rem}.ms-2{margin-right:.5rem}.me-2{margin-left:.5rem}.mt-2{margin-top:.5rem}.mb-2{margin-bottom:.5rem}.ps-2{padding-right:.5rem}.pe-2{padding-left:.5rem}.pt-2{padding-top:.5rem}.pb-2{padding-bottom:.5rem}.gap-3{gap:1rem}.m-3{margin:1rem}.p-3{padding:1rem}.mx-3{margin-right:1rem;margin-left:1rem}.my-3{margin-top:1rem;margin-bottom:1rem}.px-3{padding-right:1rem;padding-left:1rem}.py-3{padding-top:1rem;padding-bottom:1rem}.ms-3{margin-right:1rem}.me-3{margin-left:1rem}.mt-3{margin-top:1rem}.mb-3{margin-bottom:1rem}.ps-3{padding-right:1rem}.pe-3{padding-left:1rem}.pt-3{padding-top:1rem}.pb-3{padding-bottom:1rem}.gap-4{gap:1.5rem}.m-4{margin:1.5rem}.p-4{padding:1.5rem}.mx-4{margin-right:1.5rem;margin-left:1.5rem}.my-4{margin-top:1.5rem;margin-bottom:1.5rem}.px-4{padding-right:1.5rem;padding-left:1.5rem}.py-4{padding-top:1.5rem;padding-bottom:1.5rem}.ms-4{margin-right:1.5rem}.me-4{margin-left:1.5rem}.mt-4{margin-top:1.5rem}.mb-4{margin-bottom:1.5rem}.ps-4{padding-right:1.5rem}.pe-4{padding-left:1.5rem}.pt-4{padding-top:1.5rem}.pb-4{padding-bottom:1.5rem}.gap-5{gap:2rem}.m-5{margin:2rem}.p-5{padding:2rem}.mx-5{margin-right:2rem;margin-left:2rem}.my-5{margin-top:2rem;margin-bottom:2rem}.px-5{padding-right:2rem;padding-left:2rem}.py-5{padding-top:2rem;padding-bottom:2rem}.ms-5{margin-right:2rem}.me-5{margin-left:2rem}.mt-5{margin-top:2rem}.mb-5{margin-bottom:2rem}.ps-5{padding-right:2rem}.pe-5{padding-left:2rem}.pt-5{padding-top:2rem}.pb-5{padding-bottom:2rem}.border{border:1px solid currentColor}.br-start{border-top-left-radius:.5rem;border-bottom-left-radius:.5rem}.br-end{border-top-right-radius:.5rem;border-bottom-right-radius:.5rem}.white-space-nowrap{white-space:nowrap}.text-end{text-align:right}.text-start{text-align:left}.text-center{text-align:center}.overflow-auto{overflow:auto}.overflow-hidden{overflow:hidden}label{display:block;padding-bottom:.5rem;font-weight:700}label:empty{display:none}label.required:after{content:\"*\"}ul{list-style:none;margin:0;padding:0}\n"] }); }
|
|
14
|
+
}
|
|
15
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: BusyComponent, decorators: [{
|
|
16
|
+
type: Component,
|
|
17
|
+
args: [{ selector: 'jo-busy', template: "<!-- <div class=\"spinner spinner-1\"></div> -->\r\n<div class=\"spinner big\"></div>\r\n<div class=\"spinner small\"></div>\r\n", styles: [":host{position:absolute;inset:0;background:color-mix(in srgb,currentColor 30%,transparent);display:flex;align-items:center;justify-content:center}.spinner{position:absolute}.spinner:before{content:\"\";position:absolute;inset:0;border-radius:50%;border:.25rem solid transparent;mask:linear-gradient(#fff 0 0) padding-box,linear-gradient(#fff 0 0);mask-composite:exclude}.big{width:3rem;height:3rem;animation:rotate-animation 1s linear 0s infinite}.big:before{background:conic-gradient(transparent 40%,currentColor) border-box}.small{width:2rem;height:2rem;animation:anti-rotate-animation 1s linear 0s infinite}.small:before{background:conic-gradient(currentColor,transparent 60%) border-box}@keyframes rotate-animation{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes anti-rotate-animation{0%{transform:rotate(0)}to{transform:rotate(-360deg)}}\n", "body{font-family:Arial;margin:0}h1,h2,h3,h4,h5,h6{margin:0}a:not(.jo-ignore),button:not(.jo-ignore),.jo-button,input,textarea{color:inherit;background:transparent;border-width:.15rem;border-style:outset;border-color:currentColor;padding:.5rem;margin:0;font-size:1rem;line-height:1rem;font-family:inherit;min-width:0}a:not(.jo-ignore):active,a:not(.jo-ignore).active,button:not(.jo-ignore):active,button:not(.jo-ignore).active,.jo-button:active,.jo-button.active,input:active,input.active,textarea:active,textarea.active{border-style:inset}a:not(.jo-ignore):disabled,a:not(.jo-ignore).disabled,button:not(.jo-ignore):disabled,button:not(.jo-ignore).disabled,.jo-button:disabled,.jo-button.disabled,input:disabled,input.disabled,textarea:disabled,textarea.disabled{cursor:not-allowed;border-style:solid;box-shadow:none;opacity:.5}a,button,.jo-button{cursor:pointer}.card{border:1px solid currentColor;border-radius:.5rem}.card .card-header{padding:1rem;border-bottom:1px solid currentColor}.card .card-body,.card .card-footer{padding:1rem}.card .card-table{overflow-x:auto}.card .card-body+.card-table,.card .card-table+.card-body,.card .card-body+.card-body,.card .card-table+.card-table,.card .card-table+.card-footer,.card .card-body+.card-footer{border-top:1px solid currentColor}.card table{width:100%;border-collapse:collapse}.card table>thead{text-align:left}.card table>thead th{border-bottom:1px solid currentColor}.card table>tfoot td{margin-top:1px;border-top:1px solid currentColor}.card table th,.card table td{padding:1rem}.card table tbody tr>td:last-child{text-align:right}.card table tbody tr:nth-child(odd) td{-webkit-backdrop-filter:brightness(85%);backdrop-filter:brightness(85%)}.card table tbody tr:last-child>td:first-child{border-bottom-left-radius:.5rem}.card table tbody tr:last-child>td:last-child{border-bottom-right-radius:.5rem}.card table tbody tr.active td{font-weight:700}.position-relative{position:relative}.d-flex{display:flex}.flex-row{flex-direction:row}.flex-column{flex-direction:column}.align-items-start{align-items:flex-start}.align-items-end{align-items:flex-end}.align-items-center{align-items:center}.align-items-baseline{align-items:baseline}.align-items-stretch{align-items:stretch}.justify-content-start{justify-content:flex-start}.justify-content-end{justify-content:flex-end}.justify-content-center{justify-content:center}.justify-content-between{justify-content:space-between}.justify-content-around{justify-content:space-around}.justify-content-evenly{justify-content:space-evenly}.flex-wrap{flex-wrap:wrap}.flex-1{flex:1}.flex-2{flex:2}.flex-3{flex:3}.flex-4{flex:4}.gap-1{gap:.25rem}.m-1{margin:.25rem}.p-1{padding:.25rem}.mx-1{margin-right:.25rem;margin-left:.25rem}.my-1{margin-top:.25rem;margin-bottom:.25rem}.px-1{padding-right:.25rem;padding-left:.25rem}.py-1{padding-top:.25rem;padding-bottom:.25rem}.ms-1{margin-right:.25rem}.me-1{margin-left:.25rem}.mt-1{margin-top:.25rem}.mb-1{margin-bottom:.25rem}.ps-1{padding-right:.25rem}.pe-1{padding-left:.25rem}.pt-1{padding-top:.25rem}.pb-1{padding-bottom:.25rem}.gap-2{gap:.5rem}.m-2{margin:.5rem}.p-2{padding:.5rem}.mx-2{margin-right:.5rem;margin-left:.5rem}.my-2{margin-top:.5rem;margin-bottom:.5rem}.px-2{padding-right:.5rem;padding-left:.5rem}.py-2{padding-top:.5rem;padding-bottom:.5rem}.ms-2{margin-right:.5rem}.me-2{margin-left:.5rem}.mt-2{margin-top:.5rem}.mb-2{margin-bottom:.5rem}.ps-2{padding-right:.5rem}.pe-2{padding-left:.5rem}.pt-2{padding-top:.5rem}.pb-2{padding-bottom:.5rem}.gap-3{gap:1rem}.m-3{margin:1rem}.p-3{padding:1rem}.mx-3{margin-right:1rem;margin-left:1rem}.my-3{margin-top:1rem;margin-bottom:1rem}.px-3{padding-right:1rem;padding-left:1rem}.py-3{padding-top:1rem;padding-bottom:1rem}.ms-3{margin-right:1rem}.me-3{margin-left:1rem}.mt-3{margin-top:1rem}.mb-3{margin-bottom:1rem}.ps-3{padding-right:1rem}.pe-3{padding-left:1rem}.pt-3{padding-top:1rem}.pb-3{padding-bottom:1rem}.gap-4{gap:1.5rem}.m-4{margin:1.5rem}.p-4{padding:1.5rem}.mx-4{margin-right:1.5rem;margin-left:1.5rem}.my-4{margin-top:1.5rem;margin-bottom:1.5rem}.px-4{padding-right:1.5rem;padding-left:1.5rem}.py-4{padding-top:1.5rem;padding-bottom:1.5rem}.ms-4{margin-right:1.5rem}.me-4{margin-left:1.5rem}.mt-4{margin-top:1.5rem}.mb-4{margin-bottom:1.5rem}.ps-4{padding-right:1.5rem}.pe-4{padding-left:1.5rem}.pt-4{padding-top:1.5rem}.pb-4{padding-bottom:1.5rem}.gap-5{gap:2rem}.m-5{margin:2rem}.p-5{padding:2rem}.mx-5{margin-right:2rem;margin-left:2rem}.my-5{margin-top:2rem;margin-bottom:2rem}.px-5{padding-right:2rem;padding-left:2rem}.py-5{padding-top:2rem;padding-bottom:2rem}.ms-5{margin-right:2rem}.me-5{margin-left:2rem}.mt-5{margin-top:2rem}.mb-5{margin-bottom:2rem}.ps-5{padding-right:2rem}.pe-5{padding-left:2rem}.pt-5{padding-top:2rem}.pb-5{padding-bottom:2rem}.border{border:1px solid currentColor}.br-start{border-top-left-radius:.5rem;border-bottom-left-radius:.5rem}.br-end{border-top-right-radius:.5rem;border-bottom-right-radius:.5rem}.white-space-nowrap{white-space:nowrap}.text-end{text-align:right}.text-start{text-align:left}.text-center{text-align:center}.overflow-auto{overflow:auto}.overflow-hidden{overflow:hidden}label{display:block;padding-bottom:.5rem;font-weight:700}label:empty{display:none}label.required:after{content:\"*\"}ul{list-style:none;margin:0;padding:0}\n"] }]
|
|
18
|
+
}] });
|
|
19
|
+
|
|
13
20
|
class BorderRadiusDirective {
|
|
14
21
|
get borderRadiusRight() {
|
|
15
22
|
return this._borderRadiusRight;
|
|
@@ -49,6 +56,73 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.5", ngImpor
|
|
|
49
56
|
type: Input
|
|
50
57
|
}] } });
|
|
51
58
|
|
|
59
|
+
class BusyDirective {
|
|
60
|
+
constructor(element, viewContainerRef, renderer) {
|
|
61
|
+
this.element = element;
|
|
62
|
+
this.viewContainerRef = viewContainerRef;
|
|
63
|
+
this.renderer = renderer;
|
|
64
|
+
this.host = this.element.nativeElement;
|
|
65
|
+
this.endSubscription$ = new Subject();
|
|
66
|
+
}
|
|
67
|
+
ngOnChanges(changes) {
|
|
68
|
+
if (changes['asyncEvents'].currentValue) {
|
|
69
|
+
const valueArray = Array.isArray(changes['asyncEvents'].currentValue)
|
|
70
|
+
? changes['asyncEvents'].currentValue
|
|
71
|
+
: [changes['asyncEvents'].currentValue];
|
|
72
|
+
const subscriptionValueArray = valueArray
|
|
73
|
+
.filter(item => Boolean(item))
|
|
74
|
+
.map(item => {
|
|
75
|
+
if (item instanceof Promise) {
|
|
76
|
+
return from(item).subscribe();
|
|
77
|
+
}
|
|
78
|
+
return item;
|
|
79
|
+
});
|
|
80
|
+
if (subscriptionValueArray.length > 0) {
|
|
81
|
+
if (this.busySubscription && !this.busySubscription.closed) {
|
|
82
|
+
this.endSubscription$.next();
|
|
83
|
+
}
|
|
84
|
+
this.addSpinner(subscriptionValueArray);
|
|
85
|
+
}
|
|
86
|
+
}
|
|
87
|
+
}
|
|
88
|
+
ngOnDestroy() {
|
|
89
|
+
this.endSubscription$.complete();
|
|
90
|
+
}
|
|
91
|
+
addSpinner(asyncEvents) {
|
|
92
|
+
const componentRef = this.viewContainerRef.createComponent(BusyComponent);
|
|
93
|
+
this.insertedNode = this.host.insertBefore(componentRef.location.nativeElement, this.host.firstChild);
|
|
94
|
+
this.renderer.addClass(this.host, 'position-relative');
|
|
95
|
+
this.renderer.addClass(this.host, 'overflow-hidden');
|
|
96
|
+
this.busySubscription = interval()
|
|
97
|
+
.pipe(map(() => asyncEvents.every(item => item.closed)), filter(everySubscriptionClosed => Boolean(everySubscriptionClosed)), take(1), takeUntil(this.endSubscription$))
|
|
98
|
+
.subscribe(({
|
|
99
|
+
complete: () => {
|
|
100
|
+
this.removeSpinner();
|
|
101
|
+
},
|
|
102
|
+
error: () => {
|
|
103
|
+
this.removeSpinner();
|
|
104
|
+
},
|
|
105
|
+
}));
|
|
106
|
+
}
|
|
107
|
+
removeSpinner() {
|
|
108
|
+
if (this.insertedNode)
|
|
109
|
+
this.host.removeChild(this.insertedNode);
|
|
110
|
+
this.renderer.removeClass(this.host, 'position-relative');
|
|
111
|
+
this.renderer.removeClass(this.host, 'overflow-hidden');
|
|
112
|
+
}
|
|
113
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: BusyDirective, deps: [{ token: i0.ElementRef }, { token: i0.ViewContainerRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
114
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.0.5", type: BusyDirective, selector: "[joBusy]", inputs: { asyncEvents: ["joBusy", "asyncEvents"] }, usesOnChanges: true, ngImport: i0 }); }
|
|
115
|
+
}
|
|
116
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: BusyDirective, decorators: [{
|
|
117
|
+
type: Directive,
|
|
118
|
+
args: [{
|
|
119
|
+
selector: '[joBusy]'
|
|
120
|
+
}]
|
|
121
|
+
}], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.ViewContainerRef }, { type: i0.Renderer2 }], propDecorators: { asyncEvents: [{
|
|
122
|
+
type: Input,
|
|
123
|
+
args: ['joBusy']
|
|
124
|
+
}] } });
|
|
125
|
+
|
|
52
126
|
class ControlDirective extends BorderRadiusDirective {
|
|
53
127
|
get required() {
|
|
54
128
|
return this._required;
|
|
@@ -91,6 +165,39 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.5", ngImpor
|
|
|
91
165
|
type: Input
|
|
92
166
|
}] } });
|
|
93
167
|
|
|
168
|
+
const iconTypes = [
|
|
169
|
+
'circle',
|
|
170
|
+
'dot',
|
|
171
|
+
'ring',
|
|
172
|
+
'square',
|
|
173
|
+
'squircle',
|
|
174
|
+
'check',
|
|
175
|
+
'times',
|
|
176
|
+
'plus',
|
|
177
|
+
'minus',
|
|
178
|
+
'row',
|
|
179
|
+
'column',
|
|
180
|
+
'bomb',
|
|
181
|
+
'flag',
|
|
182
|
+
'gear',
|
|
183
|
+
'star',
|
|
184
|
+
'user',
|
|
185
|
+
'refresh',
|
|
186
|
+
'ascend',
|
|
187
|
+
'descend',
|
|
188
|
+
'search',
|
|
189
|
+
'crown',
|
|
190
|
+
'ogre',
|
|
191
|
+
'folder',
|
|
192
|
+
'chevron',
|
|
193
|
+
'ankh',
|
|
194
|
+
'sun',
|
|
195
|
+
'moon',
|
|
196
|
+
'clear',
|
|
197
|
+
'amphora',
|
|
198
|
+
'speech'
|
|
199
|
+
];
|
|
200
|
+
|
|
94
201
|
function isNumber(value) {
|
|
95
202
|
return typeof value === 'number'
|
|
96
203
|
&& !isNaN(value);
|
|
@@ -121,6 +228,7 @@ class ItemDirective extends ControlDirective {
|
|
|
121
228
|
if (!isItems(value))
|
|
122
229
|
throw new Error('[items] expects: { key: boolean | number | string, value: string }[]');
|
|
123
230
|
this._items = value;
|
|
231
|
+
this.filteredItems = value;
|
|
124
232
|
this.validation.next();
|
|
125
233
|
}
|
|
126
234
|
get limit() {
|
|
@@ -158,6 +266,7 @@ class ItemDirective extends ControlDirective {
|
|
|
158
266
|
super();
|
|
159
267
|
this.ngControl = ngControl;
|
|
160
268
|
this._items = [];
|
|
269
|
+
this.filteredItems = [];
|
|
161
270
|
this._limit = 0;
|
|
162
271
|
this._isMultiple = false;
|
|
163
272
|
this._model = [];
|
|
@@ -221,6 +330,153 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.5", ngImpor
|
|
|
221
330
|
type: Input
|
|
222
331
|
}] } });
|
|
223
332
|
|
|
333
|
+
class SizeDirective {
|
|
334
|
+
constructor() {
|
|
335
|
+
this._size = '100%';
|
|
336
|
+
this.sizeChangesSubject = new Subject();
|
|
337
|
+
}
|
|
338
|
+
get size() {
|
|
339
|
+
return this._size;
|
|
340
|
+
}
|
|
341
|
+
set size(value) {
|
|
342
|
+
if (value === null || value === undefined)
|
|
343
|
+
value = '100%';
|
|
344
|
+
if (typeof value === 'number' && value >= 0 && value <= 100)
|
|
345
|
+
value = `${value}%`;
|
|
346
|
+
if (typeof value !== 'string')
|
|
347
|
+
throw new Error('size input must be: string');
|
|
348
|
+
// todo: write regex
|
|
349
|
+
// https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/height
|
|
350
|
+
this._size = value;
|
|
351
|
+
this.sizeChangesSubject.next();
|
|
352
|
+
}
|
|
353
|
+
ngOnDestroy() {
|
|
354
|
+
this.sizeChangesSubject.complete();
|
|
355
|
+
}
|
|
356
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: SizeDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
357
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.0.5", type: SizeDirective, selector: "[size]", inputs: { size: "size" }, ngImport: i0 }); }
|
|
358
|
+
}
|
|
359
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: SizeDirective, decorators: [{
|
|
360
|
+
type: Directive,
|
|
361
|
+
args: [{
|
|
362
|
+
selector: '[size]'
|
|
363
|
+
}]
|
|
364
|
+
}], propDecorators: { size: [{
|
|
365
|
+
type: Input
|
|
366
|
+
}] } });
|
|
367
|
+
|
|
368
|
+
class IconComponent extends SizeDirective {
|
|
369
|
+
get type() {
|
|
370
|
+
return this._type;
|
|
371
|
+
}
|
|
372
|
+
set type(value) {
|
|
373
|
+
if (typeof value === 'string')
|
|
374
|
+
value = value.toLowerCase().trim();
|
|
375
|
+
if (!iconTypes.includes(value))
|
|
376
|
+
throw new Error(`expected [type] to be: ${iconTypes.join(' | ')}`);
|
|
377
|
+
this._type = value;
|
|
378
|
+
}
|
|
379
|
+
get fill() {
|
|
380
|
+
return this._fill;
|
|
381
|
+
}
|
|
382
|
+
set fill(value) {
|
|
383
|
+
if (typeof value === 'string')
|
|
384
|
+
value = [value];
|
|
385
|
+
if (value === null || value === undefined)
|
|
386
|
+
value = [null];
|
|
387
|
+
if (!Array.isArray(value) || !value.every(item => item === null || typeof item === 'string'))
|
|
388
|
+
throw new Error('expected [fill] to be: string | null | (string | null)[]');
|
|
389
|
+
this._fill = value;
|
|
390
|
+
}
|
|
391
|
+
get fillRotate() {
|
|
392
|
+
return this._fillRotate;
|
|
393
|
+
}
|
|
394
|
+
set fillRotate(value) {
|
|
395
|
+
if (typeof value === 'string')
|
|
396
|
+
value = Number(value);
|
|
397
|
+
if (typeof value !== 'number')
|
|
398
|
+
throw new Error('expected [fillRotate] to be: string | number');
|
|
399
|
+
this._fillRotate = value;
|
|
400
|
+
}
|
|
401
|
+
get fillOpacity() {
|
|
402
|
+
return this._fillOpacity;
|
|
403
|
+
}
|
|
404
|
+
set fillOpacity(value) {
|
|
405
|
+
if (typeof value !== 'number' || value < 0)
|
|
406
|
+
throw new Error('expected [fillOpacity] to be: number >= 0');
|
|
407
|
+
this._fillOpacity = value;
|
|
408
|
+
}
|
|
409
|
+
get stroke() {
|
|
410
|
+
return this._stroke;
|
|
411
|
+
}
|
|
412
|
+
set stroke(value) {
|
|
413
|
+
if (typeof value === 'string')
|
|
414
|
+
value = [value];
|
|
415
|
+
if (value === null || value === undefined)
|
|
416
|
+
value = [null];
|
|
417
|
+
if (!Array.isArray(value) || !value.every(item => item === null || typeof item === 'string'))
|
|
418
|
+
throw new Error('expected [stroke] to be: string | null | (string | null)[]');
|
|
419
|
+
this._stroke = value;
|
|
420
|
+
}
|
|
421
|
+
get strokeRotate() {
|
|
422
|
+
return this._strokeRotate;
|
|
423
|
+
}
|
|
424
|
+
set strokeRotate(value) {
|
|
425
|
+
if (typeof value === 'string')
|
|
426
|
+
value = Number(value);
|
|
427
|
+
if (typeof value !== 'number')
|
|
428
|
+
throw new Error('expected [strokeRotate] to be: string | number');
|
|
429
|
+
this._strokeRotate = value;
|
|
430
|
+
}
|
|
431
|
+
constructor() {
|
|
432
|
+
super();
|
|
433
|
+
this._fill = [null];
|
|
434
|
+
this._fillRotate = 0;
|
|
435
|
+
this._fillOpacity = 1;
|
|
436
|
+
this._stroke = ['current'];
|
|
437
|
+
this._strokeRotate = 0;
|
|
438
|
+
this.spin = null;
|
|
439
|
+
this.id = `${Math.random().toString(36).substring(2, 13)}`;
|
|
440
|
+
}
|
|
441
|
+
linearGradientStopColor(item) {
|
|
442
|
+
if (item === 'current')
|
|
443
|
+
return 'currentColor';
|
|
444
|
+
return item === null
|
|
445
|
+
? ''
|
|
446
|
+
: `#${item}`;
|
|
447
|
+
}
|
|
448
|
+
linearGradientStopOpacity(item) {
|
|
449
|
+
return item === null
|
|
450
|
+
? 0
|
|
451
|
+
: 1;
|
|
452
|
+
}
|
|
453
|
+
linearGradientStopOffset(index, items) {
|
|
454
|
+
if (items.length === 1)
|
|
455
|
+
return '0%';
|
|
456
|
+
return `${100 - (((items.length - 1 - index) / (items.length - 1)) * 100)}%`;
|
|
457
|
+
}
|
|
458
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: IconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
459
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.5", type: IconComponent, selector: "icon[type]", inputs: { type: "type", fill: "fill", fillRotate: "fillRotate", fillOpacity: "fillOpacity", stroke: "stroke", strokeRotate: "strokeRotate", spin: "spin" }, usesInheritance: true, ngImport: i0, template: "<svg\r\n attr.height=\"{{size}}\"\r\n attr.width=\"{{size}}\"\r\n version=\"1.1\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n viewBox=\"0 0 100 100\"\r\n [class.spin-x]=\"spin === 'x'\"\r\n [class.spin-y]=\"spin === 'y'\"\r\n [class.spin-z]=\"spin === 'z'\"\r\n>\r\n <linearGradient\r\n id=\"fill-gradient-{{id}}\"\r\n attr.gradientTransform=\"rotate({{_fillRotate}}) translate({{(_fillRotate / 180) % 0.5}})\"\r\n >\r\n <stop\r\n *ngFor=\"let item of _fill; let idx = index\"\r\n [attr.offset]=\"linearGradientStopOffset(idx, _fill)\"\r\n [attr.stop-color]=\"linearGradientStopColor(item)\"\r\n [attr.stop-opacity]=\"linearGradientStopOpacity(item)\"\r\n />\r\n </linearGradient>\r\n <linearGradient\r\n id=\"stroke-gradient-{{id}}\"\r\n attr.gradientTransform=\"rotate({{_strokeRotate}}) translate({{(_strokeRotate / 180) % 0.5}})\"\r\n >\r\n <stop\r\n *ngFor=\"let item of _stroke; let idx = index\"\r\n [attr.offset]=\"linearGradientStopOffset(idx, _stroke)\"\r\n [attr.stop-color]=\"linearGradientStopColor(item)\"\r\n />\r\n </linearGradient>\r\n <circle\r\n *ngIf=\"type === 'circle'\"\r\n attr.fill=\"url(#fill-gradient-{{id}})\"\r\n [attr.fill-opacity]=\"fillOpacity\"\r\n attr.stroke=\"url(#stroke-gradient-{{id}})\"\r\n stroke-width=\"5\"\r\n cx=\"50\"\r\n cy=\"50\"\r\n r=\"47.5\"\r\n />\r\n <circle\r\n *ngIf=\"type === 'dot'\"\r\n attr.fill=\"url(#fill-gradient-{{id}})\"\r\n [attr.fill-opacity]=\"fillOpacity\"\r\n attr.stroke=\"url(#stroke-gradient-{{id}})\"\r\n stroke-width=\"5\"\r\n cx=\"50\"\r\n cy=\"50\"\r\n r=\"30\"\r\n />\r\n <path\r\n *ngIf=\"type === 'ring'\"\r\n attr.fill=\"url(#fill-gradient-{{id}})\"\r\n [attr.fill-opacity]=\"fillOpacity\"\r\n attr.stroke=\"url(#stroke-gradient-{{id}})\"\r\n stroke-width=\"5\"\r\n d=\"M50,2.5C23.767,2.5,2.5,23.767,2.5,50S23.767,97.5,50,97.5S97.5,76.233,97.5,50S76.233,2.5,50,2.5z M50,80c-16.568,0-30-13.432-30-30c0-16.568,13.432-30,30-30s30,13.432,30,30C80,66.568,66.568,80,50,80z\"\r\n />\r\n <rect\r\n *ngIf=\"type === 'square'\"\r\n attr.fill=\"url(#fill-gradient-{{id}})\"\r\n [attr.fill-opacity]=\"fillOpacity\"\r\n attr.stroke=\"url(#stroke-gradient-{{id}})\"\r\n stroke-width=\"5\"\r\n x=\"2.5\"\r\n y=\"2.5\"\r\n width=\"95\"\r\n height=\"95\"\r\n />\r\n <rect\r\n *ngIf=\"type === 'squircle'\"\r\n attr.fill=\"url(#fill-gradient-{{id}})\"\r\n [attr.fill-opacity]=\"fillOpacity\"\r\n attr.stroke=\"url(#stroke-gradient-{{id}})\"\r\n stroke-width=\"5\"\r\n x=\"2.5\"\r\n y=\"2.5\"\r\n width=\"95\"\r\n height=\"95\"\r\n rx=\"15\"\r\n />\r\n <rect\r\n *ngIf=\"type === 'minus'\"\r\n attr.fill=\"url(#fill-gradient-{{id}})\"\r\n [attr.fill-opacity]=\"fillOpacity\"\r\n attr.stroke=\"url(#stroke-gradient-{{id}})\"\r\n stroke-width=\"5\"\r\n x=\"2.5\"\r\n y=\"37.5\"\r\n width=\"95\"\r\n height=\"25\"\r\n />\r\n <polygon\r\n *ngIf=\"type === 'check'\"\r\n attr.fill=\"url(#fill-gradient-{{id}})\"\r\n [attr.fill-opacity]=\"fillOpacity\"\r\n attr.stroke=\"url(#stroke-gradient-{{id}})\"\r\n stroke-width=\"5\"\r\n points=\"96.465,27.488 82.322,13.347,37.257,58.367 17.675,38.785 3.535,52.928 37.259,86.652\"\r\n />\r\n <polygon\r\n *ngIf=\"type === 'times'\"\r\n attr.fill=\"url(#fill-gradient-{{id}})\"\r\n [attr.fill-opacity]=\"fillOpacity\"\r\n attr.stroke=\"url(#stroke-gradient-{{id}})\"\r\n stroke-width=\"5\"\r\n points=\"64.143,50 96.465,17.678 82.323,3.535,50,35.857 17.678,3.535 3.535,17.676 35.858,50 3.535,82.323 17.678,96.465 50.001,64.142 82.323,96.465 96.465,82.322\"\r\n />\r\n <polygon\r\n *ngIf=\"type === 'plus'\"\r\n attr.fill=\"url(#fill-gradient-{{id}})\"\r\n [attr.fill-opacity]=\"fillOpacity\"\r\n attr.stroke=\"url(#stroke-gradient-{{id}})\"\r\n stroke-width=\"5\"\r\n points=\"97.5,37.5 62.5,37.5 62.5,2.5 37.5,2.5 37.5,37.5 2.5,37.5 2.5,62.5 37.5,62.5 37.5,97.5 62.5,97.5 62.5,62.5 97.5,62.5\"\r\n />\r\n <polygon\r\n *ngIf=\"type === 'row'\"\r\n attr.fill=\"url(#fill-gradient-{{id}})\"\r\n [attr.fill-opacity]=\"fillOpacity\"\r\n attr.stroke=\"url(#stroke-gradient-{{id}})\"\r\n stroke-width=\"5\"\r\n points=\"96,50 66.5,20 66.5,37.5 33.5,37.5 33.5,20 4,50 33.5,80 33.5,62.5 66.5,62.5 66.5,80\"\r\n />\r\n <polygon\r\n *ngIf=\"type === 'column'\"\r\n attr.fill=\"url(#fill-gradient-{{id}})\"\r\n [attr.fill-opacity]=\"fillOpacity\"\r\n attr.stroke=\"url(#stroke-gradient-{{id}})\"\r\n stroke-width=\"5\"\r\n points=\"62.5,33.535 80,33.535 50,3.535 20,33.535 37.5,33.535 37.5,66.465 20,66.465 50,96.465 80,66.465 62.5,66.465\"\r\n />\r\n <polygon\r\n *ngIf=\"type === 'flag'\"\r\n attr.fill=\"url(#fill-gradient-{{id}})\"\r\n [attr.fill-opacity]=\"fillOpacity\"\r\n attr.stroke=\"url(#stroke-gradient-{{id}})\"\r\n stroke-width=\"5\"\r\n points=\"93,33.86 22.5,7.368 22.5,2.5 2.5,2.5 2.5,97.5 22.5,97.5 22.5,59.915\"\r\n />\r\n <path\r\n *ngIf=\"type === 'gear'\"\r\n attr.fill=\"url(#fill-gradient-{{id}})\"\r\n [attr.fill-opacity]=\"fillOpacity\"\r\n attr.stroke=\"url(#stroke-gradient-{{id}})\"\r\n stroke-width=\"5\"\r\n d=\"M96.35,39.625C95.178,34.369,93.14,29.44,90.385,25H80l-5-5V9.618C70.554,6.859,65.617,4.82,60.353,3.65L56.61,7.761L50,15.022l-6.61-7.261L39.647,3.65C34.382,4.82,29.447,6.859,25,9.618V20l-5,5H9.615C6.86,29.44,4.822,34.369,3.65,39.625l4.165,3.764L15.132,50l-7.316,6.61L3.65,60.375C4.822,65.631,6.86,70.56,9.615,75H20l5,5v10.382c4.441,2.755,9.371,4.793,14.628,5.964l3.761-4.162L50,84.867l6.61,7.316l3.761,4.162c5.258-1.171,10.188-3.209,14.629-5.964V80l5-5h10.385c2.755-4.44,4.793-9.369,5.965-14.625l-4.165-3.765L84.869,50l7.315-6.611L96.35,39.625z M50,72.5c-12.427,0-22.5-10.073-22.5-22.5c0-12.426,10.073-22.5,22.5-22.5S72.5,37.574,72.5,50C72.5,62.427,62.427,72.5,50,72.5z\"\r\n />\r\n <polygon\r\n *ngIf=\"type === 'star'\"\r\n attr.fill=\"url(#fill-gradient-{{id}})\"\r\n [attr.fill-opacity]=\"fillOpacity\"\r\n attr.stroke=\"url(#stroke-gradient-{{id}})\"\r\n stroke-width=\"5\"\r\n points=\"50,9.91 62.022,38.363 92.798,41.005\r\n69.453,61.23 76.45,91.316 50,75.364 23.55,91.315 30.547,61.23 7.203,41.005 37.978,38.363 \"\r\n />\r\n <!-- start user -->\r\n <circle\r\n *ngIf=\"type === 'user'\"\r\n fill=\"#FFFFFF\"\r\n attr.fill=\"url(#fill-gradient-{{id}})\"\r\n [attr.fill-opacity]=\"fillOpacity\"\r\n attr.stroke=\"url(#stroke-gradient-{{id}})\"\r\n stroke-width=\"5\"\r\n cx=\"50\"\r\n cy=\"27.5\"\r\n r=\"25\"\r\n />\r\n <path\r\n *ngIf=\"type === 'user'\"\r\n attr.fill=\"url(#fill-gradient-{{id}})\"\r\n [attr.fill-opacity]=\"fillOpacity\"\r\n attr.stroke=\"url(#stroke-gradient-{{id}})\"\r\n stroke-width=\"5\"\r\n d=\"M86.6,52.5H71.646 C67.324,59.971,59.252,65,50,65s-17.324-5.029-21.646-12.5H14.4c-6.297,0-11.9,5.373-11.9,12v33h95v-33 C97.5,57.873,92.896,52.5,86.6,52.5z\"\r\n />\r\n <!-- end user -->\r\n <path\r\n *ngIf=\"type === 'bomb'\"\r\n attr.fill=\"url(#fill-gradient-{{id}})\"\r\n [attr.fill-opacity]=\"fillOpacity\"\r\n attr.stroke=\"url(#stroke-gradient-{{id}})\"\r\n stroke-width=\"5\"\r\n d=\"M93.634,34.651c4.687-4.686,5.182-11.789,1.107-15.863L81.213,5.261c-4.074-4.076-11.178-3.58-15.863,1.105l-1.252,1.252C59.294,5.929,54.132,5,48.75,5C23.207,5,2.5,25.707,2.5,51.25S23.207,97.5,48.75,97.5S95,76.793,95,51.25c0-5.381-0.929-10.543-2.618-15.347L93.634,34.651z M70.4,64.681l-12.009-1.009l-1.091,12.001l-8.551-8.492l-8.55,8.492l-1.091-12.001L27.1,64.681l6.878-9.896L24.13,47.84l11.63-3.159l-3.08-11.65l10.939,5.056l5.13-10.905l5.131,10.905L64.82,33.03l-3.08,11.65l11.63,3.159l-9.849,6.945L70.4,64.681z\"\r\n />\r\n <!-- start refresh -->\r\n <path\r\n *ngIf=\"type === 'refresh'\"\r\n attr.fill=\"url(#fill-gradient-{{id}})\"\r\n [attr.fill-opacity]=\"fillOpacity\"\r\n attr.stroke=\"url(#stroke-gradient-{{id}})\"\r\n stroke-width=\"5\"\r\n stroke-miterlimit=\"10\"\r\n d=\"M50,80c-9.186,0-17.391-4.141-22.893-10.643L37.5,58.965h-35v35l12.204-12.204C23.395,91.42,35.982,97.5,50,97.5c26.232,0,47.5-21.268,47.5-47.5H80C80,66.568,66.568,80,50,80z\"\r\n />\r\n <path\r\n *ngIf=\"type === 'refresh'\"\r\n attr.fill=\"url(#fill-gradient-{{id}})\"\r\n [attr.fill-opacity]=\"fillOpacity\"\r\n attr.stroke=\"url(#stroke-gradient-{{id}})\"\r\n stroke-width=\"5\"\r\n stroke-miterlimit=\"10\"\r\n d=\"M85.296,18.24C76.605,8.58,64.018,2.5,50,2.5C23.768,2.5,2.5,23.768,2.5,50H20c0-16.568,13.432-30,30-30c9.186,0,17.393,4.141,22.893,10.643L62.5,41.036h35v-35L85.296,18.24z\"\r\n />\r\n <!-- end refresh -->\r\n <polygon\r\n *ngIf=\"type === 'ascend'\"\r\n attr.fill=\"url(#fill-gradient-{{id}})\"\r\n [attr.fill-opacity]=\"fillOpacity\"\r\n attr.stroke=\"url(#stroke-gradient-{{id}})\"\r\n stroke-width=\"5\"\r\n points=\"50,3.841 20,38.842 80,38.842\"\r\n />\r\n <polygon\r\n *ngIf=\"type === 'descend'\"\r\n attr.fill=\"url(#fill-gradient-{{id}})\"\r\n [attr.fill-opacity]=\"fillOpacity\"\r\n attr.stroke=\"url(#stroke-gradient-{{id}})\"\r\n stroke-width=\"5\"\r\n points=\"50,96.158 20,61.158 80,61.158\"\r\n />\r\n <path\r\n *ngIf=\"type === 'search'\"\r\n attr.fill=\"url(#fill-gradient-{{id}})\"\r\n [attr.fill-opacity]=\"fillOpacity\"\r\n attr.stroke=\"url(#stroke-gradient-{{id}})\"\r\n stroke-width=\"5\"\r\n stroke-miterlimit=\"10\"\r\n d=\"M96.465,87.627L70.56,61.721C74.924,55.591,77.5,48.099,77.5,40C77.5,19.29,60.711,2.5,40,2.5C19.29,2.5,2.5,19.29,2.5,40c0,20.711,16.79,37.5,37.5,37.5c8.098,0,15.591-2.575,21.72-6.94l25.906,25.905L96.465,87.627z M40,65c-13.807,0-25-11.192-25-25c0-13.807,11.193-25,25-25c13.808,0,25,11.193,25,25C65,53.808,53.808,65,40,65z\"\r\n />\r\n <path\r\n *ngIf=\"type === 'crown'\"\r\n attr.fill=\"url(#fill-gradient-{{id}})\"\r\n [attr.fill-opacity]=\"fillOpacity\"\r\n attr.stroke=\"url(#stroke-gradient-{{id}})\"\r\n stroke-width=\"5\"\r\n stroke-miterlimit=\"10\"\r\n d=\"M95,22.5c0-4.143-3.357-7.5-7.5-7.5\r\n\tS80,18.357,80,22.5c0,2.145,0.904,4.073,2.347,5.44L67.673,66.273l-13.37-50.136C56.234,14.781,57.5,12.54,57.5,10\r\n\tc0-4.143-3.357-7.5-7.5-7.5s-7.5,3.357-7.5,7.5c0,2.54,1.266,4.78,3.197,6.137l-13.37,50.136L17.654,27.939\r\n\tC19.096,26.573,20,24.644,20,22.5c0-4.143-3.357-7.5-7.5-7.5S5,18.357,5,22.5c0,3.673,2.642,6.724,6.128,7.369L14.857,72.5H12.5v15\r\n\tH10v10h80v-10h-2.5v-15h-2.356l3.729-42.631C92.358,29.223,95,26.173,95,22.5z\"\r\n />\r\n <path\r\n *ngIf=\"type === 'ogre'\"\r\n attr.fill=\"url(#fill-gradient-{{id}})\"\r\n [attr.fill-opacity]=\"fillOpacity\"\r\n attr.stroke=\"url(#stroke-gradient-{{id}})\"\r\n stroke-width=\"5\"\r\n stroke-miterlimit=\"10\"\r\n d=\"M82.5,5.721c0,0,5,5,5,15s-10,10-10,10h-3.519\r\n\tC72.018,28.728,69.393,27.5,66.5,27.5h-33c-2.894,0-5.518,1.228-7.481,3.221H22.5c0,0-10,0-10-10s5-15,5-15s-15,5-15,20\r\n\tc0,13.263,7.821,22.61,20,24.6V60.5c0,6.583,4.861,11.923,10.881,11.993C33.869,79.732,35,87.834,35,90c0,4.143,3.357,7.5,7.5,7.5\r\n\th15c4.143,0,7.5-3.357,7.5-7.5c0-2.166,1.131-10.268,1.62-17.507c6.019-0.07,10.88-5.41,10.88-11.993V50.32\r\n\tc12.179-1.989,20-11.337,20-24.6C97.5,10.721,82.5,5.721,82.5,5.721z M37.5,65c-4.143,0-7.5-3.357-7.5-7.5s3.357-7.5,7.5-7.5\r\n\ts7.5,3.357,7.5,7.5S41.643,65,37.5,65z M62.5,65c-4.143,0-7.5-3.357-7.5-7.5s3.357-7.5,7.5-7.5s7.5,3.357,7.5,7.5S66.643,65,62.5,65\r\n\tz\"\r\n />\r\n <path\r\n *ngIf=\"type === 'folder'\"\r\n attr.fill=\"url(#fill-gradient-{{id}})\"\r\n [attr.fill-opacity]=\"fillOpacity\"\r\n attr.stroke=\"url(#stroke-gradient-{{id}})\"\r\n stroke-width=\"5\"\r\n stroke-miterlimit=\"10\"\r\n d=\"M42.503,10.5c-9.836,0-28.103,0-28.103,0\r\n\tc-6.296,0-11.9,5.373-11.9,12v56c0,6.627,5.604,12,11.9,12h72.2c6.296,0,10.9-5.373,10.9-12c0,0,0-37.406,0-44\r\n\ts-4.467-11.989-10.9-12s-33.807,0-33.807,0S52.339,10.5,42.503,10.5z\"\r\n />\r\n <path\r\n *ngIf=\"type === 'chevron'\"\r\n attr.fill=\"url(#fill-gradient-{{id}})\"\r\n [attr.fill-opacity]=\"fillOpacity\"\r\n attr.stroke=\"url(#stroke-gradient-{{id}})\"\r\n stroke-width=\"5\"\r\n stroke-miterlimit=\"10\"\r\n d=\"M 81.371204,80.734189 96.459378,65.734039 50.000001,19.268573 3.5406224,65.734039 18.628797,80.734189 50.000001,49.268874 Z\"\r\n />\r\n <path\r\n *ngIf=\"type === 'ankh'\"\r\n attr.fill=\"url(#fill-gradient-{{id}})\"\r\n [attr.fill-opacity]=\"fillOpacity\"\r\n attr.stroke=\"url(#stroke-gradient-{{id}})\"\r\n stroke-width=\"5\"\r\n stroke-miterlimit=\"10\"\r\n d=\"M85,60l-5-15H60.938\r\n\tC65.605,36.781,70,27.677,70,22.5c0-11.046-8.955-20-20-20c-11.046,0-20,8.954-20,20c0,5.177,4.394,14.281,9.062,22.5H19.999L15,60\r\n\tl28.965-4.138L40,97.5h20l-3.967-41.638L85,60z M49.999,12.551c5.524,0,10.001,4.478,10.001,10c0,5.523-10.001,20-10.001,20\r\n\ts-10-14.477-10-20C40,17.028,44.477,12.551,49.999,12.551z\"\r\n />\r\n <polygon\r\n *ngIf=\"type === 'sun'\"\r\n attr.fill=\"url(#fill-gradient-{{id}})\"\r\n [attr.fill-opacity]=\"fillOpacity\"\r\n attr.stroke=\"url(#stroke-gradient-{{id}})\"\r\n stroke-width=\"5\"\r\n stroke-miterlimit=\"10\"\r\n points=\"50.001,5.864 57.541,21.864\r\n\t72.068,11.778 70.6,29.403 88.224,27.933 78.14,42.461 94.137,50 78.14,57.541 88.224,72.07 70.6,70.6 72.068,88.225 57.541,78.141\r\n\t50.001,94.137 42.461,78.141 27.933,88.225 29.403,70.6 11.777,72.07 21.863,57.541 5.864,50 21.863,42.461 11.777,27.933\r\n\t29.403,29.403 27.933,11.778 42.461,21.864 \"\r\n />\r\n <path\r\n *ngIf=\"type === 'moon'\"\r\n attr.fill=\"url(#fill-gradient-{{id}})\"\r\n [attr.fill-opacity]=\"fillOpacity\"\r\n attr.stroke=\"url(#stroke-gradient-{{id}})\"\r\n stroke-width=\"5\"\r\n stroke-miterlimit=\"10\"\r\n d=\"M90.029,62.626\r\n\tc-14.54,14.54-38.115,14.539-52.654,0c-14.54-14.54-14.54-38.114,0-52.654c2.739-2.74,5.802-4.963,9.061-6.67\r\n\tC35.463,4.049,24.701,8.604,16.313,16.991c-18.417,18.418-18.417,48.278,0,66.696c18.417,18.416,48.278,18.416,66.694,0\r\n\tc8.389-8.389,12.942-19.149,13.69-30.123C94.989,56.825,92.768,59.886,90.029,62.626z\"\r\n />\r\n <rect\r\n *ngIf=\"type === 'clear'\"\r\n x=\"2.5\"\r\n y=\"2.5\"\r\n attr.fill=\"url(#fill-gradient-{{id}})\"\r\n [attr.fill-opacity]=\"fillOpacity\"\r\n attr.stroke=\"url(#stroke-gradient-{{id}})\"\r\n stroke-width=\"5\"\r\n stroke-miterlimit=\"10\"\r\n width=\"75\"\r\n height=\"75\"\r\n />\r\n <rect\r\n *ngIf=\"type === 'clear'\"\r\n x=\"22.5\"\r\n y=\"22.5\"\r\n fill=\"none\"\r\n attr.stroke=\"url(#stroke-gradient-{{id}})\"\r\n stroke-width=\"5\"\r\n stroke-miterlimit=\"10\"\r\n stroke-dasharray=\"13.25 5.5\"\r\n width=\"75\"\r\n height=\"75\"\r\n />\r\n <path\r\n *ngIf=\"type === 'amphora'\"\r\n attr.fill=\"url(#fill-gradient-{{id}})\"\r\n [attr.fill-opacity]=\"fillOpacity\"\r\n attr.stroke=\"url(#stroke-gradient-{{id}})\"\r\n stroke-width=\"5\"\r\n stroke-miterlimit=\"10\"\r\n d=\"M92.5,28c0-11.046-7.835-20-17.5-20\r\n\tc-3.586,0-6.917,1.237-9.691,3.352c0.025-0.749,0.084-1.409,0.191-1.852c0.471-1.918,3.5-7,3.5-7H31c0,0,3.03,5.082,3.5,7\r\n\tc0.108,0.442,0.166,1.103,0.192,1.852C31.917,9.237,28.586,8,25,8C15.335,8,7.5,16.954,7.5,28c0,7.019,3.17,13.182,7.956,16.751\r\n\tC15.165,46.438,15,48.187,15,50c0,13.744,18.5,40.5,18.5,40.5l-2.5,7h38l-2.5-7c0,0,18.5-26.756,18.5-40.5\r\n\tc0-1.813-0.164-3.563-0.456-5.249C89.33,41.182,92.5,35.019,92.5,28z M15,28c0-6.903,4.478-12.5,10-12.5\r\n\tc2.789,0,5.309,1.43,7.122,3.732c-3.582,2.808-10.347,8.93-14.215,17.577C16.111,34.549,15,31.437,15,28z M82.093,36.809\r\n\tc-3.866-8.647-10.634-14.769-14.215-17.577C69.691,16.93,72.211,15.5,75,15.5c5.521,0,10,5.597,10,12.5\r\n\tC85,31.437,83.889,34.549,82.093,36.809z\"\r\n />\r\n <path\r\n *ngIf=\"type === 'speech'\"\r\n attr.fill=\"url(#fill-gradient-{{id}})\"\r\n [attr.fill-opacity]=\"fillOpacity\"\r\n attr.stroke=\"url(#stroke-gradient-{{id}})\"\r\n stroke-width=\"5\"\r\n stroke-miterlimit=\"10\"\r\n d=\"M50,2.5C26.702,2.5,2.5,22.339,2.5,45\r\n\tc0,8.368,3.307,16.347,8.641,23.084L3.979,94.813l23.196-13.393c7.078,3.83,15,6.076,22.825,6.076c23.299,0,47.5-19.838,47.5-42.5\r\n\tC97.5,22.336,73.299,2.5,50,2.5z M75,60.001H25c-2.762,0-5-2.238-5-5s2.238-5,5-5h50c2.762,0,5,2.239,5,5\r\n\tC80,57.763,77.762,60.001,75,60.001z M75,40H25c-2.762,0-5-2.239-5-5s2.238-5,5-5h50c2.762,0,5,2.239,5,5C80,37.763,77.762,40,75,40\r\n\tz\"\r\n />\r\n</svg>\r\n", styles: [":host{display:inline-block}:host>svg{display:block}:host>svg.spin-x{animation:spinX 1.5s linear infinite}:host>svg.spin-y{animation:spinY 1.5s linear infinite}:host>svg.spin-z{animation:spinZ 1.5s linear infinite}@keyframes spinX{0%{transform:rotateX(0)}to{transform:rotateX(360deg)}}@keyframes spinY{0%{transform:rotateY(0)}to{transform:rotateY(360deg)}}@keyframes spinZ{0%{transform:rotate(0)}to{transform:rotate(360deg)}}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
|
|
460
|
+
}
|
|
461
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: IconComponent, decorators: [{
|
|
462
|
+
type: Component,
|
|
463
|
+
args: [{ selector: 'icon[type]', template: "<svg\r\n attr.height=\"{{size}}\"\r\n attr.width=\"{{size}}\"\r\n version=\"1.1\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n viewBox=\"0 0 100 100\"\r\n [class.spin-x]=\"spin === 'x'\"\r\n [class.spin-y]=\"spin === 'y'\"\r\n [class.spin-z]=\"spin === 'z'\"\r\n>\r\n <linearGradient\r\n id=\"fill-gradient-{{id}}\"\r\n attr.gradientTransform=\"rotate({{_fillRotate}}) translate({{(_fillRotate / 180) % 0.5}})\"\r\n >\r\n <stop\r\n *ngFor=\"let item of _fill; let idx = index\"\r\n [attr.offset]=\"linearGradientStopOffset(idx, _fill)\"\r\n [attr.stop-color]=\"linearGradientStopColor(item)\"\r\n [attr.stop-opacity]=\"linearGradientStopOpacity(item)\"\r\n />\r\n </linearGradient>\r\n <linearGradient\r\n id=\"stroke-gradient-{{id}}\"\r\n attr.gradientTransform=\"rotate({{_strokeRotate}}) translate({{(_strokeRotate / 180) % 0.5}})\"\r\n >\r\n <stop\r\n *ngFor=\"let item of _stroke; let idx = index\"\r\n [attr.offset]=\"linearGradientStopOffset(idx, _stroke)\"\r\n [attr.stop-color]=\"linearGradientStopColor(item)\"\r\n />\r\n </linearGradient>\r\n <circle\r\n *ngIf=\"type === 'circle'\"\r\n attr.fill=\"url(#fill-gradient-{{id}})\"\r\n [attr.fill-opacity]=\"fillOpacity\"\r\n attr.stroke=\"url(#stroke-gradient-{{id}})\"\r\n stroke-width=\"5\"\r\n cx=\"50\"\r\n cy=\"50\"\r\n r=\"47.5\"\r\n />\r\n <circle\r\n *ngIf=\"type === 'dot'\"\r\n attr.fill=\"url(#fill-gradient-{{id}})\"\r\n [attr.fill-opacity]=\"fillOpacity\"\r\n attr.stroke=\"url(#stroke-gradient-{{id}})\"\r\n stroke-width=\"5\"\r\n cx=\"50\"\r\n cy=\"50\"\r\n r=\"30\"\r\n />\r\n <path\r\n *ngIf=\"type === 'ring'\"\r\n attr.fill=\"url(#fill-gradient-{{id}})\"\r\n [attr.fill-opacity]=\"fillOpacity\"\r\n attr.stroke=\"url(#stroke-gradient-{{id}})\"\r\n stroke-width=\"5\"\r\n d=\"M50,2.5C23.767,2.5,2.5,23.767,2.5,50S23.767,97.5,50,97.5S97.5,76.233,97.5,50S76.233,2.5,50,2.5z M50,80c-16.568,0-30-13.432-30-30c0-16.568,13.432-30,30-30s30,13.432,30,30C80,66.568,66.568,80,50,80z\"\r\n />\r\n <rect\r\n *ngIf=\"type === 'square'\"\r\n attr.fill=\"url(#fill-gradient-{{id}})\"\r\n [attr.fill-opacity]=\"fillOpacity\"\r\n attr.stroke=\"url(#stroke-gradient-{{id}})\"\r\n stroke-width=\"5\"\r\n x=\"2.5\"\r\n y=\"2.5\"\r\n width=\"95\"\r\n height=\"95\"\r\n />\r\n <rect\r\n *ngIf=\"type === 'squircle'\"\r\n attr.fill=\"url(#fill-gradient-{{id}})\"\r\n [attr.fill-opacity]=\"fillOpacity\"\r\n attr.stroke=\"url(#stroke-gradient-{{id}})\"\r\n stroke-width=\"5\"\r\n x=\"2.5\"\r\n y=\"2.5\"\r\n width=\"95\"\r\n height=\"95\"\r\n rx=\"15\"\r\n />\r\n <rect\r\n *ngIf=\"type === 'minus'\"\r\n attr.fill=\"url(#fill-gradient-{{id}})\"\r\n [attr.fill-opacity]=\"fillOpacity\"\r\n attr.stroke=\"url(#stroke-gradient-{{id}})\"\r\n stroke-width=\"5\"\r\n x=\"2.5\"\r\n y=\"37.5\"\r\n width=\"95\"\r\n height=\"25\"\r\n />\r\n <polygon\r\n *ngIf=\"type === 'check'\"\r\n attr.fill=\"url(#fill-gradient-{{id}})\"\r\n [attr.fill-opacity]=\"fillOpacity\"\r\n attr.stroke=\"url(#stroke-gradient-{{id}})\"\r\n stroke-width=\"5\"\r\n points=\"96.465,27.488 82.322,13.347,37.257,58.367 17.675,38.785 3.535,52.928 37.259,86.652\"\r\n />\r\n <polygon\r\n *ngIf=\"type === 'times'\"\r\n attr.fill=\"url(#fill-gradient-{{id}})\"\r\n [attr.fill-opacity]=\"fillOpacity\"\r\n attr.stroke=\"url(#stroke-gradient-{{id}})\"\r\n stroke-width=\"5\"\r\n points=\"64.143,50 96.465,17.678 82.323,3.535,50,35.857 17.678,3.535 3.535,17.676 35.858,50 3.535,82.323 17.678,96.465 50.001,64.142 82.323,96.465 96.465,82.322\"\r\n />\r\n <polygon\r\n *ngIf=\"type === 'plus'\"\r\n attr.fill=\"url(#fill-gradient-{{id}})\"\r\n [attr.fill-opacity]=\"fillOpacity\"\r\n attr.stroke=\"url(#stroke-gradient-{{id}})\"\r\n stroke-width=\"5\"\r\n points=\"97.5,37.5 62.5,37.5 62.5,2.5 37.5,2.5 37.5,37.5 2.5,37.5 2.5,62.5 37.5,62.5 37.5,97.5 62.5,97.5 62.5,62.5 97.5,62.5\"\r\n />\r\n <polygon\r\n *ngIf=\"type === 'row'\"\r\n attr.fill=\"url(#fill-gradient-{{id}})\"\r\n [attr.fill-opacity]=\"fillOpacity\"\r\n attr.stroke=\"url(#stroke-gradient-{{id}})\"\r\n stroke-width=\"5\"\r\n points=\"96,50 66.5,20 66.5,37.5 33.5,37.5 33.5,20 4,50 33.5,80 33.5,62.5 66.5,62.5 66.5,80\"\r\n />\r\n <polygon\r\n *ngIf=\"type === 'column'\"\r\n attr.fill=\"url(#fill-gradient-{{id}})\"\r\n [attr.fill-opacity]=\"fillOpacity\"\r\n attr.stroke=\"url(#stroke-gradient-{{id}})\"\r\n stroke-width=\"5\"\r\n points=\"62.5,33.535 80,33.535 50,3.535 20,33.535 37.5,33.535 37.5,66.465 20,66.465 50,96.465 80,66.465 62.5,66.465\"\r\n />\r\n <polygon\r\n *ngIf=\"type === 'flag'\"\r\n attr.fill=\"url(#fill-gradient-{{id}})\"\r\n [attr.fill-opacity]=\"fillOpacity\"\r\n attr.stroke=\"url(#stroke-gradient-{{id}})\"\r\n stroke-width=\"5\"\r\n points=\"93,33.86 22.5,7.368 22.5,2.5 2.5,2.5 2.5,97.5 22.5,97.5 22.5,59.915\"\r\n />\r\n <path\r\n *ngIf=\"type === 'gear'\"\r\n attr.fill=\"url(#fill-gradient-{{id}})\"\r\n [attr.fill-opacity]=\"fillOpacity\"\r\n attr.stroke=\"url(#stroke-gradient-{{id}})\"\r\n stroke-width=\"5\"\r\n d=\"M96.35,39.625C95.178,34.369,93.14,29.44,90.385,25H80l-5-5V9.618C70.554,6.859,65.617,4.82,60.353,3.65L56.61,7.761L50,15.022l-6.61-7.261L39.647,3.65C34.382,4.82,29.447,6.859,25,9.618V20l-5,5H9.615C6.86,29.44,4.822,34.369,3.65,39.625l4.165,3.764L15.132,50l-7.316,6.61L3.65,60.375C4.822,65.631,6.86,70.56,9.615,75H20l5,5v10.382c4.441,2.755,9.371,4.793,14.628,5.964l3.761-4.162L50,84.867l6.61,7.316l3.761,4.162c5.258-1.171,10.188-3.209,14.629-5.964V80l5-5h10.385c2.755-4.44,4.793-9.369,5.965-14.625l-4.165-3.765L84.869,50l7.315-6.611L96.35,39.625z M50,72.5c-12.427,0-22.5-10.073-22.5-22.5c0-12.426,10.073-22.5,22.5-22.5S72.5,37.574,72.5,50C72.5,62.427,62.427,72.5,50,72.5z\"\r\n />\r\n <polygon\r\n *ngIf=\"type === 'star'\"\r\n attr.fill=\"url(#fill-gradient-{{id}})\"\r\n [attr.fill-opacity]=\"fillOpacity\"\r\n attr.stroke=\"url(#stroke-gradient-{{id}})\"\r\n stroke-width=\"5\"\r\n points=\"50,9.91 62.022,38.363 92.798,41.005\r\n69.453,61.23 76.45,91.316 50,75.364 23.55,91.315 30.547,61.23 7.203,41.005 37.978,38.363 \"\r\n />\r\n <!-- start user -->\r\n <circle\r\n *ngIf=\"type === 'user'\"\r\n fill=\"#FFFFFF\"\r\n attr.fill=\"url(#fill-gradient-{{id}})\"\r\n [attr.fill-opacity]=\"fillOpacity\"\r\n attr.stroke=\"url(#stroke-gradient-{{id}})\"\r\n stroke-width=\"5\"\r\n cx=\"50\"\r\n cy=\"27.5\"\r\n r=\"25\"\r\n />\r\n <path\r\n *ngIf=\"type === 'user'\"\r\n attr.fill=\"url(#fill-gradient-{{id}})\"\r\n [attr.fill-opacity]=\"fillOpacity\"\r\n attr.stroke=\"url(#stroke-gradient-{{id}})\"\r\n stroke-width=\"5\"\r\n d=\"M86.6,52.5H71.646 C67.324,59.971,59.252,65,50,65s-17.324-5.029-21.646-12.5H14.4c-6.297,0-11.9,5.373-11.9,12v33h95v-33 C97.5,57.873,92.896,52.5,86.6,52.5z\"\r\n />\r\n <!-- end user -->\r\n <path\r\n *ngIf=\"type === 'bomb'\"\r\n attr.fill=\"url(#fill-gradient-{{id}})\"\r\n [attr.fill-opacity]=\"fillOpacity\"\r\n attr.stroke=\"url(#stroke-gradient-{{id}})\"\r\n stroke-width=\"5\"\r\n d=\"M93.634,34.651c4.687-4.686,5.182-11.789,1.107-15.863L81.213,5.261c-4.074-4.076-11.178-3.58-15.863,1.105l-1.252,1.252C59.294,5.929,54.132,5,48.75,5C23.207,5,2.5,25.707,2.5,51.25S23.207,97.5,48.75,97.5S95,76.793,95,51.25c0-5.381-0.929-10.543-2.618-15.347L93.634,34.651z M70.4,64.681l-12.009-1.009l-1.091,12.001l-8.551-8.492l-8.55,8.492l-1.091-12.001L27.1,64.681l6.878-9.896L24.13,47.84l11.63-3.159l-3.08-11.65l10.939,5.056l5.13-10.905l5.131,10.905L64.82,33.03l-3.08,11.65l11.63,3.159l-9.849,6.945L70.4,64.681z\"\r\n />\r\n <!-- start refresh -->\r\n <path\r\n *ngIf=\"type === 'refresh'\"\r\n attr.fill=\"url(#fill-gradient-{{id}})\"\r\n [attr.fill-opacity]=\"fillOpacity\"\r\n attr.stroke=\"url(#stroke-gradient-{{id}})\"\r\n stroke-width=\"5\"\r\n stroke-miterlimit=\"10\"\r\n d=\"M50,80c-9.186,0-17.391-4.141-22.893-10.643L37.5,58.965h-35v35l12.204-12.204C23.395,91.42,35.982,97.5,50,97.5c26.232,0,47.5-21.268,47.5-47.5H80C80,66.568,66.568,80,50,80z\"\r\n />\r\n <path\r\n *ngIf=\"type === 'refresh'\"\r\n attr.fill=\"url(#fill-gradient-{{id}})\"\r\n [attr.fill-opacity]=\"fillOpacity\"\r\n attr.stroke=\"url(#stroke-gradient-{{id}})\"\r\n stroke-width=\"5\"\r\n stroke-miterlimit=\"10\"\r\n d=\"M85.296,18.24C76.605,8.58,64.018,2.5,50,2.5C23.768,2.5,2.5,23.768,2.5,50H20c0-16.568,13.432-30,30-30c9.186,0,17.393,4.141,22.893,10.643L62.5,41.036h35v-35L85.296,18.24z\"\r\n />\r\n <!-- end refresh -->\r\n <polygon\r\n *ngIf=\"type === 'ascend'\"\r\n attr.fill=\"url(#fill-gradient-{{id}})\"\r\n [attr.fill-opacity]=\"fillOpacity\"\r\n attr.stroke=\"url(#stroke-gradient-{{id}})\"\r\n stroke-width=\"5\"\r\n points=\"50,3.841 20,38.842 80,38.842\"\r\n />\r\n <polygon\r\n *ngIf=\"type === 'descend'\"\r\n attr.fill=\"url(#fill-gradient-{{id}})\"\r\n [attr.fill-opacity]=\"fillOpacity\"\r\n attr.stroke=\"url(#stroke-gradient-{{id}})\"\r\n stroke-width=\"5\"\r\n points=\"50,96.158 20,61.158 80,61.158\"\r\n />\r\n <path\r\n *ngIf=\"type === 'search'\"\r\n attr.fill=\"url(#fill-gradient-{{id}})\"\r\n [attr.fill-opacity]=\"fillOpacity\"\r\n attr.stroke=\"url(#stroke-gradient-{{id}})\"\r\n stroke-width=\"5\"\r\n stroke-miterlimit=\"10\"\r\n d=\"M96.465,87.627L70.56,61.721C74.924,55.591,77.5,48.099,77.5,40C77.5,19.29,60.711,2.5,40,2.5C19.29,2.5,2.5,19.29,2.5,40c0,20.711,16.79,37.5,37.5,37.5c8.098,0,15.591-2.575,21.72-6.94l25.906,25.905L96.465,87.627z M40,65c-13.807,0-25-11.192-25-25c0-13.807,11.193-25,25-25c13.808,0,25,11.193,25,25C65,53.808,53.808,65,40,65z\"\r\n />\r\n <path\r\n *ngIf=\"type === 'crown'\"\r\n attr.fill=\"url(#fill-gradient-{{id}})\"\r\n [attr.fill-opacity]=\"fillOpacity\"\r\n attr.stroke=\"url(#stroke-gradient-{{id}})\"\r\n stroke-width=\"5\"\r\n stroke-miterlimit=\"10\"\r\n d=\"M95,22.5c0-4.143-3.357-7.5-7.5-7.5\r\n\tS80,18.357,80,22.5c0,2.145,0.904,4.073,2.347,5.44L67.673,66.273l-13.37-50.136C56.234,14.781,57.5,12.54,57.5,10\r\n\tc0-4.143-3.357-7.5-7.5-7.5s-7.5,3.357-7.5,7.5c0,2.54,1.266,4.78,3.197,6.137l-13.37,50.136L17.654,27.939\r\n\tC19.096,26.573,20,24.644,20,22.5c0-4.143-3.357-7.5-7.5-7.5S5,18.357,5,22.5c0,3.673,2.642,6.724,6.128,7.369L14.857,72.5H12.5v15\r\n\tH10v10h80v-10h-2.5v-15h-2.356l3.729-42.631C92.358,29.223,95,26.173,95,22.5z\"\r\n />\r\n <path\r\n *ngIf=\"type === 'ogre'\"\r\n attr.fill=\"url(#fill-gradient-{{id}})\"\r\n [attr.fill-opacity]=\"fillOpacity\"\r\n attr.stroke=\"url(#stroke-gradient-{{id}})\"\r\n stroke-width=\"5\"\r\n stroke-miterlimit=\"10\"\r\n d=\"M82.5,5.721c0,0,5,5,5,15s-10,10-10,10h-3.519\r\n\tC72.018,28.728,69.393,27.5,66.5,27.5h-33c-2.894,0-5.518,1.228-7.481,3.221H22.5c0,0-10,0-10-10s5-15,5-15s-15,5-15,20\r\n\tc0,13.263,7.821,22.61,20,24.6V60.5c0,6.583,4.861,11.923,10.881,11.993C33.869,79.732,35,87.834,35,90c0,4.143,3.357,7.5,7.5,7.5\r\n\th15c4.143,0,7.5-3.357,7.5-7.5c0-2.166,1.131-10.268,1.62-17.507c6.019-0.07,10.88-5.41,10.88-11.993V50.32\r\n\tc12.179-1.989,20-11.337,20-24.6C97.5,10.721,82.5,5.721,82.5,5.721z M37.5,65c-4.143,0-7.5-3.357-7.5-7.5s3.357-7.5,7.5-7.5\r\n\ts7.5,3.357,7.5,7.5S41.643,65,37.5,65z M62.5,65c-4.143,0-7.5-3.357-7.5-7.5s3.357-7.5,7.5-7.5s7.5,3.357,7.5,7.5S66.643,65,62.5,65\r\n\tz\"\r\n />\r\n <path\r\n *ngIf=\"type === 'folder'\"\r\n attr.fill=\"url(#fill-gradient-{{id}})\"\r\n [attr.fill-opacity]=\"fillOpacity\"\r\n attr.stroke=\"url(#stroke-gradient-{{id}})\"\r\n stroke-width=\"5\"\r\n stroke-miterlimit=\"10\"\r\n d=\"M42.503,10.5c-9.836,0-28.103,0-28.103,0\r\n\tc-6.296,0-11.9,5.373-11.9,12v56c0,6.627,5.604,12,11.9,12h72.2c6.296,0,10.9-5.373,10.9-12c0,0,0-37.406,0-44\r\n\ts-4.467-11.989-10.9-12s-33.807,0-33.807,0S52.339,10.5,42.503,10.5z\"\r\n />\r\n <path\r\n *ngIf=\"type === 'chevron'\"\r\n attr.fill=\"url(#fill-gradient-{{id}})\"\r\n [attr.fill-opacity]=\"fillOpacity\"\r\n attr.stroke=\"url(#stroke-gradient-{{id}})\"\r\n stroke-width=\"5\"\r\n stroke-miterlimit=\"10\"\r\n d=\"M 81.371204,80.734189 96.459378,65.734039 50.000001,19.268573 3.5406224,65.734039 18.628797,80.734189 50.000001,49.268874 Z\"\r\n />\r\n <path\r\n *ngIf=\"type === 'ankh'\"\r\n attr.fill=\"url(#fill-gradient-{{id}})\"\r\n [attr.fill-opacity]=\"fillOpacity\"\r\n attr.stroke=\"url(#stroke-gradient-{{id}})\"\r\n stroke-width=\"5\"\r\n stroke-miterlimit=\"10\"\r\n d=\"M85,60l-5-15H60.938\r\n\tC65.605,36.781,70,27.677,70,22.5c0-11.046-8.955-20-20-20c-11.046,0-20,8.954-20,20c0,5.177,4.394,14.281,9.062,22.5H19.999L15,60\r\n\tl28.965-4.138L40,97.5h20l-3.967-41.638L85,60z M49.999,12.551c5.524,0,10.001,4.478,10.001,10c0,5.523-10.001,20-10.001,20\r\n\ts-10-14.477-10-20C40,17.028,44.477,12.551,49.999,12.551z\"\r\n />\r\n <polygon\r\n *ngIf=\"type === 'sun'\"\r\n attr.fill=\"url(#fill-gradient-{{id}})\"\r\n [attr.fill-opacity]=\"fillOpacity\"\r\n attr.stroke=\"url(#stroke-gradient-{{id}})\"\r\n stroke-width=\"5\"\r\n stroke-miterlimit=\"10\"\r\n points=\"50.001,5.864 57.541,21.864\r\n\t72.068,11.778 70.6,29.403 88.224,27.933 78.14,42.461 94.137,50 78.14,57.541 88.224,72.07 70.6,70.6 72.068,88.225 57.541,78.141\r\n\t50.001,94.137 42.461,78.141 27.933,88.225 29.403,70.6 11.777,72.07 21.863,57.541 5.864,50 21.863,42.461 11.777,27.933\r\n\t29.403,29.403 27.933,11.778 42.461,21.864 \"\r\n />\r\n <path\r\n *ngIf=\"type === 'moon'\"\r\n attr.fill=\"url(#fill-gradient-{{id}})\"\r\n [attr.fill-opacity]=\"fillOpacity\"\r\n attr.stroke=\"url(#stroke-gradient-{{id}})\"\r\n stroke-width=\"5\"\r\n stroke-miterlimit=\"10\"\r\n d=\"M90.029,62.626\r\n\tc-14.54,14.54-38.115,14.539-52.654,0c-14.54-14.54-14.54-38.114,0-52.654c2.739-2.74,5.802-4.963,9.061-6.67\r\n\tC35.463,4.049,24.701,8.604,16.313,16.991c-18.417,18.418-18.417,48.278,0,66.696c18.417,18.416,48.278,18.416,66.694,0\r\n\tc8.389-8.389,12.942-19.149,13.69-30.123C94.989,56.825,92.768,59.886,90.029,62.626z\"\r\n />\r\n <rect\r\n *ngIf=\"type === 'clear'\"\r\n x=\"2.5\"\r\n y=\"2.5\"\r\n attr.fill=\"url(#fill-gradient-{{id}})\"\r\n [attr.fill-opacity]=\"fillOpacity\"\r\n attr.stroke=\"url(#stroke-gradient-{{id}})\"\r\n stroke-width=\"5\"\r\n stroke-miterlimit=\"10\"\r\n width=\"75\"\r\n height=\"75\"\r\n />\r\n <rect\r\n *ngIf=\"type === 'clear'\"\r\n x=\"22.5\"\r\n y=\"22.5\"\r\n fill=\"none\"\r\n attr.stroke=\"url(#stroke-gradient-{{id}})\"\r\n stroke-width=\"5\"\r\n stroke-miterlimit=\"10\"\r\n stroke-dasharray=\"13.25 5.5\"\r\n width=\"75\"\r\n height=\"75\"\r\n />\r\n <path\r\n *ngIf=\"type === 'amphora'\"\r\n attr.fill=\"url(#fill-gradient-{{id}})\"\r\n [attr.fill-opacity]=\"fillOpacity\"\r\n attr.stroke=\"url(#stroke-gradient-{{id}})\"\r\n stroke-width=\"5\"\r\n stroke-miterlimit=\"10\"\r\n d=\"M92.5,28c0-11.046-7.835-20-17.5-20\r\n\tc-3.586,0-6.917,1.237-9.691,3.352c0.025-0.749,0.084-1.409,0.191-1.852c0.471-1.918,3.5-7,3.5-7H31c0,0,3.03,5.082,3.5,7\r\n\tc0.108,0.442,0.166,1.103,0.192,1.852C31.917,9.237,28.586,8,25,8C15.335,8,7.5,16.954,7.5,28c0,7.019,3.17,13.182,7.956,16.751\r\n\tC15.165,46.438,15,48.187,15,50c0,13.744,18.5,40.5,18.5,40.5l-2.5,7h38l-2.5-7c0,0,18.5-26.756,18.5-40.5\r\n\tc0-1.813-0.164-3.563-0.456-5.249C89.33,41.182,92.5,35.019,92.5,28z M15,28c0-6.903,4.478-12.5,10-12.5\r\n\tc2.789,0,5.309,1.43,7.122,3.732c-3.582,2.808-10.347,8.93-14.215,17.577C16.111,34.549,15,31.437,15,28z M82.093,36.809\r\n\tc-3.866-8.647-10.634-14.769-14.215-17.577C69.691,16.93,72.211,15.5,75,15.5c5.521,0,10,5.597,10,12.5\r\n\tC85,31.437,83.889,34.549,82.093,36.809z\"\r\n />\r\n <path\r\n *ngIf=\"type === 'speech'\"\r\n attr.fill=\"url(#fill-gradient-{{id}})\"\r\n [attr.fill-opacity]=\"fillOpacity\"\r\n attr.stroke=\"url(#stroke-gradient-{{id}})\"\r\n stroke-width=\"5\"\r\n stroke-miterlimit=\"10\"\r\n d=\"M50,2.5C26.702,2.5,2.5,22.339,2.5,45\r\n\tc0,8.368,3.307,16.347,8.641,23.084L3.979,94.813l23.196-13.393c7.078,3.83,15,6.076,22.825,6.076c23.299,0,47.5-19.838,47.5-42.5\r\n\tC97.5,22.336,73.299,2.5,50,2.5z M75,60.001H25c-2.762,0-5-2.238-5-5s2.238-5,5-5h50c2.762,0,5,2.239,5,5\r\n\tC80,57.763,77.762,60.001,75,60.001z M75,40H25c-2.762,0-5-2.239-5-5s2.238-5,5-5h50c2.762,0,5,2.239,5,5C80,37.763,77.762,40,75,40\r\n\tz\"\r\n />\r\n</svg>\r\n", styles: [":host{display:inline-block}:host>svg{display:block}:host>svg.spin-x{animation:spinX 1.5s linear infinite}:host>svg.spin-y{animation:spinY 1.5s linear infinite}:host>svg.spin-z{animation:spinZ 1.5s linear infinite}@keyframes spinX{0%{transform:rotateX(0)}to{transform:rotateX(360deg)}}@keyframes spinY{0%{transform:rotateY(0)}to{transform:rotateY(360deg)}}@keyframes spinZ{0%{transform:rotate(0)}to{transform:rotate(360deg)}}\n"] }]
|
|
464
|
+
}], ctorParameters: () => [], propDecorators: { type: [{
|
|
465
|
+
type: Input
|
|
466
|
+
}], fill: [{
|
|
467
|
+
type: Input
|
|
468
|
+
}], fillRotate: [{
|
|
469
|
+
type: Input
|
|
470
|
+
}], fillOpacity: [{
|
|
471
|
+
type: Input
|
|
472
|
+
}], stroke: [{
|
|
473
|
+
type: Input
|
|
474
|
+
}], strokeRotate: [{
|
|
475
|
+
type: Input
|
|
476
|
+
}], spin: [{
|
|
477
|
+
type: Input
|
|
478
|
+
}] } });
|
|
479
|
+
|
|
224
480
|
class ChoiceComponent extends ItemDirective {
|
|
225
481
|
constructor(ngControl) {
|
|
226
482
|
super(ngControl);
|
|
@@ -256,11 +512,11 @@ class ChoiceComponent extends ItemDirective {
|
|
|
256
512
|
this.model = [...this._model, item.key];
|
|
257
513
|
}
|
|
258
514
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: ChoiceComponent, deps: [{ token: i1.NgControl, self: true }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
259
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.5", type: ChoiceComponent, selector: "jo-choice", inputs: { isColumn: "isColumn" }, usesInheritance: true, ngImport: i0, template: "<div class=\"d-flex justify-content-between\">\r\n <label\r\n id=\"choice_{{id}}\"\r\n [class.required]=\"required\"\r\n >\r\n <ng-content></ng-content>\r\n </label>\r\n <div>\r\n <ng-content select=\"[rightAligned]\"></ng-content>\r\n </div>\r\n</div>\r\n\r\n<div\r\n class=\"d-flex flex-wrap align-items-start\"\r\n role=\"group\"\r\n attr.aria-labelledby=\"choice_{{id}}\"\r\n [class.flex-column]=\"isColumn\"\r\n>\r\n <button\r\n *ngFor=\"let item of items; let idx = index\"\r\n type=\"button\"\r\n class=\"d-flex align-items-center text-
|
|
515
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.5", type: ChoiceComponent, selector: "jo-choice", inputs: { isColumn: "isColumn" }, usesInheritance: true, ngImport: i0, template: "<div class=\"d-flex justify-content-between\">\r\n <label\r\n id=\"choice_{{id}}\"\r\n [class.required]=\"required\"\r\n >\r\n <ng-content></ng-content>\r\n </label>\r\n <div>\r\n <ng-content select=\"[rightAligned]\"></ng-content>\r\n </div>\r\n</div>\r\n\r\n<div\r\n class=\"d-flex flex-wrap align-items-start\"\r\n role=\"group\"\r\n attr.aria-labelledby=\"choice_{{id}}\"\r\n [class.flex-column]=\"isColumn\"\r\n>\r\n <button\r\n *ngFor=\"let item of items; let idx = index\"\r\n type=\"button\"\r\n class=\"d-flex align-items-center gap-2 text-start\"\r\n role=\"menuitemcheckbox\"\r\n [class.br-end]=\"borderRadiusRight\"\r\n [class.br-start]=\"borderRadiusLeft\"\r\n [disabled]=\"isDisabled\"\r\n (click)=\"onClick(item)\"\r\n (blur)=\"onTouched()\"\r\n >\r\n <div\r\n class=\"jo-button {{isMultiple ? 'br-20' : 'br-50'}}\"\r\n [class.active]=\"_model.includes(item.key)\"\r\n [class.disabled]=\"isDisabled\"\r\n [class.invalid]=\"ngControl.control?.invalid\"\r\n >\r\n <icon\r\n *ngIf=\"_model.includes(item.key)\"\r\n size=\"1rem\"\r\n [type]=\"isMultiple ? 'check' : 'dot'\"\r\n [fill]=\"[null, 'current']\"\r\n fillRotate=\"90\"\r\n ></icon>\r\n </div>\r\n <span>{{item.value}}</span>\r\n </button>\r\n</div>\r\n\r\n<!-- <ul *ngIf=\"ngControl.control?.errors\">\r\n <li *ngIf=\"ngControl.control?.errors?.['invalid']\">\r\n invalid model\r\n </li>\r\n</ul> -->", styles: [":host{display:block}:host>.d-flex>button{border-color:transparent;border-width:.075em}:host>.d-flex>button>.jo-button{position:relative;text-align:left}:host>.d-flex>button>.jo-button>icon{position:absolute;top:0;left:0}.br-20{border-radius:20%}.br-50{border-radius:50%}\n", "body{font-family:Arial;margin:0}h1,h2,h3,h4,h5,h6{margin:0}a:not(.jo-ignore),button:not(.jo-ignore),.jo-button,input,textarea{color:inherit;background:transparent;border-width:.15rem;border-style:outset;border-color:currentColor;padding:.5rem;margin:0;font-size:1rem;line-height:1rem;font-family:inherit;min-width:0}a:not(.jo-ignore):active,a:not(.jo-ignore).active,button:not(.jo-ignore):active,button:not(.jo-ignore).active,.jo-button:active,.jo-button.active,input:active,input.active,textarea:active,textarea.active{border-style:inset}a:not(.jo-ignore):disabled,a:not(.jo-ignore).disabled,button:not(.jo-ignore):disabled,button:not(.jo-ignore).disabled,.jo-button:disabled,.jo-button.disabled,input:disabled,input.disabled,textarea:disabled,textarea.disabled{cursor:not-allowed;border-style:solid;box-shadow:none;opacity:.5}a,button,.jo-button{cursor:pointer}.card{border:1px solid currentColor;border-radius:.5rem}.card .card-header{padding:1rem;border-bottom:1px solid currentColor}.card .card-body,.card .card-footer{padding:1rem}.card .card-table{overflow-x:auto}.card .card-body+.card-table,.card .card-table+.card-body,.card .card-body+.card-body,.card .card-table+.card-table,.card .card-table+.card-footer,.card .card-body+.card-footer{border-top:1px solid currentColor}.card table{width:100%;border-collapse:collapse}.card table>thead{text-align:left}.card table>thead th{border-bottom:1px solid currentColor}.card table>tfoot td{margin-top:1px;border-top:1px solid currentColor}.card table th,.card table td{padding:1rem}.card table tbody tr>td:last-child{text-align:right}.card table tbody tr:nth-child(odd) td{-webkit-backdrop-filter:brightness(85%);backdrop-filter:brightness(85%)}.card table tbody tr:last-child>td:first-child{border-bottom-left-radius:.5rem}.card table tbody tr:last-child>td:last-child{border-bottom-right-radius:.5rem}.card table tbody tr.active td{font-weight:700}.position-relative{position:relative}.d-flex{display:flex}.flex-row{flex-direction:row}.flex-column{flex-direction:column}.align-items-start{align-items:flex-start}.align-items-end{align-items:flex-end}.align-items-center{align-items:center}.align-items-baseline{align-items:baseline}.align-items-stretch{align-items:stretch}.justify-content-start{justify-content:flex-start}.justify-content-end{justify-content:flex-end}.justify-content-center{justify-content:center}.justify-content-between{justify-content:space-between}.justify-content-around{justify-content:space-around}.justify-content-evenly{justify-content:space-evenly}.flex-wrap{flex-wrap:wrap}.flex-1{flex:1}.flex-2{flex:2}.flex-3{flex:3}.flex-4{flex:4}.gap-1{gap:.25rem}.m-1{margin:.25rem}.p-1{padding:.25rem}.mx-1{margin-right:.25rem;margin-left:.25rem}.my-1{margin-top:.25rem;margin-bottom:.25rem}.px-1{padding-right:.25rem;padding-left:.25rem}.py-1{padding-top:.25rem;padding-bottom:.25rem}.ms-1{margin-right:.25rem}.me-1{margin-left:.25rem}.mt-1{margin-top:.25rem}.mb-1{margin-bottom:.25rem}.ps-1{padding-right:.25rem}.pe-1{padding-left:.25rem}.pt-1{padding-top:.25rem}.pb-1{padding-bottom:.25rem}.gap-2{gap:.5rem}.m-2{margin:.5rem}.p-2{padding:.5rem}.mx-2{margin-right:.5rem;margin-left:.5rem}.my-2{margin-top:.5rem;margin-bottom:.5rem}.px-2{padding-right:.5rem;padding-left:.5rem}.py-2{padding-top:.5rem;padding-bottom:.5rem}.ms-2{margin-right:.5rem}.me-2{margin-left:.5rem}.mt-2{margin-top:.5rem}.mb-2{margin-bottom:.5rem}.ps-2{padding-right:.5rem}.pe-2{padding-left:.5rem}.pt-2{padding-top:.5rem}.pb-2{padding-bottom:.5rem}.gap-3{gap:1rem}.m-3{margin:1rem}.p-3{padding:1rem}.mx-3{margin-right:1rem;margin-left:1rem}.my-3{margin-top:1rem;margin-bottom:1rem}.px-3{padding-right:1rem;padding-left:1rem}.py-3{padding-top:1rem;padding-bottom:1rem}.ms-3{margin-right:1rem}.me-3{margin-left:1rem}.mt-3{margin-top:1rem}.mb-3{margin-bottom:1rem}.ps-3{padding-right:1rem}.pe-3{padding-left:1rem}.pt-3{padding-top:1rem}.pb-3{padding-bottom:1rem}.gap-4{gap:1.5rem}.m-4{margin:1.5rem}.p-4{padding:1.5rem}.mx-4{margin-right:1.5rem;margin-left:1.5rem}.my-4{margin-top:1.5rem;margin-bottom:1.5rem}.px-4{padding-right:1.5rem;padding-left:1.5rem}.py-4{padding-top:1.5rem;padding-bottom:1.5rem}.ms-4{margin-right:1.5rem}.me-4{margin-left:1.5rem}.mt-4{margin-top:1.5rem}.mb-4{margin-bottom:1.5rem}.ps-4{padding-right:1.5rem}.pe-4{padding-left:1.5rem}.pt-4{padding-top:1.5rem}.pb-4{padding-bottom:1.5rem}.gap-5{gap:2rem}.m-5{margin:2rem}.p-5{padding:2rem}.mx-5{margin-right:2rem;margin-left:2rem}.my-5{margin-top:2rem;margin-bottom:2rem}.px-5{padding-right:2rem;padding-left:2rem}.py-5{padding-top:2rem;padding-bottom:2rem}.ms-5{margin-right:2rem}.me-5{margin-left:2rem}.mt-5{margin-top:2rem}.mb-5{margin-bottom:2rem}.ps-5{padding-right:2rem}.pe-5{padding-left:2rem}.pt-5{padding-top:2rem}.pb-5{padding-bottom:2rem}.border{border:1px solid currentColor}.br-start{border-top-left-radius:.5rem;border-bottom-left-radius:.5rem}.br-end{border-top-right-radius:.5rem;border-bottom-right-radius:.5rem}.white-space-nowrap{white-space:nowrap}.text-end{text-align:right}.text-start{text-align:left}.text-center{text-align:center}.overflow-auto{overflow:auto}.overflow-hidden{overflow:hidden}label{display:block;padding-bottom:.5rem;font-weight:700}label:empty{display:none}label.required:after{content:\"*\"}ul{list-style:none;margin:0;padding:0}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: IconComponent, selector: "icon[type]", inputs: ["type", "fill", "fillRotate", "fillOpacity", "stroke", "strokeRotate", "spin"] }, { kind: "directive", type: SizeDirective, selector: "[size]", inputs: ["size"] }] }); }
|
|
260
516
|
}
|
|
261
517
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: ChoiceComponent, decorators: [{
|
|
262
518
|
type: Component,
|
|
263
|
-
args: [{ selector: 'jo-choice', template: "<div class=\"d-flex justify-content-between\">\r\n <label\r\n id=\"choice_{{id}}\"\r\n [class.required]=\"required\"\r\n >\r\n <ng-content></ng-content>\r\n </label>\r\n <div>\r\n <ng-content select=\"[rightAligned]\"></ng-content>\r\n </div>\r\n</div>\r\n\r\n<div\r\n class=\"d-flex flex-wrap align-items-start\"\r\n role=\"group\"\r\n attr.aria-labelledby=\"choice_{{id}}\"\r\n [class.flex-column]=\"isColumn\"\r\n>\r\n <button\r\n *ngFor=\"let item of items; let idx = index\"\r\n type=\"button\"\r\n class=\"d-flex align-items-center text-
|
|
519
|
+
args: [{ selector: 'jo-choice', template: "<div class=\"d-flex justify-content-between\">\r\n <label\r\n id=\"choice_{{id}}\"\r\n [class.required]=\"required\"\r\n >\r\n <ng-content></ng-content>\r\n </label>\r\n <div>\r\n <ng-content select=\"[rightAligned]\"></ng-content>\r\n </div>\r\n</div>\r\n\r\n<div\r\n class=\"d-flex flex-wrap align-items-start\"\r\n role=\"group\"\r\n attr.aria-labelledby=\"choice_{{id}}\"\r\n [class.flex-column]=\"isColumn\"\r\n>\r\n <button\r\n *ngFor=\"let item of items; let idx = index\"\r\n type=\"button\"\r\n class=\"d-flex align-items-center gap-2 text-start\"\r\n role=\"menuitemcheckbox\"\r\n [class.br-end]=\"borderRadiusRight\"\r\n [class.br-start]=\"borderRadiusLeft\"\r\n [disabled]=\"isDisabled\"\r\n (click)=\"onClick(item)\"\r\n (blur)=\"onTouched()\"\r\n >\r\n <div\r\n class=\"jo-button {{isMultiple ? 'br-20' : 'br-50'}}\"\r\n [class.active]=\"_model.includes(item.key)\"\r\n [class.disabled]=\"isDisabled\"\r\n [class.invalid]=\"ngControl.control?.invalid\"\r\n >\r\n <icon\r\n *ngIf=\"_model.includes(item.key)\"\r\n size=\"1rem\"\r\n [type]=\"isMultiple ? 'check' : 'dot'\"\r\n [fill]=\"[null, 'current']\"\r\n fillRotate=\"90\"\r\n ></icon>\r\n </div>\r\n <span>{{item.value}}</span>\r\n </button>\r\n</div>\r\n\r\n<!-- <ul *ngIf=\"ngControl.control?.errors\">\r\n <li *ngIf=\"ngControl.control?.errors?.['invalid']\">\r\n invalid model\r\n </li>\r\n</ul> -->", styles: [":host{display:block}:host>.d-flex>button{border-color:transparent;border-width:.075em}:host>.d-flex>button>.jo-button{position:relative;text-align:left}:host>.d-flex>button>.jo-button>icon{position:absolute;top:0;left:0}.br-20{border-radius:20%}.br-50{border-radius:50%}\n", "body{font-family:Arial;margin:0}h1,h2,h3,h4,h5,h6{margin:0}a:not(.jo-ignore),button:not(.jo-ignore),.jo-button,input,textarea{color:inherit;background:transparent;border-width:.15rem;border-style:outset;border-color:currentColor;padding:.5rem;margin:0;font-size:1rem;line-height:1rem;font-family:inherit;min-width:0}a:not(.jo-ignore):active,a:not(.jo-ignore).active,button:not(.jo-ignore):active,button:not(.jo-ignore).active,.jo-button:active,.jo-button.active,input:active,input.active,textarea:active,textarea.active{border-style:inset}a:not(.jo-ignore):disabled,a:not(.jo-ignore).disabled,button:not(.jo-ignore):disabled,button:not(.jo-ignore).disabled,.jo-button:disabled,.jo-button.disabled,input:disabled,input.disabled,textarea:disabled,textarea.disabled{cursor:not-allowed;border-style:solid;box-shadow:none;opacity:.5}a,button,.jo-button{cursor:pointer}.card{border:1px solid currentColor;border-radius:.5rem}.card .card-header{padding:1rem;border-bottom:1px solid currentColor}.card .card-body,.card .card-footer{padding:1rem}.card .card-table{overflow-x:auto}.card .card-body+.card-table,.card .card-table+.card-body,.card .card-body+.card-body,.card .card-table+.card-table,.card .card-table+.card-footer,.card .card-body+.card-footer{border-top:1px solid currentColor}.card table{width:100%;border-collapse:collapse}.card table>thead{text-align:left}.card table>thead th{border-bottom:1px solid currentColor}.card table>tfoot td{margin-top:1px;border-top:1px solid currentColor}.card table th,.card table td{padding:1rem}.card table tbody tr>td:last-child{text-align:right}.card table tbody tr:nth-child(odd) td{-webkit-backdrop-filter:brightness(85%);backdrop-filter:brightness(85%)}.card table tbody tr:last-child>td:first-child{border-bottom-left-radius:.5rem}.card table tbody tr:last-child>td:last-child{border-bottom-right-radius:.5rem}.card table tbody tr.active td{font-weight:700}.position-relative{position:relative}.d-flex{display:flex}.flex-row{flex-direction:row}.flex-column{flex-direction:column}.align-items-start{align-items:flex-start}.align-items-end{align-items:flex-end}.align-items-center{align-items:center}.align-items-baseline{align-items:baseline}.align-items-stretch{align-items:stretch}.justify-content-start{justify-content:flex-start}.justify-content-end{justify-content:flex-end}.justify-content-center{justify-content:center}.justify-content-between{justify-content:space-between}.justify-content-around{justify-content:space-around}.justify-content-evenly{justify-content:space-evenly}.flex-wrap{flex-wrap:wrap}.flex-1{flex:1}.flex-2{flex:2}.flex-3{flex:3}.flex-4{flex:4}.gap-1{gap:.25rem}.m-1{margin:.25rem}.p-1{padding:.25rem}.mx-1{margin-right:.25rem;margin-left:.25rem}.my-1{margin-top:.25rem;margin-bottom:.25rem}.px-1{padding-right:.25rem;padding-left:.25rem}.py-1{padding-top:.25rem;padding-bottom:.25rem}.ms-1{margin-right:.25rem}.me-1{margin-left:.25rem}.mt-1{margin-top:.25rem}.mb-1{margin-bottom:.25rem}.ps-1{padding-right:.25rem}.pe-1{padding-left:.25rem}.pt-1{padding-top:.25rem}.pb-1{padding-bottom:.25rem}.gap-2{gap:.5rem}.m-2{margin:.5rem}.p-2{padding:.5rem}.mx-2{margin-right:.5rem;margin-left:.5rem}.my-2{margin-top:.5rem;margin-bottom:.5rem}.px-2{padding-right:.5rem;padding-left:.5rem}.py-2{padding-top:.5rem;padding-bottom:.5rem}.ms-2{margin-right:.5rem}.me-2{margin-left:.5rem}.mt-2{margin-top:.5rem}.mb-2{margin-bottom:.5rem}.ps-2{padding-right:.5rem}.pe-2{padding-left:.5rem}.pt-2{padding-top:.5rem}.pb-2{padding-bottom:.5rem}.gap-3{gap:1rem}.m-3{margin:1rem}.p-3{padding:1rem}.mx-3{margin-right:1rem;margin-left:1rem}.my-3{margin-top:1rem;margin-bottom:1rem}.px-3{padding-right:1rem;padding-left:1rem}.py-3{padding-top:1rem;padding-bottom:1rem}.ms-3{margin-right:1rem}.me-3{margin-left:1rem}.mt-3{margin-top:1rem}.mb-3{margin-bottom:1rem}.ps-3{padding-right:1rem}.pe-3{padding-left:1rem}.pt-3{padding-top:1rem}.pb-3{padding-bottom:1rem}.gap-4{gap:1.5rem}.m-4{margin:1.5rem}.p-4{padding:1.5rem}.mx-4{margin-right:1.5rem;margin-left:1.5rem}.my-4{margin-top:1.5rem;margin-bottom:1.5rem}.px-4{padding-right:1.5rem;padding-left:1.5rem}.py-4{padding-top:1.5rem;padding-bottom:1.5rem}.ms-4{margin-right:1.5rem}.me-4{margin-left:1.5rem}.mt-4{margin-top:1.5rem}.mb-4{margin-bottom:1.5rem}.ps-4{padding-right:1.5rem}.pe-4{padding-left:1.5rem}.pt-4{padding-top:1.5rem}.pb-4{padding-bottom:1.5rem}.gap-5{gap:2rem}.m-5{margin:2rem}.p-5{padding:2rem}.mx-5{margin-right:2rem;margin-left:2rem}.my-5{margin-top:2rem;margin-bottom:2rem}.px-5{padding-right:2rem;padding-left:2rem}.py-5{padding-top:2rem;padding-bottom:2rem}.ms-5{margin-right:2rem}.me-5{margin-left:2rem}.mt-5{margin-top:2rem}.mb-5{margin-bottom:2rem}.ps-5{padding-right:2rem}.pe-5{padding-left:2rem}.pt-5{padding-top:2rem}.pb-5{padding-bottom:2rem}.border{border:1px solid currentColor}.br-start{border-top-left-radius:.5rem;border-bottom-left-radius:.5rem}.br-end{border-top-right-radius:.5rem;border-bottom-right-radius:.5rem}.white-space-nowrap{white-space:nowrap}.text-end{text-align:right}.text-start{text-align:left}.text-center{text-align:center}.overflow-auto{overflow:auto}.overflow-hidden{overflow:hidden}label{display:block;padding-bottom:.5rem;font-weight:700}label:empty{display:none}label.required:after{content:\"*\"}ul{list-style:none;margin:0;padding:0}\n"] }]
|
|
264
520
|
}], ctorParameters: () => [{ type: i1.NgControl, decorators: [{
|
|
265
521
|
type: Self
|
|
266
522
|
}] }], propDecorators: { isColumn: [{
|
|
@@ -328,11 +584,11 @@ class ColorComponent extends ControlDirective {
|
|
|
328
584
|
this.ngControl.control?.updateValueAndValidity();
|
|
329
585
|
}
|
|
330
586
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: ColorComponent, deps: [{ token: i1.NgControl, self: true }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
331
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.5", type: ColorComponent, selector: "jo-color", usesInheritance: true, ngImport: i0, template: "<label\r\n [for]=\"id\"\r\n [class.required]=\"required\"\r\n>\r\n <ng-content></ng-content>\r\n</label>\r\n\r\n<div class=\"d-flex align-items-stretch\">\r\n <button\r\n class=\"d-flex align-items-center\"\r\n title=\"Color\"\r\n [class.
|
|
587
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.5", type: ColorComponent, selector: "jo-color", usesInheritance: true, ngImport: i0, template: "<label\r\n [for]=\"id\"\r\n [class.required]=\"required\"\r\n>\r\n <ng-content></ng-content>\r\n</label>\r\n\r\n<div class=\"d-flex align-items-stretch\">\r\n <button\r\n class=\"d-flex align-items-center\"\r\n title=\"Color\"\r\n [class.br-start]=\"borderRadiusLeft\"\r\n [disabled]=\"isDisabled\"\r\n (click)=\"colorInput.click()\"\r\n >\r\n <icon\r\n size=\"1rem\"\r\n type=\"square\"\r\n [fill]=\"fullHex.test(_model || '') ? _model : [null, 'current']\"\r\n fillRotate=\"90\"\r\n [stroke]=\"fullHex.test(_model || '') ? _model : ['current']\"\r\n ></icon>\r\n </button>\r\n <input\r\n [(ngModel)]=\"model\"\r\n spellcheck=\"false\"\r\n size=\"5\"\r\n type=\"text\"\r\n [class.active]=\"ngControl.control?.value !== null\"\r\n [class.br-end]=\"borderRadiusRight\"\r\n [class.invalid]=\"ngControl.control?.invalid\"\r\n [disabled]=\"isDisabled\"\r\n [id]=\"id\"\r\n (beforeinput)=\"onBeforeinput($event)\"\r\n (blur)=\"onTouched()\"\r\n />\r\n</div>\r\n\r\n<!-- <ul *ngIf=\"ngControl.control?.errors\">\r\n <li *ngIf=\"ngControl.control?.errors?.['invalid']\">\r\n invalid model\r\n </li>\r\n</ul> -->\r\n\r\n<input\r\n #colorInput\r\n type=\"color\"\r\n (change)=\"onChangeColor($event)\"\r\n/>", styles: [":host{display:block}input[type=color]{margin-top:-2em;padding:0;position:absolute;visibility:hidden;transition:none}:host>div>input{border-left:0}:host>div>button{border-right:0}\n", "body{font-family:Arial;margin:0}h1,h2,h3,h4,h5,h6{margin:0}a:not(.jo-ignore),button:not(.jo-ignore),.jo-button,input,textarea{color:inherit;background:transparent;border-width:.15rem;border-style:outset;border-color:currentColor;padding:.5rem;margin:0;font-size:1rem;line-height:1rem;font-family:inherit;min-width:0}a:not(.jo-ignore):active,a:not(.jo-ignore).active,button:not(.jo-ignore):active,button:not(.jo-ignore).active,.jo-button:active,.jo-button.active,input:active,input.active,textarea:active,textarea.active{border-style:inset}a:not(.jo-ignore):disabled,a:not(.jo-ignore).disabled,button:not(.jo-ignore):disabled,button:not(.jo-ignore).disabled,.jo-button:disabled,.jo-button.disabled,input:disabled,input.disabled,textarea:disabled,textarea.disabled{cursor:not-allowed;border-style:solid;box-shadow:none;opacity:.5}a,button,.jo-button{cursor:pointer}.card{border:1px solid currentColor;border-radius:.5rem}.card .card-header{padding:1rem;border-bottom:1px solid currentColor}.card .card-body,.card .card-footer{padding:1rem}.card .card-table{overflow-x:auto}.card .card-body+.card-table,.card .card-table+.card-body,.card .card-body+.card-body,.card .card-table+.card-table,.card .card-table+.card-footer,.card .card-body+.card-footer{border-top:1px solid currentColor}.card table{width:100%;border-collapse:collapse}.card table>thead{text-align:left}.card table>thead th{border-bottom:1px solid currentColor}.card table>tfoot td{margin-top:1px;border-top:1px solid currentColor}.card table th,.card table td{padding:1rem}.card table tbody tr>td:last-child{text-align:right}.card table tbody tr:nth-child(odd) td{-webkit-backdrop-filter:brightness(85%);backdrop-filter:brightness(85%)}.card table tbody tr:last-child>td:first-child{border-bottom-left-radius:.5rem}.card table tbody tr:last-child>td:last-child{border-bottom-right-radius:.5rem}.card table tbody tr.active td{font-weight:700}.position-relative{position:relative}.d-flex{display:flex}.flex-row{flex-direction:row}.flex-column{flex-direction:column}.align-items-start{align-items:flex-start}.align-items-end{align-items:flex-end}.align-items-center{align-items:center}.align-items-baseline{align-items:baseline}.align-items-stretch{align-items:stretch}.justify-content-start{justify-content:flex-start}.justify-content-end{justify-content:flex-end}.justify-content-center{justify-content:center}.justify-content-between{justify-content:space-between}.justify-content-around{justify-content:space-around}.justify-content-evenly{justify-content:space-evenly}.flex-wrap{flex-wrap:wrap}.flex-1{flex:1}.flex-2{flex:2}.flex-3{flex:3}.flex-4{flex:4}.gap-1{gap:.25rem}.m-1{margin:.25rem}.p-1{padding:.25rem}.mx-1{margin-right:.25rem;margin-left:.25rem}.my-1{margin-top:.25rem;margin-bottom:.25rem}.px-1{padding-right:.25rem;padding-left:.25rem}.py-1{padding-top:.25rem;padding-bottom:.25rem}.ms-1{margin-right:.25rem}.me-1{margin-left:.25rem}.mt-1{margin-top:.25rem}.mb-1{margin-bottom:.25rem}.ps-1{padding-right:.25rem}.pe-1{padding-left:.25rem}.pt-1{padding-top:.25rem}.pb-1{padding-bottom:.25rem}.gap-2{gap:.5rem}.m-2{margin:.5rem}.p-2{padding:.5rem}.mx-2{margin-right:.5rem;margin-left:.5rem}.my-2{margin-top:.5rem;margin-bottom:.5rem}.px-2{padding-right:.5rem;padding-left:.5rem}.py-2{padding-top:.5rem;padding-bottom:.5rem}.ms-2{margin-right:.5rem}.me-2{margin-left:.5rem}.mt-2{margin-top:.5rem}.mb-2{margin-bottom:.5rem}.ps-2{padding-right:.5rem}.pe-2{padding-left:.5rem}.pt-2{padding-top:.5rem}.pb-2{padding-bottom:.5rem}.gap-3{gap:1rem}.m-3{margin:1rem}.p-3{padding:1rem}.mx-3{margin-right:1rem;margin-left:1rem}.my-3{margin-top:1rem;margin-bottom:1rem}.px-3{padding-right:1rem;padding-left:1rem}.py-3{padding-top:1rem;padding-bottom:1rem}.ms-3{margin-right:1rem}.me-3{margin-left:1rem}.mt-3{margin-top:1rem}.mb-3{margin-bottom:1rem}.ps-3{padding-right:1rem}.pe-3{padding-left:1rem}.pt-3{padding-top:1rem}.pb-3{padding-bottom:1rem}.gap-4{gap:1.5rem}.m-4{margin:1.5rem}.p-4{padding:1.5rem}.mx-4{margin-right:1.5rem;margin-left:1.5rem}.my-4{margin-top:1.5rem;margin-bottom:1.5rem}.px-4{padding-right:1.5rem;padding-left:1.5rem}.py-4{padding-top:1.5rem;padding-bottom:1.5rem}.ms-4{margin-right:1.5rem}.me-4{margin-left:1.5rem}.mt-4{margin-top:1.5rem}.mb-4{margin-bottom:1.5rem}.ps-4{padding-right:1.5rem}.pe-4{padding-left:1.5rem}.pt-4{padding-top:1.5rem}.pb-4{padding-bottom:1.5rem}.gap-5{gap:2rem}.m-5{margin:2rem}.p-5{padding:2rem}.mx-5{margin-right:2rem;margin-left:2rem}.my-5{margin-top:2rem;margin-bottom:2rem}.px-5{padding-right:2rem;padding-left:2rem}.py-5{padding-top:2rem;padding-bottom:2rem}.ms-5{margin-right:2rem}.me-5{margin-left:2rem}.mt-5{margin-top:2rem}.mb-5{margin-bottom:2rem}.ps-5{padding-right:2rem}.pe-5{padding-left:2rem}.pt-5{padding-top:2rem}.pb-5{padding-bottom:2rem}.border{border:1px solid currentColor}.br-start{border-top-left-radius:.5rem;border-bottom-left-radius:.5rem}.br-end{border-top-right-radius:.5rem;border-bottom-right-radius:.5rem}.white-space-nowrap{white-space:nowrap}.text-end{text-align:right}.text-start{text-align:left}.text-center{text-align:center}.overflow-auto{overflow:auto}.overflow-hidden{overflow:hidden}label{display:block;padding-bottom:.5rem;font-weight:700}label:empty{display:none}label.required:after{content:\"*\"}ul{list-style:none;margin:0;padding:0}\n"], dependencies: [{ kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: IconComponent, selector: "icon[type]", inputs: ["type", "fill", "fillRotate", "fillOpacity", "stroke", "strokeRotate", "spin"] }, { kind: "directive", type: SizeDirective, selector: "[size]", inputs: ["size"] }] }); }
|
|
332
588
|
}
|
|
333
589
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: ColorComponent, decorators: [{
|
|
334
590
|
type: Component,
|
|
335
|
-
args: [{ selector: 'jo-color', template: "<label\r\n [for]=\"id\"\r\n [class.required]=\"required\"\r\n>\r\n <ng-content></ng-content>\r\n</label>\r\n\r\n<div class=\"d-flex align-items-stretch\">\r\n <button\r\n class=\"d-flex align-items-center\"\r\n title=\"Color\"\r\n [class.
|
|
591
|
+
args: [{ selector: 'jo-color', template: "<label\r\n [for]=\"id\"\r\n [class.required]=\"required\"\r\n>\r\n <ng-content></ng-content>\r\n</label>\r\n\r\n<div class=\"d-flex align-items-stretch\">\r\n <button\r\n class=\"d-flex align-items-center\"\r\n title=\"Color\"\r\n [class.br-start]=\"borderRadiusLeft\"\r\n [disabled]=\"isDisabled\"\r\n (click)=\"colorInput.click()\"\r\n >\r\n <icon\r\n size=\"1rem\"\r\n type=\"square\"\r\n [fill]=\"fullHex.test(_model || '') ? _model : [null, 'current']\"\r\n fillRotate=\"90\"\r\n [stroke]=\"fullHex.test(_model || '') ? _model : ['current']\"\r\n ></icon>\r\n </button>\r\n <input\r\n [(ngModel)]=\"model\"\r\n spellcheck=\"false\"\r\n size=\"5\"\r\n type=\"text\"\r\n [class.active]=\"ngControl.control?.value !== null\"\r\n [class.br-end]=\"borderRadiusRight\"\r\n [class.invalid]=\"ngControl.control?.invalid\"\r\n [disabled]=\"isDisabled\"\r\n [id]=\"id\"\r\n (beforeinput)=\"onBeforeinput($event)\"\r\n (blur)=\"onTouched()\"\r\n />\r\n</div>\r\n\r\n<!-- <ul *ngIf=\"ngControl.control?.errors\">\r\n <li *ngIf=\"ngControl.control?.errors?.['invalid']\">\r\n invalid model\r\n </li>\r\n</ul> -->\r\n\r\n<input\r\n #colorInput\r\n type=\"color\"\r\n (change)=\"onChangeColor($event)\"\r\n/>", styles: [":host{display:block}input[type=color]{margin-top:-2em;padding:0;position:absolute;visibility:hidden;transition:none}:host>div>input{border-left:0}:host>div>button{border-right:0}\n", "body{font-family:Arial;margin:0}h1,h2,h3,h4,h5,h6{margin:0}a:not(.jo-ignore),button:not(.jo-ignore),.jo-button,input,textarea{color:inherit;background:transparent;border-width:.15rem;border-style:outset;border-color:currentColor;padding:.5rem;margin:0;font-size:1rem;line-height:1rem;font-family:inherit;min-width:0}a:not(.jo-ignore):active,a:not(.jo-ignore).active,button:not(.jo-ignore):active,button:not(.jo-ignore).active,.jo-button:active,.jo-button.active,input:active,input.active,textarea:active,textarea.active{border-style:inset}a:not(.jo-ignore):disabled,a:not(.jo-ignore).disabled,button:not(.jo-ignore):disabled,button:not(.jo-ignore).disabled,.jo-button:disabled,.jo-button.disabled,input:disabled,input.disabled,textarea:disabled,textarea.disabled{cursor:not-allowed;border-style:solid;box-shadow:none;opacity:.5}a,button,.jo-button{cursor:pointer}.card{border:1px solid currentColor;border-radius:.5rem}.card .card-header{padding:1rem;border-bottom:1px solid currentColor}.card .card-body,.card .card-footer{padding:1rem}.card .card-table{overflow-x:auto}.card .card-body+.card-table,.card .card-table+.card-body,.card .card-body+.card-body,.card .card-table+.card-table,.card .card-table+.card-footer,.card .card-body+.card-footer{border-top:1px solid currentColor}.card table{width:100%;border-collapse:collapse}.card table>thead{text-align:left}.card table>thead th{border-bottom:1px solid currentColor}.card table>tfoot td{margin-top:1px;border-top:1px solid currentColor}.card table th,.card table td{padding:1rem}.card table tbody tr>td:last-child{text-align:right}.card table tbody tr:nth-child(odd) td{-webkit-backdrop-filter:brightness(85%);backdrop-filter:brightness(85%)}.card table tbody tr:last-child>td:first-child{border-bottom-left-radius:.5rem}.card table tbody tr:last-child>td:last-child{border-bottom-right-radius:.5rem}.card table tbody tr.active td{font-weight:700}.position-relative{position:relative}.d-flex{display:flex}.flex-row{flex-direction:row}.flex-column{flex-direction:column}.align-items-start{align-items:flex-start}.align-items-end{align-items:flex-end}.align-items-center{align-items:center}.align-items-baseline{align-items:baseline}.align-items-stretch{align-items:stretch}.justify-content-start{justify-content:flex-start}.justify-content-end{justify-content:flex-end}.justify-content-center{justify-content:center}.justify-content-between{justify-content:space-between}.justify-content-around{justify-content:space-around}.justify-content-evenly{justify-content:space-evenly}.flex-wrap{flex-wrap:wrap}.flex-1{flex:1}.flex-2{flex:2}.flex-3{flex:3}.flex-4{flex:4}.gap-1{gap:.25rem}.m-1{margin:.25rem}.p-1{padding:.25rem}.mx-1{margin-right:.25rem;margin-left:.25rem}.my-1{margin-top:.25rem;margin-bottom:.25rem}.px-1{padding-right:.25rem;padding-left:.25rem}.py-1{padding-top:.25rem;padding-bottom:.25rem}.ms-1{margin-right:.25rem}.me-1{margin-left:.25rem}.mt-1{margin-top:.25rem}.mb-1{margin-bottom:.25rem}.ps-1{padding-right:.25rem}.pe-1{padding-left:.25rem}.pt-1{padding-top:.25rem}.pb-1{padding-bottom:.25rem}.gap-2{gap:.5rem}.m-2{margin:.5rem}.p-2{padding:.5rem}.mx-2{margin-right:.5rem;margin-left:.5rem}.my-2{margin-top:.5rem;margin-bottom:.5rem}.px-2{padding-right:.5rem;padding-left:.5rem}.py-2{padding-top:.5rem;padding-bottom:.5rem}.ms-2{margin-right:.5rem}.me-2{margin-left:.5rem}.mt-2{margin-top:.5rem}.mb-2{margin-bottom:.5rem}.ps-2{padding-right:.5rem}.pe-2{padding-left:.5rem}.pt-2{padding-top:.5rem}.pb-2{padding-bottom:.5rem}.gap-3{gap:1rem}.m-3{margin:1rem}.p-3{padding:1rem}.mx-3{margin-right:1rem;margin-left:1rem}.my-3{margin-top:1rem;margin-bottom:1rem}.px-3{padding-right:1rem;padding-left:1rem}.py-3{padding-top:1rem;padding-bottom:1rem}.ms-3{margin-right:1rem}.me-3{margin-left:1rem}.mt-3{margin-top:1rem}.mb-3{margin-bottom:1rem}.ps-3{padding-right:1rem}.pe-3{padding-left:1rem}.pt-3{padding-top:1rem}.pb-3{padding-bottom:1rem}.gap-4{gap:1.5rem}.m-4{margin:1.5rem}.p-4{padding:1.5rem}.mx-4{margin-right:1.5rem;margin-left:1.5rem}.my-4{margin-top:1.5rem;margin-bottom:1.5rem}.px-4{padding-right:1.5rem;padding-left:1.5rem}.py-4{padding-top:1.5rem;padding-bottom:1.5rem}.ms-4{margin-right:1.5rem}.me-4{margin-left:1.5rem}.mt-4{margin-top:1.5rem}.mb-4{margin-bottom:1.5rem}.ps-4{padding-right:1.5rem}.pe-4{padding-left:1.5rem}.pt-4{padding-top:1.5rem}.pb-4{padding-bottom:1.5rem}.gap-5{gap:2rem}.m-5{margin:2rem}.p-5{padding:2rem}.mx-5{margin-right:2rem;margin-left:2rem}.my-5{margin-top:2rem;margin-bottom:2rem}.px-5{padding-right:2rem;padding-left:2rem}.py-5{padding-top:2rem;padding-bottom:2rem}.ms-5{margin-right:2rem}.me-5{margin-left:2rem}.mt-5{margin-top:2rem}.mb-5{margin-bottom:2rem}.ps-5{padding-right:2rem}.pe-5{padding-left:2rem}.pt-5{padding-top:2rem}.pb-5{padding-bottom:2rem}.border{border:1px solid currentColor}.br-start{border-top-left-radius:.5rem;border-bottom-left-radius:.5rem}.br-end{border-top-right-radius:.5rem;border-bottom-right-radius:.5rem}.white-space-nowrap{white-space:nowrap}.text-end{text-align:right}.text-start{text-align:left}.text-center{text-align:center}.overflow-auto{overflow:auto}.overflow-hidden{overflow:hidden}label{display:block;padding-bottom:.5rem;font-weight:700}label:empty{display:none}label.required:after{content:\"*\"}ul{list-style:none;margin:0;padding:0}\n"] }]
|
|
336
592
|
}], ctorParameters: () => [{ type: i1.NgControl, decorators: [{
|
|
337
593
|
type: Self
|
|
338
594
|
}] }] });
|
|
@@ -395,6 +651,9 @@ class FileComponent extends ControlDirective {
|
|
|
395
651
|
? target.files
|
|
396
652
|
: null);
|
|
397
653
|
}
|
|
654
|
+
onFileCancel() {
|
|
655
|
+
this.onChange(null);
|
|
656
|
+
}
|
|
398
657
|
onChange(_model) { }
|
|
399
658
|
registerOnChange(fn) {
|
|
400
659
|
this.onChange = fn;
|
|
@@ -442,11 +701,11 @@ class FileComponent extends ControlDirective {
|
|
|
442
701
|
this.ngControl.control?.updateValueAndValidity();
|
|
443
702
|
}
|
|
444
703
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: FileComponent, deps: [{ token: i1.NgControl, self: true }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
445
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.5", type: FileComponent, selector: "jo-file", inputs: { acceptedTypes: "acceptedTypes", sizeLimitMb: "sizeLimitMb", multiple: "multiple", showSize: "showSize" }, usesInheritance: true, ngImport: i0, template: "<label [class.required]=\"required\">\r\n
|
|
704
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.5", type: FileComponent, selector: "jo-file", inputs: { acceptedTypes: "acceptedTypes", sizeLimitMb: "sizeLimitMb", multiple: "multiple", showSize: "showSize" }, usesInheritance: true, ngImport: i0, template: "<div class=\"d-flex justify-content-between\">\r\n <label [class.required]=\"required\">\r\n <ng-content></ng-content>\r\n </label>\r\n <div>\r\n <ng-content select=\"[rightAligned]\"></ng-content>\r\n </div>\r\n</div>\r\n\r\n<div class=\"d-flex align-items-stretch\">\r\n <button\r\n class=\"d-flex align-items-center gap-2\"\r\n [class.br-start]=\"borderRadiusLeft\"\r\n [disabled]=\"isDisabled\"\r\n (click)=\"fileInput.click()\"\r\n >\r\n <icon\r\n type=\"folder\"\r\n size=\"1rem\"\r\n [fill]=\"[null, 'current']\"\r\n fillRotate=\"90\"\r\n ></icon>\r\n Browse...\r\n </button>\r\n <button\r\n class=\"d-flex align-items-center\"\r\n [class.br-end]=\"borderRadiusRight\"\r\n [class.active]=\"ngControl.value !== null\"\r\n [disabled]=\"isDisabled\"\r\n (click)=\"fileInput.click()\"\r\n >\r\n <ng-container *ngIf=\"!ngControl.value\">\r\n No {{multiple ? 'files' : 'file'}} selected\r\n </ng-container>\r\n <ng-container *ngIf=\"ngControl.value\">\r\n {{fileNames}}\r\n </ng-container>\r\n </button>\r\n</div>\r\n\r\n<!-- <ul *ngIf=\"ngControl.control?.errors\">\r\n <li *ngIf=\"ngControl.control?.errors?.['acceptedTypes']\">\r\n valid types are {{acceptedTypes.join(', ')}}\r\n </li>\r\n <li *ngIf=\"ngControl.control?.errors?.['sizeLimitMb']\">\r\n max file size is {{sizeLimit}}\r\n </li>\r\n <li *ngIf=\"ngControl.control?.errors?.['invalid']\">\r\n invalid model\r\n </li>\r\n</ul> -->\r\n\r\n<input\r\n [(ngModel)]=\"model\"\r\n #fileInput\r\n type=\"file\"\r\n [accept]=\"acceptedTypes.join()\"\r\n [multiple]=\"multiple\"\r\n [id]=\"id\"\r\n (change)=\"onFileChange($event)\"\r\n (cancel)=\"onFileCancel()\"\r\n/>\r\n", styles: ["input[type=file]{display:none}div button:first-child{border-right:none;flex-shrink:0}div button:last-child{border-left:none;display:block;white-space:nowrap;overflow-x:hidden;text-overflow:ellipsis}\n", "body{font-family:Arial;margin:0}h1,h2,h3,h4,h5,h6{margin:0}a:not(.jo-ignore),button:not(.jo-ignore),.jo-button,input,textarea{color:inherit;background:transparent;border-width:.15rem;border-style:outset;border-color:currentColor;padding:.5rem;margin:0;font-size:1rem;line-height:1rem;font-family:inherit;min-width:0}a:not(.jo-ignore):active,a:not(.jo-ignore).active,button:not(.jo-ignore):active,button:not(.jo-ignore).active,.jo-button:active,.jo-button.active,input:active,input.active,textarea:active,textarea.active{border-style:inset}a:not(.jo-ignore):disabled,a:not(.jo-ignore).disabled,button:not(.jo-ignore):disabled,button:not(.jo-ignore).disabled,.jo-button:disabled,.jo-button.disabled,input:disabled,input.disabled,textarea:disabled,textarea.disabled{cursor:not-allowed;border-style:solid;box-shadow:none;opacity:.5}a,button,.jo-button{cursor:pointer}.card{border:1px solid currentColor;border-radius:.5rem}.card .card-header{padding:1rem;border-bottom:1px solid currentColor}.card .card-body,.card .card-footer{padding:1rem}.card .card-table{overflow-x:auto}.card .card-body+.card-table,.card .card-table+.card-body,.card .card-body+.card-body,.card .card-table+.card-table,.card .card-table+.card-footer,.card .card-body+.card-footer{border-top:1px solid currentColor}.card table{width:100%;border-collapse:collapse}.card table>thead{text-align:left}.card table>thead th{border-bottom:1px solid currentColor}.card table>tfoot td{margin-top:1px;border-top:1px solid currentColor}.card table th,.card table td{padding:1rem}.card table tbody tr>td:last-child{text-align:right}.card table tbody tr:nth-child(odd) td{-webkit-backdrop-filter:brightness(85%);backdrop-filter:brightness(85%)}.card table tbody tr:last-child>td:first-child{border-bottom-left-radius:.5rem}.card table tbody tr:last-child>td:last-child{border-bottom-right-radius:.5rem}.card table tbody tr.active td{font-weight:700}.position-relative{position:relative}.d-flex{display:flex}.flex-row{flex-direction:row}.flex-column{flex-direction:column}.align-items-start{align-items:flex-start}.align-items-end{align-items:flex-end}.align-items-center{align-items:center}.align-items-baseline{align-items:baseline}.align-items-stretch{align-items:stretch}.justify-content-start{justify-content:flex-start}.justify-content-end{justify-content:flex-end}.justify-content-center{justify-content:center}.justify-content-between{justify-content:space-between}.justify-content-around{justify-content:space-around}.justify-content-evenly{justify-content:space-evenly}.flex-wrap{flex-wrap:wrap}.flex-1{flex:1}.flex-2{flex:2}.flex-3{flex:3}.flex-4{flex:4}.gap-1{gap:.25rem}.m-1{margin:.25rem}.p-1{padding:.25rem}.mx-1{margin-right:.25rem;margin-left:.25rem}.my-1{margin-top:.25rem;margin-bottom:.25rem}.px-1{padding-right:.25rem;padding-left:.25rem}.py-1{padding-top:.25rem;padding-bottom:.25rem}.ms-1{margin-right:.25rem}.me-1{margin-left:.25rem}.mt-1{margin-top:.25rem}.mb-1{margin-bottom:.25rem}.ps-1{padding-right:.25rem}.pe-1{padding-left:.25rem}.pt-1{padding-top:.25rem}.pb-1{padding-bottom:.25rem}.gap-2{gap:.5rem}.m-2{margin:.5rem}.p-2{padding:.5rem}.mx-2{margin-right:.5rem;margin-left:.5rem}.my-2{margin-top:.5rem;margin-bottom:.5rem}.px-2{padding-right:.5rem;padding-left:.5rem}.py-2{padding-top:.5rem;padding-bottom:.5rem}.ms-2{margin-right:.5rem}.me-2{margin-left:.5rem}.mt-2{margin-top:.5rem}.mb-2{margin-bottom:.5rem}.ps-2{padding-right:.5rem}.pe-2{padding-left:.5rem}.pt-2{padding-top:.5rem}.pb-2{padding-bottom:.5rem}.gap-3{gap:1rem}.m-3{margin:1rem}.p-3{padding:1rem}.mx-3{margin-right:1rem;margin-left:1rem}.my-3{margin-top:1rem;margin-bottom:1rem}.px-3{padding-right:1rem;padding-left:1rem}.py-3{padding-top:1rem;padding-bottom:1rem}.ms-3{margin-right:1rem}.me-3{margin-left:1rem}.mt-3{margin-top:1rem}.mb-3{margin-bottom:1rem}.ps-3{padding-right:1rem}.pe-3{padding-left:1rem}.pt-3{padding-top:1rem}.pb-3{padding-bottom:1rem}.gap-4{gap:1.5rem}.m-4{margin:1.5rem}.p-4{padding:1.5rem}.mx-4{margin-right:1.5rem;margin-left:1.5rem}.my-4{margin-top:1.5rem;margin-bottom:1.5rem}.px-4{padding-right:1.5rem;padding-left:1.5rem}.py-4{padding-top:1.5rem;padding-bottom:1.5rem}.ms-4{margin-right:1.5rem}.me-4{margin-left:1.5rem}.mt-4{margin-top:1.5rem}.mb-4{margin-bottom:1.5rem}.ps-4{padding-right:1.5rem}.pe-4{padding-left:1.5rem}.pt-4{padding-top:1.5rem}.pb-4{padding-bottom:1.5rem}.gap-5{gap:2rem}.m-5{margin:2rem}.p-5{padding:2rem}.mx-5{margin-right:2rem;margin-left:2rem}.my-5{margin-top:2rem;margin-bottom:2rem}.px-5{padding-right:2rem;padding-left:2rem}.py-5{padding-top:2rem;padding-bottom:2rem}.ms-5{margin-right:2rem}.me-5{margin-left:2rem}.mt-5{margin-top:2rem}.mb-5{margin-bottom:2rem}.ps-5{padding-right:2rem}.pe-5{padding-left:2rem}.pt-5{padding-top:2rem}.pb-5{padding-bottom:2rem}.border{border:1px solid currentColor}.br-start{border-top-left-radius:.5rem;border-bottom-left-radius:.5rem}.br-end{border-top-right-radius:.5rem;border-bottom-right-radius:.5rem}.white-space-nowrap{white-space:nowrap}.text-end{text-align:right}.text-start{text-align:left}.text-center{text-align:center}.overflow-auto{overflow:auto}.overflow-hidden{overflow:hidden}label{display:block;padding-bottom:.5rem;font-weight:700}label:empty{display:none}label.required:after{content:\"*\"}ul{list-style:none;margin:0;padding:0}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: IconComponent, selector: "icon[type]", inputs: ["type", "fill", "fillRotate", "fillOpacity", "stroke", "strokeRotate", "spin"] }, { kind: "directive", type: SizeDirective, selector: "[size]", inputs: ["size"] }] }); }
|
|
446
705
|
}
|
|
447
706
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: FileComponent, decorators: [{
|
|
448
707
|
type: Component,
|
|
449
|
-
args: [{ selector: 'jo-file', template: "<label [class.required]=\"required\">\r\n
|
|
708
|
+
args: [{ selector: 'jo-file', template: "<div class=\"d-flex justify-content-between\">\r\n <label [class.required]=\"required\">\r\n <ng-content></ng-content>\r\n </label>\r\n <div>\r\n <ng-content select=\"[rightAligned]\"></ng-content>\r\n </div>\r\n</div>\r\n\r\n<div class=\"d-flex align-items-stretch\">\r\n <button\r\n class=\"d-flex align-items-center gap-2\"\r\n [class.br-start]=\"borderRadiusLeft\"\r\n [disabled]=\"isDisabled\"\r\n (click)=\"fileInput.click()\"\r\n >\r\n <icon\r\n type=\"folder\"\r\n size=\"1rem\"\r\n [fill]=\"[null, 'current']\"\r\n fillRotate=\"90\"\r\n ></icon>\r\n Browse...\r\n </button>\r\n <button\r\n class=\"d-flex align-items-center\"\r\n [class.br-end]=\"borderRadiusRight\"\r\n [class.active]=\"ngControl.value !== null\"\r\n [disabled]=\"isDisabled\"\r\n (click)=\"fileInput.click()\"\r\n >\r\n <ng-container *ngIf=\"!ngControl.value\">\r\n No {{multiple ? 'files' : 'file'}} selected\r\n </ng-container>\r\n <ng-container *ngIf=\"ngControl.value\">\r\n {{fileNames}}\r\n </ng-container>\r\n </button>\r\n</div>\r\n\r\n<!-- <ul *ngIf=\"ngControl.control?.errors\">\r\n <li *ngIf=\"ngControl.control?.errors?.['acceptedTypes']\">\r\n valid types are {{acceptedTypes.join(', ')}}\r\n </li>\r\n <li *ngIf=\"ngControl.control?.errors?.['sizeLimitMb']\">\r\n max file size is {{sizeLimit}}\r\n </li>\r\n <li *ngIf=\"ngControl.control?.errors?.['invalid']\">\r\n invalid model\r\n </li>\r\n</ul> -->\r\n\r\n<input\r\n [(ngModel)]=\"model\"\r\n #fileInput\r\n type=\"file\"\r\n [accept]=\"acceptedTypes.join()\"\r\n [multiple]=\"multiple\"\r\n [id]=\"id\"\r\n (change)=\"onFileChange($event)\"\r\n (cancel)=\"onFileCancel()\"\r\n/>\r\n", styles: ["input[type=file]{display:none}div button:first-child{border-right:none;flex-shrink:0}div button:last-child{border-left:none;display:block;white-space:nowrap;overflow-x:hidden;text-overflow:ellipsis}\n", "body{font-family:Arial;margin:0}h1,h2,h3,h4,h5,h6{margin:0}a:not(.jo-ignore),button:not(.jo-ignore),.jo-button,input,textarea{color:inherit;background:transparent;border-width:.15rem;border-style:outset;border-color:currentColor;padding:.5rem;margin:0;font-size:1rem;line-height:1rem;font-family:inherit;min-width:0}a:not(.jo-ignore):active,a:not(.jo-ignore).active,button:not(.jo-ignore):active,button:not(.jo-ignore).active,.jo-button:active,.jo-button.active,input:active,input.active,textarea:active,textarea.active{border-style:inset}a:not(.jo-ignore):disabled,a:not(.jo-ignore).disabled,button:not(.jo-ignore):disabled,button:not(.jo-ignore).disabled,.jo-button:disabled,.jo-button.disabled,input:disabled,input.disabled,textarea:disabled,textarea.disabled{cursor:not-allowed;border-style:solid;box-shadow:none;opacity:.5}a,button,.jo-button{cursor:pointer}.card{border:1px solid currentColor;border-radius:.5rem}.card .card-header{padding:1rem;border-bottom:1px solid currentColor}.card .card-body,.card .card-footer{padding:1rem}.card .card-table{overflow-x:auto}.card .card-body+.card-table,.card .card-table+.card-body,.card .card-body+.card-body,.card .card-table+.card-table,.card .card-table+.card-footer,.card .card-body+.card-footer{border-top:1px solid currentColor}.card table{width:100%;border-collapse:collapse}.card table>thead{text-align:left}.card table>thead th{border-bottom:1px solid currentColor}.card table>tfoot td{margin-top:1px;border-top:1px solid currentColor}.card table th,.card table td{padding:1rem}.card table tbody tr>td:last-child{text-align:right}.card table tbody tr:nth-child(odd) td{-webkit-backdrop-filter:brightness(85%);backdrop-filter:brightness(85%)}.card table tbody tr:last-child>td:first-child{border-bottom-left-radius:.5rem}.card table tbody tr:last-child>td:last-child{border-bottom-right-radius:.5rem}.card table tbody tr.active td{font-weight:700}.position-relative{position:relative}.d-flex{display:flex}.flex-row{flex-direction:row}.flex-column{flex-direction:column}.align-items-start{align-items:flex-start}.align-items-end{align-items:flex-end}.align-items-center{align-items:center}.align-items-baseline{align-items:baseline}.align-items-stretch{align-items:stretch}.justify-content-start{justify-content:flex-start}.justify-content-end{justify-content:flex-end}.justify-content-center{justify-content:center}.justify-content-between{justify-content:space-between}.justify-content-around{justify-content:space-around}.justify-content-evenly{justify-content:space-evenly}.flex-wrap{flex-wrap:wrap}.flex-1{flex:1}.flex-2{flex:2}.flex-3{flex:3}.flex-4{flex:4}.gap-1{gap:.25rem}.m-1{margin:.25rem}.p-1{padding:.25rem}.mx-1{margin-right:.25rem;margin-left:.25rem}.my-1{margin-top:.25rem;margin-bottom:.25rem}.px-1{padding-right:.25rem;padding-left:.25rem}.py-1{padding-top:.25rem;padding-bottom:.25rem}.ms-1{margin-right:.25rem}.me-1{margin-left:.25rem}.mt-1{margin-top:.25rem}.mb-1{margin-bottom:.25rem}.ps-1{padding-right:.25rem}.pe-1{padding-left:.25rem}.pt-1{padding-top:.25rem}.pb-1{padding-bottom:.25rem}.gap-2{gap:.5rem}.m-2{margin:.5rem}.p-2{padding:.5rem}.mx-2{margin-right:.5rem;margin-left:.5rem}.my-2{margin-top:.5rem;margin-bottom:.5rem}.px-2{padding-right:.5rem;padding-left:.5rem}.py-2{padding-top:.5rem;padding-bottom:.5rem}.ms-2{margin-right:.5rem}.me-2{margin-left:.5rem}.mt-2{margin-top:.5rem}.mb-2{margin-bottom:.5rem}.ps-2{padding-right:.5rem}.pe-2{padding-left:.5rem}.pt-2{padding-top:.5rem}.pb-2{padding-bottom:.5rem}.gap-3{gap:1rem}.m-3{margin:1rem}.p-3{padding:1rem}.mx-3{margin-right:1rem;margin-left:1rem}.my-3{margin-top:1rem;margin-bottom:1rem}.px-3{padding-right:1rem;padding-left:1rem}.py-3{padding-top:1rem;padding-bottom:1rem}.ms-3{margin-right:1rem}.me-3{margin-left:1rem}.mt-3{margin-top:1rem}.mb-3{margin-bottom:1rem}.ps-3{padding-right:1rem}.pe-3{padding-left:1rem}.pt-3{padding-top:1rem}.pb-3{padding-bottom:1rem}.gap-4{gap:1.5rem}.m-4{margin:1.5rem}.p-4{padding:1.5rem}.mx-4{margin-right:1.5rem;margin-left:1.5rem}.my-4{margin-top:1.5rem;margin-bottom:1.5rem}.px-4{padding-right:1.5rem;padding-left:1.5rem}.py-4{padding-top:1.5rem;padding-bottom:1.5rem}.ms-4{margin-right:1.5rem}.me-4{margin-left:1.5rem}.mt-4{margin-top:1.5rem}.mb-4{margin-bottom:1.5rem}.ps-4{padding-right:1.5rem}.pe-4{padding-left:1.5rem}.pt-4{padding-top:1.5rem}.pb-4{padding-bottom:1.5rem}.gap-5{gap:2rem}.m-5{margin:2rem}.p-5{padding:2rem}.mx-5{margin-right:2rem;margin-left:2rem}.my-5{margin-top:2rem;margin-bottom:2rem}.px-5{padding-right:2rem;padding-left:2rem}.py-5{padding-top:2rem;padding-bottom:2rem}.ms-5{margin-right:2rem}.me-5{margin-left:2rem}.mt-5{margin-top:2rem}.mb-5{margin-bottom:2rem}.ps-5{padding-right:2rem}.pe-5{padding-left:2rem}.pt-5{padding-top:2rem}.pb-5{padding-bottom:2rem}.border{border:1px solid currentColor}.br-start{border-top-left-radius:.5rem;border-bottom-left-radius:.5rem}.br-end{border-top-right-radius:.5rem;border-bottom-right-radius:.5rem}.white-space-nowrap{white-space:nowrap}.text-end{text-align:right}.text-start{text-align:left}.text-center{text-align:center}.overflow-auto{overflow:auto}.overflow-hidden{overflow:hidden}label{display:block;padding-bottom:.5rem;font-weight:700}label:empty{display:none}label.required:after{content:\"*\"}ul{list-style:none;margin:0;padding:0}\n"] }]
|
|
450
709
|
}], ctorParameters: () => [{ type: i1.NgControl, decorators: [{
|
|
451
710
|
type: Self
|
|
452
711
|
}] }], propDecorators: { acceptedTypes: [{
|
|
@@ -459,6 +718,32 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.5", ngImpor
|
|
|
459
718
|
type: Input
|
|
460
719
|
}] } });
|
|
461
720
|
|
|
721
|
+
class IconStackComponent extends SizeDirective {
|
|
722
|
+
constructor() {
|
|
723
|
+
super();
|
|
724
|
+
this.width = this.size;
|
|
725
|
+
this.height = this.size;
|
|
726
|
+
this.sizeChangesSubject.subscribe({
|
|
727
|
+
next: () => {
|
|
728
|
+
this.width = this.size;
|
|
729
|
+
this.height = this.size;
|
|
730
|
+
}
|
|
731
|
+
});
|
|
732
|
+
}
|
|
733
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: IconStackComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
734
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.5", type: IconStackComponent, selector: "icon-stack", host: { properties: { "style.width": "this.width", "style.height": "this.height" } }, usesInheritance: true, ngImport: i0, template: `<ng-content></ng-content>`, isInline: true, styles: [":host{display:grid;grid-template-columns:1fr}:host ::ng-deep>icon{grid-row-start:1;grid-column-start:1;display:flex;justify-content:center;align-items:center}\n"] }); }
|
|
735
|
+
}
|
|
736
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: IconStackComponent, decorators: [{
|
|
737
|
+
type: Component,
|
|
738
|
+
args: [{ selector: 'icon-stack', template: `<ng-content></ng-content>`, styles: [":host{display:grid;grid-template-columns:1fr}:host ::ng-deep>icon{grid-row-start:1;grid-column-start:1;display:flex;justify-content:center;align-items:center}\n"] }]
|
|
739
|
+
}], ctorParameters: () => [], propDecorators: { width: [{
|
|
740
|
+
type: HostBinding,
|
|
741
|
+
args: ['style.width']
|
|
742
|
+
}], height: [{
|
|
743
|
+
type: HostBinding,
|
|
744
|
+
args: ['style.height']
|
|
745
|
+
}] } });
|
|
746
|
+
|
|
462
747
|
class NumberComponent extends ControlDirective {
|
|
463
748
|
get min() {
|
|
464
749
|
return this._min;
|
|
@@ -571,11 +856,11 @@ class NumberComponent extends ControlDirective {
|
|
|
571
856
|
this.ngControl.control?.updateValueAndValidity();
|
|
572
857
|
}
|
|
573
858
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: NumberComponent, deps: [{ token: i1.NgControl, self: true }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
574
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.5", type: NumberComponent, selector: "jo-number", inputs: { min: "min", max: "max", step: "step" }, usesInheritance: true, ngImport: i0, template: "<label [class.required]=\"required\">\r\n <ng-content></ng-content>\r\n</label>\r\n\r\n<div class=\"d-flex align-items-stretch\">\r\n <input\r\n [(ngModel)]=\"model\"\r\n #numberInput\r\n class=\"d-flex align-items-center\"\r\n type=\"number\"\r\n [size]=\"maxDigitSize + sizePadding\"\r\n [class.active]=\"_model !== null\"\r\n [class.
|
|
859
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.5", type: NumberComponent, selector: "jo-number", inputs: { min: "min", max: "max", step: "step" }, usesInheritance: true, ngImport: i0, template: "<label [class.required]=\"required\">\r\n <ng-content></ng-content>\r\n</label>\r\n\r\n<div class=\"d-flex align-items-stretch\">\r\n <input\r\n [(ngModel)]=\"model\"\r\n #numberInput\r\n class=\"d-flex align-items-center\"\r\n type=\"number\"\r\n [size]=\"maxDigitSize + sizePadding\"\r\n [class.active]=\"_model !== null\"\r\n [class.br-start]=\"borderRadiusLeft\"\r\n [class.invalid]=\"ngControl.control?.invalid\"\r\n [disabled]=\"isDisabled\"\r\n [min]=\"min\"\r\n [max]=\"max\"\r\n (beforeinput)=\"onBeforeinput($event)\"\r\n />\r\n <button\r\n class=\"d-flex align-items-center\"\r\n title=\"Subtract\"\r\n type=\"button\"\r\n [disabled]=\"isDisabledSubtract\"\r\n [class.invalid]=\"ngControl.control?.invalid\"\r\n (blur)=\"onTouched()\"\r\n (click)=\"subtract(numberInput)\"\r\n >\r\n <icon\r\n type=\"minus\"\r\n size=\"1rem\"\r\n [fill]=\"[null, 'current']\"\r\n fillRotate=\"90\"\r\n ></icon>\r\n </button>\r\n <button\r\n class=\"d-flex align-items-center\"\r\n title=\"Add\"\r\n type=\"button\"\r\n [class.br-end]=\"borderRadiusRight\"\r\n [disabled]=\"isDisabledAdd\"\r\n [class.invalid]=\"ngControl.control?.invalid\"\r\n (blur)=\"onTouched()\"\r\n (click)=\"add(numberInput)\"\r\n >\r\n <icon\r\n type=\"plus\"\r\n size=\"1rem\"\r\n [fill]=\"[null, 'current']\"\r\n fillRotate=\"90\"\r\n ></icon>\r\n </button>\r\n</div>\r\n\r\n<!-- <ul *ngIf=\"ngControl.control?.errors\">\r\n <li *ngIf=\"ngControl.control?.errors?.['min']\">\r\n minimum number is {{min}}\r\n </li>\r\n <li *ngIf=\"ngControl.control?.errors?.['max']\">\r\n maximum number is {{max}}\r\n </li>\r\n</ul> -->", styles: ["input[type=number]{-moz-appearance:textfield}input[type=number]::-webkit-outer-spin-button,input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}:host>div>input{border-right:0}:host>div>button:not(:last-child){border-right:0;border-left:0}:host>div>button:last-child{border-left:0}\n", "body{font-family:Arial;margin:0}h1,h2,h3,h4,h5,h6{margin:0}a:not(.jo-ignore),button:not(.jo-ignore),.jo-button,input,textarea{color:inherit;background:transparent;border-width:.15rem;border-style:outset;border-color:currentColor;padding:.5rem;margin:0;font-size:1rem;line-height:1rem;font-family:inherit;min-width:0}a:not(.jo-ignore):active,a:not(.jo-ignore).active,button:not(.jo-ignore):active,button:not(.jo-ignore).active,.jo-button:active,.jo-button.active,input:active,input.active,textarea:active,textarea.active{border-style:inset}a:not(.jo-ignore):disabled,a:not(.jo-ignore).disabled,button:not(.jo-ignore):disabled,button:not(.jo-ignore).disabled,.jo-button:disabled,.jo-button.disabled,input:disabled,input.disabled,textarea:disabled,textarea.disabled{cursor:not-allowed;border-style:solid;box-shadow:none;opacity:.5}a,button,.jo-button{cursor:pointer}.card{border:1px solid currentColor;border-radius:.5rem}.card .card-header{padding:1rem;border-bottom:1px solid currentColor}.card .card-body,.card .card-footer{padding:1rem}.card .card-table{overflow-x:auto}.card .card-body+.card-table,.card .card-table+.card-body,.card .card-body+.card-body,.card .card-table+.card-table,.card .card-table+.card-footer,.card .card-body+.card-footer{border-top:1px solid currentColor}.card table{width:100%;border-collapse:collapse}.card table>thead{text-align:left}.card table>thead th{border-bottom:1px solid currentColor}.card table>tfoot td{margin-top:1px;border-top:1px solid currentColor}.card table th,.card table td{padding:1rem}.card table tbody tr>td:last-child{text-align:right}.card table tbody tr:nth-child(odd) td{-webkit-backdrop-filter:brightness(85%);backdrop-filter:brightness(85%)}.card table tbody tr:last-child>td:first-child{border-bottom-left-radius:.5rem}.card table tbody tr:last-child>td:last-child{border-bottom-right-radius:.5rem}.card table tbody tr.active td{font-weight:700}.position-relative{position:relative}.d-flex{display:flex}.flex-row{flex-direction:row}.flex-column{flex-direction:column}.align-items-start{align-items:flex-start}.align-items-end{align-items:flex-end}.align-items-center{align-items:center}.align-items-baseline{align-items:baseline}.align-items-stretch{align-items:stretch}.justify-content-start{justify-content:flex-start}.justify-content-end{justify-content:flex-end}.justify-content-center{justify-content:center}.justify-content-between{justify-content:space-between}.justify-content-around{justify-content:space-around}.justify-content-evenly{justify-content:space-evenly}.flex-wrap{flex-wrap:wrap}.flex-1{flex:1}.flex-2{flex:2}.flex-3{flex:3}.flex-4{flex:4}.gap-1{gap:.25rem}.m-1{margin:.25rem}.p-1{padding:.25rem}.mx-1{margin-right:.25rem;margin-left:.25rem}.my-1{margin-top:.25rem;margin-bottom:.25rem}.px-1{padding-right:.25rem;padding-left:.25rem}.py-1{padding-top:.25rem;padding-bottom:.25rem}.ms-1{margin-right:.25rem}.me-1{margin-left:.25rem}.mt-1{margin-top:.25rem}.mb-1{margin-bottom:.25rem}.ps-1{padding-right:.25rem}.pe-1{padding-left:.25rem}.pt-1{padding-top:.25rem}.pb-1{padding-bottom:.25rem}.gap-2{gap:.5rem}.m-2{margin:.5rem}.p-2{padding:.5rem}.mx-2{margin-right:.5rem;margin-left:.5rem}.my-2{margin-top:.5rem;margin-bottom:.5rem}.px-2{padding-right:.5rem;padding-left:.5rem}.py-2{padding-top:.5rem;padding-bottom:.5rem}.ms-2{margin-right:.5rem}.me-2{margin-left:.5rem}.mt-2{margin-top:.5rem}.mb-2{margin-bottom:.5rem}.ps-2{padding-right:.5rem}.pe-2{padding-left:.5rem}.pt-2{padding-top:.5rem}.pb-2{padding-bottom:.5rem}.gap-3{gap:1rem}.m-3{margin:1rem}.p-3{padding:1rem}.mx-3{margin-right:1rem;margin-left:1rem}.my-3{margin-top:1rem;margin-bottom:1rem}.px-3{padding-right:1rem;padding-left:1rem}.py-3{padding-top:1rem;padding-bottom:1rem}.ms-3{margin-right:1rem}.me-3{margin-left:1rem}.mt-3{margin-top:1rem}.mb-3{margin-bottom:1rem}.ps-3{padding-right:1rem}.pe-3{padding-left:1rem}.pt-3{padding-top:1rem}.pb-3{padding-bottom:1rem}.gap-4{gap:1.5rem}.m-4{margin:1.5rem}.p-4{padding:1.5rem}.mx-4{margin-right:1.5rem;margin-left:1.5rem}.my-4{margin-top:1.5rem;margin-bottom:1.5rem}.px-4{padding-right:1.5rem;padding-left:1.5rem}.py-4{padding-top:1.5rem;padding-bottom:1.5rem}.ms-4{margin-right:1.5rem}.me-4{margin-left:1.5rem}.mt-4{margin-top:1.5rem}.mb-4{margin-bottom:1.5rem}.ps-4{padding-right:1.5rem}.pe-4{padding-left:1.5rem}.pt-4{padding-top:1.5rem}.pb-4{padding-bottom:1.5rem}.gap-5{gap:2rem}.m-5{margin:2rem}.p-5{padding:2rem}.mx-5{margin-right:2rem;margin-left:2rem}.my-5{margin-top:2rem;margin-bottom:2rem}.px-5{padding-right:2rem;padding-left:2rem}.py-5{padding-top:2rem;padding-bottom:2rem}.ms-5{margin-right:2rem}.me-5{margin-left:2rem}.mt-5{margin-top:2rem}.mb-5{margin-bottom:2rem}.ps-5{padding-right:2rem}.pe-5{padding-left:2rem}.pt-5{padding-top:2rem}.pb-5{padding-bottom:2rem}.border{border:1px solid currentColor}.br-start{border-top-left-radius:.5rem;border-bottom-left-radius:.5rem}.br-end{border-top-right-radius:.5rem;border-bottom-right-radius:.5rem}.white-space-nowrap{white-space:nowrap}.text-end{text-align:right}.text-start{text-align:left}.text-center{text-align:center}.overflow-auto{overflow:auto}.overflow-hidden{overflow:hidden}label{display:block;padding-bottom:.5rem;font-weight:700}label:empty{display:none}label.required:after{content:\"*\"}ul{list-style:none;margin:0;padding:0}\n"], dependencies: [{ kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i1.MaxValidator, selector: "input[type=number][max][formControlName],input[type=number][max][formControl],input[type=number][max][ngModel]", inputs: ["max"] }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: IconComponent, selector: "icon[type]", inputs: ["type", "fill", "fillRotate", "fillOpacity", "stroke", "strokeRotate", "spin"] }, { kind: "directive", type: SizeDirective, selector: "[size]", inputs: ["size"] }] }); }
|
|
575
860
|
}
|
|
576
861
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: NumberComponent, decorators: [{
|
|
577
862
|
type: Component,
|
|
578
|
-
args: [{ selector: 'jo-number', template: "<label [class.required]=\"required\">\r\n <ng-content></ng-content>\r\n</label>\r\n\r\n<div class=\"d-flex align-items-stretch\">\r\n <input\r\n [(ngModel)]=\"model\"\r\n #numberInput\r\n class=\"d-flex align-items-center\"\r\n type=\"number\"\r\n [size]=\"maxDigitSize + sizePadding\"\r\n [class.active]=\"_model !== null\"\r\n [class.
|
|
863
|
+
args: [{ selector: 'jo-number', template: "<label [class.required]=\"required\">\r\n <ng-content></ng-content>\r\n</label>\r\n\r\n<div class=\"d-flex align-items-stretch\">\r\n <input\r\n [(ngModel)]=\"model\"\r\n #numberInput\r\n class=\"d-flex align-items-center\"\r\n type=\"number\"\r\n [size]=\"maxDigitSize + sizePadding\"\r\n [class.active]=\"_model !== null\"\r\n [class.br-start]=\"borderRadiusLeft\"\r\n [class.invalid]=\"ngControl.control?.invalid\"\r\n [disabled]=\"isDisabled\"\r\n [min]=\"min\"\r\n [max]=\"max\"\r\n (beforeinput)=\"onBeforeinput($event)\"\r\n />\r\n <button\r\n class=\"d-flex align-items-center\"\r\n title=\"Subtract\"\r\n type=\"button\"\r\n [disabled]=\"isDisabledSubtract\"\r\n [class.invalid]=\"ngControl.control?.invalid\"\r\n (blur)=\"onTouched()\"\r\n (click)=\"subtract(numberInput)\"\r\n >\r\n <icon\r\n type=\"minus\"\r\n size=\"1rem\"\r\n [fill]=\"[null, 'current']\"\r\n fillRotate=\"90\"\r\n ></icon>\r\n </button>\r\n <button\r\n class=\"d-flex align-items-center\"\r\n title=\"Add\"\r\n type=\"button\"\r\n [class.br-end]=\"borderRadiusRight\"\r\n [disabled]=\"isDisabledAdd\"\r\n [class.invalid]=\"ngControl.control?.invalid\"\r\n (blur)=\"onTouched()\"\r\n (click)=\"add(numberInput)\"\r\n >\r\n <icon\r\n type=\"plus\"\r\n size=\"1rem\"\r\n [fill]=\"[null, 'current']\"\r\n fillRotate=\"90\"\r\n ></icon>\r\n </button>\r\n</div>\r\n\r\n<!-- <ul *ngIf=\"ngControl.control?.errors\">\r\n <li *ngIf=\"ngControl.control?.errors?.['min']\">\r\n minimum number is {{min}}\r\n </li>\r\n <li *ngIf=\"ngControl.control?.errors?.['max']\">\r\n maximum number is {{max}}\r\n </li>\r\n</ul> -->", styles: ["input[type=number]{-moz-appearance:textfield}input[type=number]::-webkit-outer-spin-button,input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}:host>div>input{border-right:0}:host>div>button:not(:last-child){border-right:0;border-left:0}:host>div>button:last-child{border-left:0}\n", "body{font-family:Arial;margin:0}h1,h2,h3,h4,h5,h6{margin:0}a:not(.jo-ignore),button:not(.jo-ignore),.jo-button,input,textarea{color:inherit;background:transparent;border-width:.15rem;border-style:outset;border-color:currentColor;padding:.5rem;margin:0;font-size:1rem;line-height:1rem;font-family:inherit;min-width:0}a:not(.jo-ignore):active,a:not(.jo-ignore).active,button:not(.jo-ignore):active,button:not(.jo-ignore).active,.jo-button:active,.jo-button.active,input:active,input.active,textarea:active,textarea.active{border-style:inset}a:not(.jo-ignore):disabled,a:not(.jo-ignore).disabled,button:not(.jo-ignore):disabled,button:not(.jo-ignore).disabled,.jo-button:disabled,.jo-button.disabled,input:disabled,input.disabled,textarea:disabled,textarea.disabled{cursor:not-allowed;border-style:solid;box-shadow:none;opacity:.5}a,button,.jo-button{cursor:pointer}.card{border:1px solid currentColor;border-radius:.5rem}.card .card-header{padding:1rem;border-bottom:1px solid currentColor}.card .card-body,.card .card-footer{padding:1rem}.card .card-table{overflow-x:auto}.card .card-body+.card-table,.card .card-table+.card-body,.card .card-body+.card-body,.card .card-table+.card-table,.card .card-table+.card-footer,.card .card-body+.card-footer{border-top:1px solid currentColor}.card table{width:100%;border-collapse:collapse}.card table>thead{text-align:left}.card table>thead th{border-bottom:1px solid currentColor}.card table>tfoot td{margin-top:1px;border-top:1px solid currentColor}.card table th,.card table td{padding:1rem}.card table tbody tr>td:last-child{text-align:right}.card table tbody tr:nth-child(odd) td{-webkit-backdrop-filter:brightness(85%);backdrop-filter:brightness(85%)}.card table tbody tr:last-child>td:first-child{border-bottom-left-radius:.5rem}.card table tbody tr:last-child>td:last-child{border-bottom-right-radius:.5rem}.card table tbody tr.active td{font-weight:700}.position-relative{position:relative}.d-flex{display:flex}.flex-row{flex-direction:row}.flex-column{flex-direction:column}.align-items-start{align-items:flex-start}.align-items-end{align-items:flex-end}.align-items-center{align-items:center}.align-items-baseline{align-items:baseline}.align-items-stretch{align-items:stretch}.justify-content-start{justify-content:flex-start}.justify-content-end{justify-content:flex-end}.justify-content-center{justify-content:center}.justify-content-between{justify-content:space-between}.justify-content-around{justify-content:space-around}.justify-content-evenly{justify-content:space-evenly}.flex-wrap{flex-wrap:wrap}.flex-1{flex:1}.flex-2{flex:2}.flex-3{flex:3}.flex-4{flex:4}.gap-1{gap:.25rem}.m-1{margin:.25rem}.p-1{padding:.25rem}.mx-1{margin-right:.25rem;margin-left:.25rem}.my-1{margin-top:.25rem;margin-bottom:.25rem}.px-1{padding-right:.25rem;padding-left:.25rem}.py-1{padding-top:.25rem;padding-bottom:.25rem}.ms-1{margin-right:.25rem}.me-1{margin-left:.25rem}.mt-1{margin-top:.25rem}.mb-1{margin-bottom:.25rem}.ps-1{padding-right:.25rem}.pe-1{padding-left:.25rem}.pt-1{padding-top:.25rem}.pb-1{padding-bottom:.25rem}.gap-2{gap:.5rem}.m-2{margin:.5rem}.p-2{padding:.5rem}.mx-2{margin-right:.5rem;margin-left:.5rem}.my-2{margin-top:.5rem;margin-bottom:.5rem}.px-2{padding-right:.5rem;padding-left:.5rem}.py-2{padding-top:.5rem;padding-bottom:.5rem}.ms-2{margin-right:.5rem}.me-2{margin-left:.5rem}.mt-2{margin-top:.5rem}.mb-2{margin-bottom:.5rem}.ps-2{padding-right:.5rem}.pe-2{padding-left:.5rem}.pt-2{padding-top:.5rem}.pb-2{padding-bottom:.5rem}.gap-3{gap:1rem}.m-3{margin:1rem}.p-3{padding:1rem}.mx-3{margin-right:1rem;margin-left:1rem}.my-3{margin-top:1rem;margin-bottom:1rem}.px-3{padding-right:1rem;padding-left:1rem}.py-3{padding-top:1rem;padding-bottom:1rem}.ms-3{margin-right:1rem}.me-3{margin-left:1rem}.mt-3{margin-top:1rem}.mb-3{margin-bottom:1rem}.ps-3{padding-right:1rem}.pe-3{padding-left:1rem}.pt-3{padding-top:1rem}.pb-3{padding-bottom:1rem}.gap-4{gap:1.5rem}.m-4{margin:1.5rem}.p-4{padding:1.5rem}.mx-4{margin-right:1.5rem;margin-left:1.5rem}.my-4{margin-top:1.5rem;margin-bottom:1.5rem}.px-4{padding-right:1.5rem;padding-left:1.5rem}.py-4{padding-top:1.5rem;padding-bottom:1.5rem}.ms-4{margin-right:1.5rem}.me-4{margin-left:1.5rem}.mt-4{margin-top:1.5rem}.mb-4{margin-bottom:1.5rem}.ps-4{padding-right:1.5rem}.pe-4{padding-left:1.5rem}.pt-4{padding-top:1.5rem}.pb-4{padding-bottom:1.5rem}.gap-5{gap:2rem}.m-5{margin:2rem}.p-5{padding:2rem}.mx-5{margin-right:2rem;margin-left:2rem}.my-5{margin-top:2rem;margin-bottom:2rem}.px-5{padding-right:2rem;padding-left:2rem}.py-5{padding-top:2rem;padding-bottom:2rem}.ms-5{margin-right:2rem}.me-5{margin-left:2rem}.mt-5{margin-top:2rem}.mb-5{margin-bottom:2rem}.ps-5{padding-right:2rem}.pe-5{padding-left:2rem}.pt-5{padding-top:2rem}.pb-5{padding-bottom:2rem}.border{border:1px solid currentColor}.br-start{border-top-left-radius:.5rem;border-bottom-left-radius:.5rem}.br-end{border-top-right-radius:.5rem;border-bottom-right-radius:.5rem}.white-space-nowrap{white-space:nowrap}.text-end{text-align:right}.text-start{text-align:left}.text-center{text-align:center}.overflow-auto{overflow:auto}.overflow-hidden{overflow:hidden}label{display:block;padding-bottom:.5rem;font-weight:700}label:empty{display:none}label.required:after{content:\"*\"}ul{list-style:none;margin:0;padding:0}\n"] }]
|
|
579
864
|
}], ctorParameters: () => [{ type: i1.NgControl, decorators: [{
|
|
580
865
|
type: Self
|
|
581
866
|
}] }], propDecorators: { min: [{
|
|
@@ -589,15 +874,107 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.5", ngImpor
|
|
|
589
874
|
class ReadonlyComponent {
|
|
590
875
|
constructor() { }
|
|
591
876
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: ReadonlyComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
592
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.5", type: ReadonlyComponent, selector: "jo-readonly", inputs: { model: "model" }, ngImport: i0, template: "<label>\r\n <ng-content></ng-content>\r\n</label>\r\n\r\n<div class=\"readonly\">\r\n {{model}}\r\n</div
|
|
877
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.5", type: ReadonlyComponent, selector: "jo-readonly", inputs: { model: "model" }, ngImport: i0, template: "<label>\r\n <ng-content></ng-content>\r\n</label>\r\n\r\n<div class=\"readonly p-2\">\r\n {{model}}\r\n</div>", styles: [":host>div{color:inherit;background:transparent;border-width:.15em;border-color:transparent;border-style:solid}\n", "body{font-family:Arial;margin:0}h1,h2,h3,h4,h5,h6{margin:0}a:not(.jo-ignore),button:not(.jo-ignore),.jo-button,input,textarea{color:inherit;background:transparent;border-width:.15rem;border-style:outset;border-color:currentColor;padding:.5rem;margin:0;font-size:1rem;line-height:1rem;font-family:inherit;min-width:0}a:not(.jo-ignore):active,a:not(.jo-ignore).active,button:not(.jo-ignore):active,button:not(.jo-ignore).active,.jo-button:active,.jo-button.active,input:active,input.active,textarea:active,textarea.active{border-style:inset}a:not(.jo-ignore):disabled,a:not(.jo-ignore).disabled,button:not(.jo-ignore):disabled,button:not(.jo-ignore).disabled,.jo-button:disabled,.jo-button.disabled,input:disabled,input.disabled,textarea:disabled,textarea.disabled{cursor:not-allowed;border-style:solid;box-shadow:none;opacity:.5}a,button,.jo-button{cursor:pointer}.card{border:1px solid currentColor;border-radius:.5rem}.card .card-header{padding:1rem;border-bottom:1px solid currentColor}.card .card-body,.card .card-footer{padding:1rem}.card .card-table{overflow-x:auto}.card .card-body+.card-table,.card .card-table+.card-body,.card .card-body+.card-body,.card .card-table+.card-table,.card .card-table+.card-footer,.card .card-body+.card-footer{border-top:1px solid currentColor}.card table{width:100%;border-collapse:collapse}.card table>thead{text-align:left}.card table>thead th{border-bottom:1px solid currentColor}.card table>tfoot td{margin-top:1px;border-top:1px solid currentColor}.card table th,.card table td{padding:1rem}.card table tbody tr>td:last-child{text-align:right}.card table tbody tr:nth-child(odd) td{-webkit-backdrop-filter:brightness(85%);backdrop-filter:brightness(85%)}.card table tbody tr:last-child>td:first-child{border-bottom-left-radius:.5rem}.card table tbody tr:last-child>td:last-child{border-bottom-right-radius:.5rem}.card table tbody tr.active td{font-weight:700}.position-relative{position:relative}.d-flex{display:flex}.flex-row{flex-direction:row}.flex-column{flex-direction:column}.align-items-start{align-items:flex-start}.align-items-end{align-items:flex-end}.align-items-center{align-items:center}.align-items-baseline{align-items:baseline}.align-items-stretch{align-items:stretch}.justify-content-start{justify-content:flex-start}.justify-content-end{justify-content:flex-end}.justify-content-center{justify-content:center}.justify-content-between{justify-content:space-between}.justify-content-around{justify-content:space-around}.justify-content-evenly{justify-content:space-evenly}.flex-wrap{flex-wrap:wrap}.flex-1{flex:1}.flex-2{flex:2}.flex-3{flex:3}.flex-4{flex:4}.gap-1{gap:.25rem}.m-1{margin:.25rem}.p-1{padding:.25rem}.mx-1{margin-right:.25rem;margin-left:.25rem}.my-1{margin-top:.25rem;margin-bottom:.25rem}.px-1{padding-right:.25rem;padding-left:.25rem}.py-1{padding-top:.25rem;padding-bottom:.25rem}.ms-1{margin-right:.25rem}.me-1{margin-left:.25rem}.mt-1{margin-top:.25rem}.mb-1{margin-bottom:.25rem}.ps-1{padding-right:.25rem}.pe-1{padding-left:.25rem}.pt-1{padding-top:.25rem}.pb-1{padding-bottom:.25rem}.gap-2{gap:.5rem}.m-2{margin:.5rem}.p-2{padding:.5rem}.mx-2{margin-right:.5rem;margin-left:.5rem}.my-2{margin-top:.5rem;margin-bottom:.5rem}.px-2{padding-right:.5rem;padding-left:.5rem}.py-2{padding-top:.5rem;padding-bottom:.5rem}.ms-2{margin-right:.5rem}.me-2{margin-left:.5rem}.mt-2{margin-top:.5rem}.mb-2{margin-bottom:.5rem}.ps-2{padding-right:.5rem}.pe-2{padding-left:.5rem}.pt-2{padding-top:.5rem}.pb-2{padding-bottom:.5rem}.gap-3{gap:1rem}.m-3{margin:1rem}.p-3{padding:1rem}.mx-3{margin-right:1rem;margin-left:1rem}.my-3{margin-top:1rem;margin-bottom:1rem}.px-3{padding-right:1rem;padding-left:1rem}.py-3{padding-top:1rem;padding-bottom:1rem}.ms-3{margin-right:1rem}.me-3{margin-left:1rem}.mt-3{margin-top:1rem}.mb-3{margin-bottom:1rem}.ps-3{padding-right:1rem}.pe-3{padding-left:1rem}.pt-3{padding-top:1rem}.pb-3{padding-bottom:1rem}.gap-4{gap:1.5rem}.m-4{margin:1.5rem}.p-4{padding:1.5rem}.mx-4{margin-right:1.5rem;margin-left:1.5rem}.my-4{margin-top:1.5rem;margin-bottom:1.5rem}.px-4{padding-right:1.5rem;padding-left:1.5rem}.py-4{padding-top:1.5rem;padding-bottom:1.5rem}.ms-4{margin-right:1.5rem}.me-4{margin-left:1.5rem}.mt-4{margin-top:1.5rem}.mb-4{margin-bottom:1.5rem}.ps-4{padding-right:1.5rem}.pe-4{padding-left:1.5rem}.pt-4{padding-top:1.5rem}.pb-4{padding-bottom:1.5rem}.gap-5{gap:2rem}.m-5{margin:2rem}.p-5{padding:2rem}.mx-5{margin-right:2rem;margin-left:2rem}.my-5{margin-top:2rem;margin-bottom:2rem}.px-5{padding-right:2rem;padding-left:2rem}.py-5{padding-top:2rem;padding-bottom:2rem}.ms-5{margin-right:2rem}.me-5{margin-left:2rem}.mt-5{margin-top:2rem}.mb-5{margin-bottom:2rem}.ps-5{padding-right:2rem}.pe-5{padding-left:2rem}.pt-5{padding-top:2rem}.pb-5{padding-bottom:2rem}.border{border:1px solid currentColor}.br-start{border-top-left-radius:.5rem;border-bottom-left-radius:.5rem}.br-end{border-top-right-radius:.5rem;border-bottom-right-radius:.5rem}.white-space-nowrap{white-space:nowrap}.text-end{text-align:right}.text-start{text-align:left}.text-center{text-align:center}.overflow-auto{overflow:auto}.overflow-hidden{overflow:hidden}label{display:block;padding-bottom:.5rem;font-weight:700}label:empty{display:none}label.required:after{content:\"*\"}ul{list-style:none;margin:0;padding:0}\n"] }); }
|
|
593
878
|
}
|
|
594
879
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: ReadonlyComponent, decorators: [{
|
|
595
880
|
type: Component,
|
|
596
|
-
args: [{ selector: 'jo-readonly', template: "<label>\r\n <ng-content></ng-content>\r\n</label>\r\n\r\n<div class=\"readonly\">\r\n {{model}}\r\n</div
|
|
881
|
+
args: [{ selector: 'jo-readonly', template: "<label>\r\n <ng-content></ng-content>\r\n</label>\r\n\r\n<div class=\"readonly p-2\">\r\n {{model}}\r\n</div>", styles: [":host>div{color:inherit;background:transparent;border-width:.15em;border-color:transparent;border-style:solid}\n", "body{font-family:Arial;margin:0}h1,h2,h3,h4,h5,h6{margin:0}a:not(.jo-ignore),button:not(.jo-ignore),.jo-button,input,textarea{color:inherit;background:transparent;border-width:.15rem;border-style:outset;border-color:currentColor;padding:.5rem;margin:0;font-size:1rem;line-height:1rem;font-family:inherit;min-width:0}a:not(.jo-ignore):active,a:not(.jo-ignore).active,button:not(.jo-ignore):active,button:not(.jo-ignore).active,.jo-button:active,.jo-button.active,input:active,input.active,textarea:active,textarea.active{border-style:inset}a:not(.jo-ignore):disabled,a:not(.jo-ignore).disabled,button:not(.jo-ignore):disabled,button:not(.jo-ignore).disabled,.jo-button:disabled,.jo-button.disabled,input:disabled,input.disabled,textarea:disabled,textarea.disabled{cursor:not-allowed;border-style:solid;box-shadow:none;opacity:.5}a,button,.jo-button{cursor:pointer}.card{border:1px solid currentColor;border-radius:.5rem}.card .card-header{padding:1rem;border-bottom:1px solid currentColor}.card .card-body,.card .card-footer{padding:1rem}.card .card-table{overflow-x:auto}.card .card-body+.card-table,.card .card-table+.card-body,.card .card-body+.card-body,.card .card-table+.card-table,.card .card-table+.card-footer,.card .card-body+.card-footer{border-top:1px solid currentColor}.card table{width:100%;border-collapse:collapse}.card table>thead{text-align:left}.card table>thead th{border-bottom:1px solid currentColor}.card table>tfoot td{margin-top:1px;border-top:1px solid currentColor}.card table th,.card table td{padding:1rem}.card table tbody tr>td:last-child{text-align:right}.card table tbody tr:nth-child(odd) td{-webkit-backdrop-filter:brightness(85%);backdrop-filter:brightness(85%)}.card table tbody tr:last-child>td:first-child{border-bottom-left-radius:.5rem}.card table tbody tr:last-child>td:last-child{border-bottom-right-radius:.5rem}.card table tbody tr.active td{font-weight:700}.position-relative{position:relative}.d-flex{display:flex}.flex-row{flex-direction:row}.flex-column{flex-direction:column}.align-items-start{align-items:flex-start}.align-items-end{align-items:flex-end}.align-items-center{align-items:center}.align-items-baseline{align-items:baseline}.align-items-stretch{align-items:stretch}.justify-content-start{justify-content:flex-start}.justify-content-end{justify-content:flex-end}.justify-content-center{justify-content:center}.justify-content-between{justify-content:space-between}.justify-content-around{justify-content:space-around}.justify-content-evenly{justify-content:space-evenly}.flex-wrap{flex-wrap:wrap}.flex-1{flex:1}.flex-2{flex:2}.flex-3{flex:3}.flex-4{flex:4}.gap-1{gap:.25rem}.m-1{margin:.25rem}.p-1{padding:.25rem}.mx-1{margin-right:.25rem;margin-left:.25rem}.my-1{margin-top:.25rem;margin-bottom:.25rem}.px-1{padding-right:.25rem;padding-left:.25rem}.py-1{padding-top:.25rem;padding-bottom:.25rem}.ms-1{margin-right:.25rem}.me-1{margin-left:.25rem}.mt-1{margin-top:.25rem}.mb-1{margin-bottom:.25rem}.ps-1{padding-right:.25rem}.pe-1{padding-left:.25rem}.pt-1{padding-top:.25rem}.pb-1{padding-bottom:.25rem}.gap-2{gap:.5rem}.m-2{margin:.5rem}.p-2{padding:.5rem}.mx-2{margin-right:.5rem;margin-left:.5rem}.my-2{margin-top:.5rem;margin-bottom:.5rem}.px-2{padding-right:.5rem;padding-left:.5rem}.py-2{padding-top:.5rem;padding-bottom:.5rem}.ms-2{margin-right:.5rem}.me-2{margin-left:.5rem}.mt-2{margin-top:.5rem}.mb-2{margin-bottom:.5rem}.ps-2{padding-right:.5rem}.pe-2{padding-left:.5rem}.pt-2{padding-top:.5rem}.pb-2{padding-bottom:.5rem}.gap-3{gap:1rem}.m-3{margin:1rem}.p-3{padding:1rem}.mx-3{margin-right:1rem;margin-left:1rem}.my-3{margin-top:1rem;margin-bottom:1rem}.px-3{padding-right:1rem;padding-left:1rem}.py-3{padding-top:1rem;padding-bottom:1rem}.ms-3{margin-right:1rem}.me-3{margin-left:1rem}.mt-3{margin-top:1rem}.mb-3{margin-bottom:1rem}.ps-3{padding-right:1rem}.pe-3{padding-left:1rem}.pt-3{padding-top:1rem}.pb-3{padding-bottom:1rem}.gap-4{gap:1.5rem}.m-4{margin:1.5rem}.p-4{padding:1.5rem}.mx-4{margin-right:1.5rem;margin-left:1.5rem}.my-4{margin-top:1.5rem;margin-bottom:1.5rem}.px-4{padding-right:1.5rem;padding-left:1.5rem}.py-4{padding-top:1.5rem;padding-bottom:1.5rem}.ms-4{margin-right:1.5rem}.me-4{margin-left:1.5rem}.mt-4{margin-top:1.5rem}.mb-4{margin-bottom:1.5rem}.ps-4{padding-right:1.5rem}.pe-4{padding-left:1.5rem}.pt-4{padding-top:1.5rem}.pb-4{padding-bottom:1.5rem}.gap-5{gap:2rem}.m-5{margin:2rem}.p-5{padding:2rem}.mx-5{margin-right:2rem;margin-left:2rem}.my-5{margin-top:2rem;margin-bottom:2rem}.px-5{padding-right:2rem;padding-left:2rem}.py-5{padding-top:2rem;padding-bottom:2rem}.ms-5{margin-right:2rem}.me-5{margin-left:2rem}.mt-5{margin-top:2rem}.mb-5{margin-bottom:2rem}.ps-5{padding-right:2rem}.pe-5{padding-left:2rem}.pt-5{padding-top:2rem}.pb-5{padding-bottom:2rem}.border{border:1px solid currentColor}.br-start{border-top-left-radius:.5rem;border-bottom-left-radius:.5rem}.br-end{border-top-right-radius:.5rem;border-bottom-right-radius:.5rem}.white-space-nowrap{white-space:nowrap}.text-end{text-align:right}.text-start{text-align:left}.text-center{text-align:center}.overflow-auto{overflow:auto}.overflow-hidden{overflow:hidden}label{display:block;padding-bottom:.5rem;font-weight:700}label:empty{display:none}label.required:after{content:\"*\"}ul{list-style:none;margin:0;padding:0}\n"] }]
|
|
597
882
|
}], ctorParameters: () => [], propDecorators: { model: [{
|
|
598
883
|
type: Input
|
|
599
884
|
}] } });
|
|
600
885
|
|
|
886
|
+
class SelectComponent extends ItemDirective {
|
|
887
|
+
get searchTerm() {
|
|
888
|
+
return this._searchTerm;
|
|
889
|
+
}
|
|
890
|
+
set searchTerm(value) {
|
|
891
|
+
this._searchTerm = value;
|
|
892
|
+
this.filteredItems = value
|
|
893
|
+
? this._items.filter(item => item.value.toLowerCase().includes(value.toLowerCase()))
|
|
894
|
+
: this._items;
|
|
895
|
+
}
|
|
896
|
+
constructor(ngControl, hostElement) {
|
|
897
|
+
super(ngControl);
|
|
898
|
+
this.ngControl = ngControl;
|
|
899
|
+
this.hostElement = hostElement;
|
|
900
|
+
this.dropHeightPx = 200;
|
|
901
|
+
this._searchTerm = '';
|
|
902
|
+
this.isDropdownCloseToBottom = false;
|
|
903
|
+
this.id = `${Math.random().toString(36).substr(2, 9)}`;
|
|
904
|
+
}
|
|
905
|
+
get activeItemValues() {
|
|
906
|
+
return this._items
|
|
907
|
+
.filter(item => this._model.includes(item.key))
|
|
908
|
+
.map(item => item.value)
|
|
909
|
+
.join(', ');
|
|
910
|
+
}
|
|
911
|
+
get isSelectedAll() {
|
|
912
|
+
return this._items.every(item => this._model.includes(item.key));
|
|
913
|
+
}
|
|
914
|
+
onGlobalClick(event) {
|
|
915
|
+
if (!this.hostElement.nativeElement.contains(event.target))
|
|
916
|
+
this.closeDropdown();
|
|
917
|
+
}
|
|
918
|
+
onClickGroup() {
|
|
919
|
+
this.closeDropdown();
|
|
920
|
+
if (this.dropGroup.nativeElement.getBoundingClientRect().bottom + this.dropHeightPx > window.innerHeight) {
|
|
921
|
+
this.dropup.nativeElement.show();
|
|
922
|
+
}
|
|
923
|
+
else {
|
|
924
|
+
this.dropdown.nativeElement.show();
|
|
925
|
+
}
|
|
926
|
+
}
|
|
927
|
+
onClick(item) {
|
|
928
|
+
this._model = this._model.filter(key => this._items.map(item => item.key).includes(key));
|
|
929
|
+
if (this._model.includes(item.key)) {
|
|
930
|
+
if (this.required === true && this._model.length === 1)
|
|
931
|
+
return;
|
|
932
|
+
this.model = this._model.filter(key => key !== item.key);
|
|
933
|
+
return;
|
|
934
|
+
}
|
|
935
|
+
if (!this.isMultiple && this._model.length === 1) {
|
|
936
|
+
this.model = [item.key];
|
|
937
|
+
return;
|
|
938
|
+
}
|
|
939
|
+
this.model = [...this._model, item.key];
|
|
940
|
+
}
|
|
941
|
+
onClickSelectAll() {
|
|
942
|
+
this.model = this.isSelectedAll
|
|
943
|
+
? []
|
|
944
|
+
: this._items.map(item => item.key);
|
|
945
|
+
}
|
|
946
|
+
closeDropdown() {
|
|
947
|
+
this.searchTerm = '';
|
|
948
|
+
this.dropdown.nativeElement.close();
|
|
949
|
+
this.dropup.nativeElement.close();
|
|
950
|
+
}
|
|
951
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: SelectComponent, deps: [{ token: i1.NgControl, self: true }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
952
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.5", type: SelectComponent, selector: "jo-select", inputs: { dropHeightPx: "dropHeightPx" }, host: { listeners: { "document:mousedown": "onGlobalClick($event)" }, properties: { "style.--dropHeightPx": "this.dropHeightPx" } }, viewQueries: [{ propertyName: "dropGroup", first: true, predicate: ["dropGroup"], descendants: true }, { propertyName: "dropup", first: true, predicate: ["dropup"], descendants: true }, { propertyName: "dropdown", first: true, predicate: ["dropdown"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"d-flex justify-content-between\">\r\n <label\r\n id=\"select_{{id}}\"\r\n [class.required]=\"required\"\r\n >\r\n <ng-content></ng-content>\r\n </label>\r\n <div>\r\n <ng-content select=\"[rightAligned]\"></ng-content>\r\n </div>\r\n</div>\r\n\r\n<div class=\"position-relative\">\r\n <dialog #dropup>\r\n <ng-template [ngTemplateOutlet]=\"dropContent\"></ng-template>\r\n </dialog>\r\n</div>\r\n\r\n<div\r\n #dropGroup\r\n class=\"d-flex align-items-stretch\"\r\n role=\"group\"\r\n attr.aria-labelledby=\"select_{{id}}\"\r\n>\r\n <button\r\n class=\"flex-1 br-start text-start\"\r\n type=\"button\"\r\n [class.active]=\"_model.length > 0\"\r\n [class.invalid]=\"!ngControl.control?.invalid\"\r\n (click)=\"onClickGroup()\"\r\n (blur)=\"onTouched()\"\r\n >\r\n {{activeItemValues}}\r\n </button>\r\n <button\r\n class=\"d-flex br-end d-flex align-items-center justify-content-center\"\r\n [class.invalid]=\"!ngControl.control?.invalid\"\r\n [disabled]=\"isDisabled\"\r\n (click)=\"onClickGroup()\"\r\n (blur)=\"onTouched()\"\r\n >\r\n <icon\r\n size=\"1rem\"\r\n type=\"chevron\"\r\n [fill]=\"[null, 'current']\"\r\n fillRotate=\"90\"\r\n [stroke]=\"['current']\"\r\n [class.up]=\"dropup.open\"\r\n [class.down]=\"dropdown.open\"\r\n ></icon>\r\n </button>\r\n</div>\r\n\r\n<dialog #dropdown>\r\n <ng-template [ngTemplateOutlet]=\"dropContent\"></ng-template>\r\n</dialog>\r\n\r\n<ng-template #dropContent>\r\n <div class=\"card\">\r\n <div class=\"card-body\">\r\n <div class=\"d-flex gap-2 align-items-stretch\">\r\n <input\r\n [(ngModel)]=\"searchTerm\"\r\n class=\"flex-1 br-start br-end\"\r\n />\r\n <button\r\n *ngIf=\"_isMultiple\"\r\n type=\"button\"\r\n class=\"br-start br-end\"\r\n (click)=\"onClickSelectAll()\"\r\n >\r\n {{isSelectedAll ? 'Deselect' : 'Select'}} All\r\n </button>\r\n </div>\r\n </div>\r\n <div class=\"d-flex flex-column\">\r\n <button\r\n *ngFor=\"let item of filteredItems\"\r\n class=\"d-flex flex-1 align-items-center text-start gap-2\"\r\n [disabled]=\"isDisabled\"\r\n [class.active]=\"_model.includes(item.key)\"\r\n (click)=\"onClick(item)\"\r\n >\r\n <div\r\n class=\"jo-button {{isMultiple ? 'br-20' : 'br-50'}}\"\r\n [class.active]=\"_model.includes(item.key)\"\r\n [class.disabled]=\"isDisabled\"\r\n [class.invalid]=\"ngControl.control?.invalid\"\r\n >\r\n <icon\r\n *ngIf=\"_model.includes(item.key)\"\r\n size=\"1rem\"\r\n [type]=\"isMultiple ? 'check' : 'dot'\"\r\n [fill]=\"[null, 'current']\"\r\n fillRotate=\"90\"\r\n ></icon>\r\n </div>\r\n {{item.value}}\r\n </button>\r\n </div>\r\n </div>\r\n</ng-template>", styles: [":host{position:relative;display:block}:host>.position-relative>dialog{bottom:0}.drop{max-height:200px;overflow-y:auto}.drop.down{top:100%}.drop.up{bottom:100%}div[role=group]>button:first-child{border-right:none;white-space:nowrap;overflow-x:hidden;text-overflow:ellipsis}div[role=group]>button:last-child{border-left:none}dialog{padding:0;border:0;margin:0;background:transparent;width:100%;z-index:2;color:currentColor}dialog>.card{-webkit-backdrop-filter:blur(1.5rem);backdrop-filter:blur(1.5rem);max-height:calc(var(--dropHeightPx) * 1px);overflow-y:auto}dialog>.card>.flex-column>button{border-color:transparent;border-width:.075em}dialog>.card>.flex-column>button>.jo-button{position:relative;text-align:left}dialog>.card>.flex-column>button>.jo-button>icon{position:absolute;top:0;left:0}icon[type=chevron]{transform:rotate(90deg)}icon[type=chevron].up{transform:rotate(0)}icon[type=chevron].down{transform:rotate(180deg)}.br-20{border-radius:20%}.br-50{border-radius:50%}\n", "body{font-family:Arial;margin:0}h1,h2,h3,h4,h5,h6{margin:0}a:not(.jo-ignore),button:not(.jo-ignore),.jo-button,input,textarea{color:inherit;background:transparent;border-width:.15rem;border-style:outset;border-color:currentColor;padding:.5rem;margin:0;font-size:1rem;line-height:1rem;font-family:inherit;min-width:0}a:not(.jo-ignore):active,a:not(.jo-ignore).active,button:not(.jo-ignore):active,button:not(.jo-ignore).active,.jo-button:active,.jo-button.active,input:active,input.active,textarea:active,textarea.active{border-style:inset}a:not(.jo-ignore):disabled,a:not(.jo-ignore).disabled,button:not(.jo-ignore):disabled,button:not(.jo-ignore).disabled,.jo-button:disabled,.jo-button.disabled,input:disabled,input.disabled,textarea:disabled,textarea.disabled{cursor:not-allowed;border-style:solid;box-shadow:none;opacity:.5}a,button,.jo-button{cursor:pointer}.card{border:1px solid currentColor;border-radius:.5rem}.card .card-header{padding:1rem;border-bottom:1px solid currentColor}.card .card-body,.card .card-footer{padding:1rem}.card .card-table{overflow-x:auto}.card .card-body+.card-table,.card .card-table+.card-body,.card .card-body+.card-body,.card .card-table+.card-table,.card .card-table+.card-footer,.card .card-body+.card-footer{border-top:1px solid currentColor}.card table{width:100%;border-collapse:collapse}.card table>thead{text-align:left}.card table>thead th{border-bottom:1px solid currentColor}.card table>tfoot td{margin-top:1px;border-top:1px solid currentColor}.card table th,.card table td{padding:1rem}.card table tbody tr>td:last-child{text-align:right}.card table tbody tr:nth-child(odd) td{-webkit-backdrop-filter:brightness(85%);backdrop-filter:brightness(85%)}.card table tbody tr:last-child>td:first-child{border-bottom-left-radius:.5rem}.card table tbody tr:last-child>td:last-child{border-bottom-right-radius:.5rem}.card table tbody tr.active td{font-weight:700}.position-relative{position:relative}.d-flex{display:flex}.flex-row{flex-direction:row}.flex-column{flex-direction:column}.align-items-start{align-items:flex-start}.align-items-end{align-items:flex-end}.align-items-center{align-items:center}.align-items-baseline{align-items:baseline}.align-items-stretch{align-items:stretch}.justify-content-start{justify-content:flex-start}.justify-content-end{justify-content:flex-end}.justify-content-center{justify-content:center}.justify-content-between{justify-content:space-between}.justify-content-around{justify-content:space-around}.justify-content-evenly{justify-content:space-evenly}.flex-wrap{flex-wrap:wrap}.flex-1{flex:1}.flex-2{flex:2}.flex-3{flex:3}.flex-4{flex:4}.gap-1{gap:.25rem}.m-1{margin:.25rem}.p-1{padding:.25rem}.mx-1{margin-right:.25rem;margin-left:.25rem}.my-1{margin-top:.25rem;margin-bottom:.25rem}.px-1{padding-right:.25rem;padding-left:.25rem}.py-1{padding-top:.25rem;padding-bottom:.25rem}.ms-1{margin-right:.25rem}.me-1{margin-left:.25rem}.mt-1{margin-top:.25rem}.mb-1{margin-bottom:.25rem}.ps-1{padding-right:.25rem}.pe-1{padding-left:.25rem}.pt-1{padding-top:.25rem}.pb-1{padding-bottom:.25rem}.gap-2{gap:.5rem}.m-2{margin:.5rem}.p-2{padding:.5rem}.mx-2{margin-right:.5rem;margin-left:.5rem}.my-2{margin-top:.5rem;margin-bottom:.5rem}.px-2{padding-right:.5rem;padding-left:.5rem}.py-2{padding-top:.5rem;padding-bottom:.5rem}.ms-2{margin-right:.5rem}.me-2{margin-left:.5rem}.mt-2{margin-top:.5rem}.mb-2{margin-bottom:.5rem}.ps-2{padding-right:.5rem}.pe-2{padding-left:.5rem}.pt-2{padding-top:.5rem}.pb-2{padding-bottom:.5rem}.gap-3{gap:1rem}.m-3{margin:1rem}.p-3{padding:1rem}.mx-3{margin-right:1rem;margin-left:1rem}.my-3{margin-top:1rem;margin-bottom:1rem}.px-3{padding-right:1rem;padding-left:1rem}.py-3{padding-top:1rem;padding-bottom:1rem}.ms-3{margin-right:1rem}.me-3{margin-left:1rem}.mt-3{margin-top:1rem}.mb-3{margin-bottom:1rem}.ps-3{padding-right:1rem}.pe-3{padding-left:1rem}.pt-3{padding-top:1rem}.pb-3{padding-bottom:1rem}.gap-4{gap:1.5rem}.m-4{margin:1.5rem}.p-4{padding:1.5rem}.mx-4{margin-right:1.5rem;margin-left:1.5rem}.my-4{margin-top:1.5rem;margin-bottom:1.5rem}.px-4{padding-right:1.5rem;padding-left:1.5rem}.py-4{padding-top:1.5rem;padding-bottom:1.5rem}.ms-4{margin-right:1.5rem}.me-4{margin-left:1.5rem}.mt-4{margin-top:1.5rem}.mb-4{margin-bottom:1.5rem}.ps-4{padding-right:1.5rem}.pe-4{padding-left:1.5rem}.pt-4{padding-top:1.5rem}.pb-4{padding-bottom:1.5rem}.gap-5{gap:2rem}.m-5{margin:2rem}.p-5{padding:2rem}.mx-5{margin-right:2rem;margin-left:2rem}.my-5{margin-top:2rem;margin-bottom:2rem}.px-5{padding-right:2rem;padding-left:2rem}.py-5{padding-top:2rem;padding-bottom:2rem}.ms-5{margin-right:2rem}.me-5{margin-left:2rem}.mt-5{margin-top:2rem}.mb-5{margin-bottom:2rem}.ps-5{padding-right:2rem}.pe-5{padding-left:2rem}.pt-5{padding-top:2rem}.pb-5{padding-bottom:2rem}.border{border:1px solid currentColor}.br-start{border-top-left-radius:.5rem;border-bottom-left-radius:.5rem}.br-end{border-top-right-radius:.5rem;border-bottom-right-radius:.5rem}.white-space-nowrap{white-space:nowrap}.text-end{text-align:right}.text-start{text-align:left}.text-center{text-align:center}.overflow-auto{overflow:auto}.overflow-hidden{overflow:hidden}label{display:block;padding-bottom:.5rem;font-weight:700}label:empty{display:none}label.required:after{content:\"*\"}ul{list-style:none;margin:0;padding:0}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: IconComponent, selector: "icon[type]", inputs: ["type", "fill", "fillRotate", "fillOpacity", "stroke", "strokeRotate", "spin"] }, { kind: "directive", type: SizeDirective, selector: "[size]", inputs: ["size"] }] }); }
|
|
953
|
+
}
|
|
954
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: SelectComponent, decorators: [{
|
|
955
|
+
type: Component,
|
|
956
|
+
args: [{ selector: 'jo-select', template: "<div class=\"d-flex justify-content-between\">\r\n <label\r\n id=\"select_{{id}}\"\r\n [class.required]=\"required\"\r\n >\r\n <ng-content></ng-content>\r\n </label>\r\n <div>\r\n <ng-content select=\"[rightAligned]\"></ng-content>\r\n </div>\r\n</div>\r\n\r\n<div class=\"position-relative\">\r\n <dialog #dropup>\r\n <ng-template [ngTemplateOutlet]=\"dropContent\"></ng-template>\r\n </dialog>\r\n</div>\r\n\r\n<div\r\n #dropGroup\r\n class=\"d-flex align-items-stretch\"\r\n role=\"group\"\r\n attr.aria-labelledby=\"select_{{id}}\"\r\n>\r\n <button\r\n class=\"flex-1 br-start text-start\"\r\n type=\"button\"\r\n [class.active]=\"_model.length > 0\"\r\n [class.invalid]=\"!ngControl.control?.invalid\"\r\n (click)=\"onClickGroup()\"\r\n (blur)=\"onTouched()\"\r\n >\r\n {{activeItemValues}}\r\n </button>\r\n <button\r\n class=\"d-flex br-end d-flex align-items-center justify-content-center\"\r\n [class.invalid]=\"!ngControl.control?.invalid\"\r\n [disabled]=\"isDisabled\"\r\n (click)=\"onClickGroup()\"\r\n (blur)=\"onTouched()\"\r\n >\r\n <icon\r\n size=\"1rem\"\r\n type=\"chevron\"\r\n [fill]=\"[null, 'current']\"\r\n fillRotate=\"90\"\r\n [stroke]=\"['current']\"\r\n [class.up]=\"dropup.open\"\r\n [class.down]=\"dropdown.open\"\r\n ></icon>\r\n </button>\r\n</div>\r\n\r\n<dialog #dropdown>\r\n <ng-template [ngTemplateOutlet]=\"dropContent\"></ng-template>\r\n</dialog>\r\n\r\n<ng-template #dropContent>\r\n <div class=\"card\">\r\n <div class=\"card-body\">\r\n <div class=\"d-flex gap-2 align-items-stretch\">\r\n <input\r\n [(ngModel)]=\"searchTerm\"\r\n class=\"flex-1 br-start br-end\"\r\n />\r\n <button\r\n *ngIf=\"_isMultiple\"\r\n type=\"button\"\r\n class=\"br-start br-end\"\r\n (click)=\"onClickSelectAll()\"\r\n >\r\n {{isSelectedAll ? 'Deselect' : 'Select'}} All\r\n </button>\r\n </div>\r\n </div>\r\n <div class=\"d-flex flex-column\">\r\n <button\r\n *ngFor=\"let item of filteredItems\"\r\n class=\"d-flex flex-1 align-items-center text-start gap-2\"\r\n [disabled]=\"isDisabled\"\r\n [class.active]=\"_model.includes(item.key)\"\r\n (click)=\"onClick(item)\"\r\n >\r\n <div\r\n class=\"jo-button {{isMultiple ? 'br-20' : 'br-50'}}\"\r\n [class.active]=\"_model.includes(item.key)\"\r\n [class.disabled]=\"isDisabled\"\r\n [class.invalid]=\"ngControl.control?.invalid\"\r\n >\r\n <icon\r\n *ngIf=\"_model.includes(item.key)\"\r\n size=\"1rem\"\r\n [type]=\"isMultiple ? 'check' : 'dot'\"\r\n [fill]=\"[null, 'current']\"\r\n fillRotate=\"90\"\r\n ></icon>\r\n </div>\r\n {{item.value}}\r\n </button>\r\n </div>\r\n </div>\r\n</ng-template>", styles: [":host{position:relative;display:block}:host>.position-relative>dialog{bottom:0}.drop{max-height:200px;overflow-y:auto}.drop.down{top:100%}.drop.up{bottom:100%}div[role=group]>button:first-child{border-right:none;white-space:nowrap;overflow-x:hidden;text-overflow:ellipsis}div[role=group]>button:last-child{border-left:none}dialog{padding:0;border:0;margin:0;background:transparent;width:100%;z-index:2;color:currentColor}dialog>.card{-webkit-backdrop-filter:blur(1.5rem);backdrop-filter:blur(1.5rem);max-height:calc(var(--dropHeightPx) * 1px);overflow-y:auto}dialog>.card>.flex-column>button{border-color:transparent;border-width:.075em}dialog>.card>.flex-column>button>.jo-button{position:relative;text-align:left}dialog>.card>.flex-column>button>.jo-button>icon{position:absolute;top:0;left:0}icon[type=chevron]{transform:rotate(90deg)}icon[type=chevron].up{transform:rotate(0)}icon[type=chevron].down{transform:rotate(180deg)}.br-20{border-radius:20%}.br-50{border-radius:50%}\n", "body{font-family:Arial;margin:0}h1,h2,h3,h4,h5,h6{margin:0}a:not(.jo-ignore),button:not(.jo-ignore),.jo-button,input,textarea{color:inherit;background:transparent;border-width:.15rem;border-style:outset;border-color:currentColor;padding:.5rem;margin:0;font-size:1rem;line-height:1rem;font-family:inherit;min-width:0}a:not(.jo-ignore):active,a:not(.jo-ignore).active,button:not(.jo-ignore):active,button:not(.jo-ignore).active,.jo-button:active,.jo-button.active,input:active,input.active,textarea:active,textarea.active{border-style:inset}a:not(.jo-ignore):disabled,a:not(.jo-ignore).disabled,button:not(.jo-ignore):disabled,button:not(.jo-ignore).disabled,.jo-button:disabled,.jo-button.disabled,input:disabled,input.disabled,textarea:disabled,textarea.disabled{cursor:not-allowed;border-style:solid;box-shadow:none;opacity:.5}a,button,.jo-button{cursor:pointer}.card{border:1px solid currentColor;border-radius:.5rem}.card .card-header{padding:1rem;border-bottom:1px solid currentColor}.card .card-body,.card .card-footer{padding:1rem}.card .card-table{overflow-x:auto}.card .card-body+.card-table,.card .card-table+.card-body,.card .card-body+.card-body,.card .card-table+.card-table,.card .card-table+.card-footer,.card .card-body+.card-footer{border-top:1px solid currentColor}.card table{width:100%;border-collapse:collapse}.card table>thead{text-align:left}.card table>thead th{border-bottom:1px solid currentColor}.card table>tfoot td{margin-top:1px;border-top:1px solid currentColor}.card table th,.card table td{padding:1rem}.card table tbody tr>td:last-child{text-align:right}.card table tbody tr:nth-child(odd) td{-webkit-backdrop-filter:brightness(85%);backdrop-filter:brightness(85%)}.card table tbody tr:last-child>td:first-child{border-bottom-left-radius:.5rem}.card table tbody tr:last-child>td:last-child{border-bottom-right-radius:.5rem}.card table tbody tr.active td{font-weight:700}.position-relative{position:relative}.d-flex{display:flex}.flex-row{flex-direction:row}.flex-column{flex-direction:column}.align-items-start{align-items:flex-start}.align-items-end{align-items:flex-end}.align-items-center{align-items:center}.align-items-baseline{align-items:baseline}.align-items-stretch{align-items:stretch}.justify-content-start{justify-content:flex-start}.justify-content-end{justify-content:flex-end}.justify-content-center{justify-content:center}.justify-content-between{justify-content:space-between}.justify-content-around{justify-content:space-around}.justify-content-evenly{justify-content:space-evenly}.flex-wrap{flex-wrap:wrap}.flex-1{flex:1}.flex-2{flex:2}.flex-3{flex:3}.flex-4{flex:4}.gap-1{gap:.25rem}.m-1{margin:.25rem}.p-1{padding:.25rem}.mx-1{margin-right:.25rem;margin-left:.25rem}.my-1{margin-top:.25rem;margin-bottom:.25rem}.px-1{padding-right:.25rem;padding-left:.25rem}.py-1{padding-top:.25rem;padding-bottom:.25rem}.ms-1{margin-right:.25rem}.me-1{margin-left:.25rem}.mt-1{margin-top:.25rem}.mb-1{margin-bottom:.25rem}.ps-1{padding-right:.25rem}.pe-1{padding-left:.25rem}.pt-1{padding-top:.25rem}.pb-1{padding-bottom:.25rem}.gap-2{gap:.5rem}.m-2{margin:.5rem}.p-2{padding:.5rem}.mx-2{margin-right:.5rem;margin-left:.5rem}.my-2{margin-top:.5rem;margin-bottom:.5rem}.px-2{padding-right:.5rem;padding-left:.5rem}.py-2{padding-top:.5rem;padding-bottom:.5rem}.ms-2{margin-right:.5rem}.me-2{margin-left:.5rem}.mt-2{margin-top:.5rem}.mb-2{margin-bottom:.5rem}.ps-2{padding-right:.5rem}.pe-2{padding-left:.5rem}.pt-2{padding-top:.5rem}.pb-2{padding-bottom:.5rem}.gap-3{gap:1rem}.m-3{margin:1rem}.p-3{padding:1rem}.mx-3{margin-right:1rem;margin-left:1rem}.my-3{margin-top:1rem;margin-bottom:1rem}.px-3{padding-right:1rem;padding-left:1rem}.py-3{padding-top:1rem;padding-bottom:1rem}.ms-3{margin-right:1rem}.me-3{margin-left:1rem}.mt-3{margin-top:1rem}.mb-3{margin-bottom:1rem}.ps-3{padding-right:1rem}.pe-3{padding-left:1rem}.pt-3{padding-top:1rem}.pb-3{padding-bottom:1rem}.gap-4{gap:1.5rem}.m-4{margin:1.5rem}.p-4{padding:1.5rem}.mx-4{margin-right:1.5rem;margin-left:1.5rem}.my-4{margin-top:1.5rem;margin-bottom:1.5rem}.px-4{padding-right:1.5rem;padding-left:1.5rem}.py-4{padding-top:1.5rem;padding-bottom:1.5rem}.ms-4{margin-right:1.5rem}.me-4{margin-left:1.5rem}.mt-4{margin-top:1.5rem}.mb-4{margin-bottom:1.5rem}.ps-4{padding-right:1.5rem}.pe-4{padding-left:1.5rem}.pt-4{padding-top:1.5rem}.pb-4{padding-bottom:1.5rem}.gap-5{gap:2rem}.m-5{margin:2rem}.p-5{padding:2rem}.mx-5{margin-right:2rem;margin-left:2rem}.my-5{margin-top:2rem;margin-bottom:2rem}.px-5{padding-right:2rem;padding-left:2rem}.py-5{padding-top:2rem;padding-bottom:2rem}.ms-5{margin-right:2rem}.me-5{margin-left:2rem}.mt-5{margin-top:2rem}.mb-5{margin-bottom:2rem}.ps-5{padding-right:2rem}.pe-5{padding-left:2rem}.pt-5{padding-top:2rem}.pb-5{padding-bottom:2rem}.border{border:1px solid currentColor}.br-start{border-top-left-radius:.5rem;border-bottom-left-radius:.5rem}.br-end{border-top-right-radius:.5rem;border-bottom-right-radius:.5rem}.white-space-nowrap{white-space:nowrap}.text-end{text-align:right}.text-start{text-align:left}.text-center{text-align:center}.overflow-auto{overflow:auto}.overflow-hidden{overflow:hidden}label{display:block;padding-bottom:.5rem;font-weight:700}label:empty{display:none}label.required:after{content:\"*\"}ul{list-style:none;margin:0;padding:0}\n"] }]
|
|
957
|
+
}], ctorParameters: () => [{ type: i1.NgControl, decorators: [{
|
|
958
|
+
type: Self
|
|
959
|
+
}] }, { type: i0.ElementRef }], propDecorators: { dropGroup: [{
|
|
960
|
+
type: ViewChild,
|
|
961
|
+
args: ['dropGroup']
|
|
962
|
+
}], dropup: [{
|
|
963
|
+
type: ViewChild,
|
|
964
|
+
args: ['dropup']
|
|
965
|
+
}], dropdown: [{
|
|
966
|
+
type: ViewChild,
|
|
967
|
+
args: ['dropdown']
|
|
968
|
+
}], dropHeightPx: [{
|
|
969
|
+
type: Input
|
|
970
|
+
}, {
|
|
971
|
+
type: HostBinding,
|
|
972
|
+
args: ['style.--dropHeightPx']
|
|
973
|
+
}], onGlobalClick: [{
|
|
974
|
+
type: HostListener,
|
|
975
|
+
args: ['document:mousedown', ['$event']]
|
|
976
|
+
}] } });
|
|
977
|
+
|
|
601
978
|
class TextComponent extends ControlDirective {
|
|
602
979
|
get placeholder() {
|
|
603
980
|
return this._placeholder;
|
|
@@ -717,11 +1094,11 @@ class TextComponent extends ControlDirective {
|
|
|
717
1094
|
this.ngControl.control?.updateValueAndValidity();
|
|
718
1095
|
}
|
|
719
1096
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: TextComponent, deps: [{ token: i1.NgControl, self: true }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
720
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.5", type: TextComponent, selector: "jo-text", inputs: { placeholder: "placeholder", minLength: "minLength", maxLength: "maxLength", isSpellCheck: "isSpellCheck", isGrow: "isGrow", rows: "rows" }, outputs: { onBlur: "onBlur", onFocus: "onFocus" }, host: { listeners: { "window:resize": "onWindowResize()" } }, viewQueries: [{ propertyName: "textareaElement", first: true, predicate: ["textarea"], descendants: true }, { propertyName: "textareaHiddenElement", first: true, predicate: ["textareaHidden"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<label\r\n [for]=\"id\"\r\n [class.required]=\"required\"\r\n>\r\n <ng-content></ng-content>\r\n</label>\r\n\r\n<div class=\"d-flex\">\r\n <input\r\n *ngIf=\"!_isGrow\"\r\n type=\"text\"\r\n [(ngModel)]=\"model\"\r\n [class.
|
|
1097
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.5", type: TextComponent, selector: "jo-text", inputs: { placeholder: "placeholder", minLength: "minLength", maxLength: "maxLength", isSpellCheck: "isSpellCheck", isGrow: "isGrow", rows: "rows" }, outputs: { onBlur: "onBlur", onFocus: "onFocus" }, host: { listeners: { "window:resize": "onWindowResize()" } }, viewQueries: [{ propertyName: "textareaElement", first: true, predicate: ["textarea"], descendants: true }, { propertyName: "textareaHiddenElement", first: true, predicate: ["textareaHidden"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<label\r\n [for]=\"id\"\r\n [class.required]=\"required\"\r\n>\r\n <ng-content></ng-content>\r\n</label>\r\n\r\n<div class=\"d-flex\">\r\n <input\r\n *ngIf=\"!_isGrow\"\r\n type=\"text\"\r\n [(ngModel)]=\"model\"\r\n [class.br-end]=\"borderRadiusRight\"\r\n [class.br-start]=\"borderRadiusLeft\"\r\n class=\"flex-1\"\r\n [minlength]=\"_minLength\"\r\n [maxlength]=\"_maxLength\"\r\n [class.active]=\"_model !== null\"\r\n [class.invalid]=\"ngControl.control?.invalid\"\r\n [disabled]=\"isDisabled\"\r\n [id]=\"id\"\r\n [spellcheck]=\"isSpellCheck\"\r\n [placeholder]=\"placeholder\"\r\n (blur)=\"onTouched(); onBlur.emit($event)\"\r\n (focus)=\"onFocus.emit($event)\"\r\n />\r\n <textarea\r\n *ngIf=\"_isGrow\"\r\n #textarea\r\n [(ngModel)]=\"model\"\r\n [class.br-end]=\"borderRadiusRight\"\r\n [class.br-start]=\"borderRadiusLeft\"\r\n class=\"flex-1\"\r\n [rows]=\"rows\"\r\n [minlength]=\"_minLength\"\r\n [maxlength]=\"_maxLength\"\r\n [class.active]=\"_model !== null\"\r\n [class.invalid]=\"ngControl.control?.invalid\"\r\n [disabled]=\"isDisabled\"\r\n [id]=\"id\"\r\n [spellcheck]=\"isSpellCheck\"\r\n [placeholder]=\"placeholder\"\r\n (blur)=\"onTouched(); onBlur.emit($event)\"\r\n (focus)=\"onFocus.emit($event)\"\r\n ></textarea>\r\n</div>\r\n\r\n<div\r\n *ngIf=\"_isGrow\"\r\n class=\"d-flex\"\r\n>\r\n <textarea\r\n #textareaHidden\r\n [ngModel]=\"model\"\r\n class=\"hidden flex-1\"\r\n [rows]=\"rows\"\r\n ></textarea>\r\n</div>\r\n\r\n<!-- <ul *ngIf=\"ngControl.control?.errors\">\r\n <li *ngIf=\"ngControl.control?.errors?.['minlength']\">\r\n minimum length is {{minLength}}\r\n </li>\r\n <li *ngIf=\"ngControl.control?.errors?.['maxLength']\">\r\n maximum length is {{maxLength}}\r\n </li>\r\n</ul> -->", styles: [":host{display:block}textarea{font-family:inherit;cursor:text;overflow:hidden;resize:none;width:100%}textarea.hidden{padding:0;position:absolute;visibility:hidden;transition:none}input[type=text]{font-family:inherit;width:100%}\n", "body{font-family:Arial;margin:0}h1,h2,h3,h4,h5,h6{margin:0}a:not(.jo-ignore),button:not(.jo-ignore),.jo-button,input,textarea{color:inherit;background:transparent;border-width:.15rem;border-style:outset;border-color:currentColor;padding:.5rem;margin:0;font-size:1rem;line-height:1rem;font-family:inherit;min-width:0}a:not(.jo-ignore):active,a:not(.jo-ignore).active,button:not(.jo-ignore):active,button:not(.jo-ignore).active,.jo-button:active,.jo-button.active,input:active,input.active,textarea:active,textarea.active{border-style:inset}a:not(.jo-ignore):disabled,a:not(.jo-ignore).disabled,button:not(.jo-ignore):disabled,button:not(.jo-ignore).disabled,.jo-button:disabled,.jo-button.disabled,input:disabled,input.disabled,textarea:disabled,textarea.disabled{cursor:not-allowed;border-style:solid;box-shadow:none;opacity:.5}a,button,.jo-button{cursor:pointer}.card{border:1px solid currentColor;border-radius:.5rem}.card .card-header{padding:1rem;border-bottom:1px solid currentColor}.card .card-body,.card .card-footer{padding:1rem}.card .card-table{overflow-x:auto}.card .card-body+.card-table,.card .card-table+.card-body,.card .card-body+.card-body,.card .card-table+.card-table,.card .card-table+.card-footer,.card .card-body+.card-footer{border-top:1px solid currentColor}.card table{width:100%;border-collapse:collapse}.card table>thead{text-align:left}.card table>thead th{border-bottom:1px solid currentColor}.card table>tfoot td{margin-top:1px;border-top:1px solid currentColor}.card table th,.card table td{padding:1rem}.card table tbody tr>td:last-child{text-align:right}.card table tbody tr:nth-child(odd) td{-webkit-backdrop-filter:brightness(85%);backdrop-filter:brightness(85%)}.card table tbody tr:last-child>td:first-child{border-bottom-left-radius:.5rem}.card table tbody tr:last-child>td:last-child{border-bottom-right-radius:.5rem}.card table tbody tr.active td{font-weight:700}.position-relative{position:relative}.d-flex{display:flex}.flex-row{flex-direction:row}.flex-column{flex-direction:column}.align-items-start{align-items:flex-start}.align-items-end{align-items:flex-end}.align-items-center{align-items:center}.align-items-baseline{align-items:baseline}.align-items-stretch{align-items:stretch}.justify-content-start{justify-content:flex-start}.justify-content-end{justify-content:flex-end}.justify-content-center{justify-content:center}.justify-content-between{justify-content:space-between}.justify-content-around{justify-content:space-around}.justify-content-evenly{justify-content:space-evenly}.flex-wrap{flex-wrap:wrap}.flex-1{flex:1}.flex-2{flex:2}.flex-3{flex:3}.flex-4{flex:4}.gap-1{gap:.25rem}.m-1{margin:.25rem}.p-1{padding:.25rem}.mx-1{margin-right:.25rem;margin-left:.25rem}.my-1{margin-top:.25rem;margin-bottom:.25rem}.px-1{padding-right:.25rem;padding-left:.25rem}.py-1{padding-top:.25rem;padding-bottom:.25rem}.ms-1{margin-right:.25rem}.me-1{margin-left:.25rem}.mt-1{margin-top:.25rem}.mb-1{margin-bottom:.25rem}.ps-1{padding-right:.25rem}.pe-1{padding-left:.25rem}.pt-1{padding-top:.25rem}.pb-1{padding-bottom:.25rem}.gap-2{gap:.5rem}.m-2{margin:.5rem}.p-2{padding:.5rem}.mx-2{margin-right:.5rem;margin-left:.5rem}.my-2{margin-top:.5rem;margin-bottom:.5rem}.px-2{padding-right:.5rem;padding-left:.5rem}.py-2{padding-top:.5rem;padding-bottom:.5rem}.ms-2{margin-right:.5rem}.me-2{margin-left:.5rem}.mt-2{margin-top:.5rem}.mb-2{margin-bottom:.5rem}.ps-2{padding-right:.5rem}.pe-2{padding-left:.5rem}.pt-2{padding-top:.5rem}.pb-2{padding-bottom:.5rem}.gap-3{gap:1rem}.m-3{margin:1rem}.p-3{padding:1rem}.mx-3{margin-right:1rem;margin-left:1rem}.my-3{margin-top:1rem;margin-bottom:1rem}.px-3{padding-right:1rem;padding-left:1rem}.py-3{padding-top:1rem;padding-bottom:1rem}.ms-3{margin-right:1rem}.me-3{margin-left:1rem}.mt-3{margin-top:1rem}.mb-3{margin-bottom:1rem}.ps-3{padding-right:1rem}.pe-3{padding-left:1rem}.pt-3{padding-top:1rem}.pb-3{padding-bottom:1rem}.gap-4{gap:1.5rem}.m-4{margin:1.5rem}.p-4{padding:1.5rem}.mx-4{margin-right:1.5rem;margin-left:1.5rem}.my-4{margin-top:1.5rem;margin-bottom:1.5rem}.px-4{padding-right:1.5rem;padding-left:1.5rem}.py-4{padding-top:1.5rem;padding-bottom:1.5rem}.ms-4{margin-right:1.5rem}.me-4{margin-left:1.5rem}.mt-4{margin-top:1.5rem}.mb-4{margin-bottom:1.5rem}.ps-4{padding-right:1.5rem}.pe-4{padding-left:1.5rem}.pt-4{padding-top:1.5rem}.pb-4{padding-bottom:1.5rem}.gap-5{gap:2rem}.m-5{margin:2rem}.p-5{padding:2rem}.mx-5{margin-right:2rem;margin-left:2rem}.my-5{margin-top:2rem;margin-bottom:2rem}.px-5{padding-right:2rem;padding-left:2rem}.py-5{padding-top:2rem;padding-bottom:2rem}.ms-5{margin-right:2rem}.me-5{margin-left:2rem}.mt-5{margin-top:2rem}.mb-5{margin-bottom:2rem}.ps-5{padding-right:2rem}.pe-5{padding-left:2rem}.pt-5{padding-top:2rem}.pb-5{padding-bottom:2rem}.border{border:1px solid currentColor}.br-start{border-top-left-radius:.5rem;border-bottom-left-radius:.5rem}.br-end{border-top-right-radius:.5rem;border-bottom-right-radius:.5rem}.white-space-nowrap{white-space:nowrap}.text-end{text-align:right}.text-start{text-align:left}.text-center{text-align:center}.overflow-auto{overflow:auto}.overflow-hidden{overflow:hidden}label{display:block;padding-bottom:.5rem;font-weight:700}label:empty{display:none}label.required:after{content:\"*\"}ul{list-style:none;margin:0;padding:0}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.MinLengthValidator, selector: "[minlength][formControlName],[minlength][formControl],[minlength][ngModel]", inputs: ["minlength"] }, { kind: "directive", type: i1.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] }); }
|
|
721
1098
|
}
|
|
722
1099
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: TextComponent, decorators: [{
|
|
723
1100
|
type: Component,
|
|
724
|
-
args: [{ selector: 'jo-text', template: "<label\r\n [for]=\"id\"\r\n [class.required]=\"required\"\r\n>\r\n <ng-content></ng-content>\r\n</label>\r\n\r\n<div class=\"d-flex\">\r\n <input\r\n *ngIf=\"!_isGrow\"\r\n type=\"text\"\r\n [(ngModel)]=\"model\"\r\n [class.
|
|
1101
|
+
args: [{ selector: 'jo-text', template: "<label\r\n [for]=\"id\"\r\n [class.required]=\"required\"\r\n>\r\n <ng-content></ng-content>\r\n</label>\r\n\r\n<div class=\"d-flex\">\r\n <input\r\n *ngIf=\"!_isGrow\"\r\n type=\"text\"\r\n [(ngModel)]=\"model\"\r\n [class.br-end]=\"borderRadiusRight\"\r\n [class.br-start]=\"borderRadiusLeft\"\r\n class=\"flex-1\"\r\n [minlength]=\"_minLength\"\r\n [maxlength]=\"_maxLength\"\r\n [class.active]=\"_model !== null\"\r\n [class.invalid]=\"ngControl.control?.invalid\"\r\n [disabled]=\"isDisabled\"\r\n [id]=\"id\"\r\n [spellcheck]=\"isSpellCheck\"\r\n [placeholder]=\"placeholder\"\r\n (blur)=\"onTouched(); onBlur.emit($event)\"\r\n (focus)=\"onFocus.emit($event)\"\r\n />\r\n <textarea\r\n *ngIf=\"_isGrow\"\r\n #textarea\r\n [(ngModel)]=\"model\"\r\n [class.br-end]=\"borderRadiusRight\"\r\n [class.br-start]=\"borderRadiusLeft\"\r\n class=\"flex-1\"\r\n [rows]=\"rows\"\r\n [minlength]=\"_minLength\"\r\n [maxlength]=\"_maxLength\"\r\n [class.active]=\"_model !== null\"\r\n [class.invalid]=\"ngControl.control?.invalid\"\r\n [disabled]=\"isDisabled\"\r\n [id]=\"id\"\r\n [spellcheck]=\"isSpellCheck\"\r\n [placeholder]=\"placeholder\"\r\n (blur)=\"onTouched(); onBlur.emit($event)\"\r\n (focus)=\"onFocus.emit($event)\"\r\n ></textarea>\r\n</div>\r\n\r\n<div\r\n *ngIf=\"_isGrow\"\r\n class=\"d-flex\"\r\n>\r\n <textarea\r\n #textareaHidden\r\n [ngModel]=\"model\"\r\n class=\"hidden flex-1\"\r\n [rows]=\"rows\"\r\n ></textarea>\r\n</div>\r\n\r\n<!-- <ul *ngIf=\"ngControl.control?.errors\">\r\n <li *ngIf=\"ngControl.control?.errors?.['minlength']\">\r\n minimum length is {{minLength}}\r\n </li>\r\n <li *ngIf=\"ngControl.control?.errors?.['maxLength']\">\r\n maximum length is {{maxLength}}\r\n </li>\r\n</ul> -->", styles: [":host{display:block}textarea{font-family:inherit;cursor:text;overflow:hidden;resize:none;width:100%}textarea.hidden{padding:0;position:absolute;visibility:hidden;transition:none}input[type=text]{font-family:inherit;width:100%}\n", "body{font-family:Arial;margin:0}h1,h2,h3,h4,h5,h6{margin:0}a:not(.jo-ignore),button:not(.jo-ignore),.jo-button,input,textarea{color:inherit;background:transparent;border-width:.15rem;border-style:outset;border-color:currentColor;padding:.5rem;margin:0;font-size:1rem;line-height:1rem;font-family:inherit;min-width:0}a:not(.jo-ignore):active,a:not(.jo-ignore).active,button:not(.jo-ignore):active,button:not(.jo-ignore).active,.jo-button:active,.jo-button.active,input:active,input.active,textarea:active,textarea.active{border-style:inset}a:not(.jo-ignore):disabled,a:not(.jo-ignore).disabled,button:not(.jo-ignore):disabled,button:not(.jo-ignore).disabled,.jo-button:disabled,.jo-button.disabled,input:disabled,input.disabled,textarea:disabled,textarea.disabled{cursor:not-allowed;border-style:solid;box-shadow:none;opacity:.5}a,button,.jo-button{cursor:pointer}.card{border:1px solid currentColor;border-radius:.5rem}.card .card-header{padding:1rem;border-bottom:1px solid currentColor}.card .card-body,.card .card-footer{padding:1rem}.card .card-table{overflow-x:auto}.card .card-body+.card-table,.card .card-table+.card-body,.card .card-body+.card-body,.card .card-table+.card-table,.card .card-table+.card-footer,.card .card-body+.card-footer{border-top:1px solid currentColor}.card table{width:100%;border-collapse:collapse}.card table>thead{text-align:left}.card table>thead th{border-bottom:1px solid currentColor}.card table>tfoot td{margin-top:1px;border-top:1px solid currentColor}.card table th,.card table td{padding:1rem}.card table tbody tr>td:last-child{text-align:right}.card table tbody tr:nth-child(odd) td{-webkit-backdrop-filter:brightness(85%);backdrop-filter:brightness(85%)}.card table tbody tr:last-child>td:first-child{border-bottom-left-radius:.5rem}.card table tbody tr:last-child>td:last-child{border-bottom-right-radius:.5rem}.card table tbody tr.active td{font-weight:700}.position-relative{position:relative}.d-flex{display:flex}.flex-row{flex-direction:row}.flex-column{flex-direction:column}.align-items-start{align-items:flex-start}.align-items-end{align-items:flex-end}.align-items-center{align-items:center}.align-items-baseline{align-items:baseline}.align-items-stretch{align-items:stretch}.justify-content-start{justify-content:flex-start}.justify-content-end{justify-content:flex-end}.justify-content-center{justify-content:center}.justify-content-between{justify-content:space-between}.justify-content-around{justify-content:space-around}.justify-content-evenly{justify-content:space-evenly}.flex-wrap{flex-wrap:wrap}.flex-1{flex:1}.flex-2{flex:2}.flex-3{flex:3}.flex-4{flex:4}.gap-1{gap:.25rem}.m-1{margin:.25rem}.p-1{padding:.25rem}.mx-1{margin-right:.25rem;margin-left:.25rem}.my-1{margin-top:.25rem;margin-bottom:.25rem}.px-1{padding-right:.25rem;padding-left:.25rem}.py-1{padding-top:.25rem;padding-bottom:.25rem}.ms-1{margin-right:.25rem}.me-1{margin-left:.25rem}.mt-1{margin-top:.25rem}.mb-1{margin-bottom:.25rem}.ps-1{padding-right:.25rem}.pe-1{padding-left:.25rem}.pt-1{padding-top:.25rem}.pb-1{padding-bottom:.25rem}.gap-2{gap:.5rem}.m-2{margin:.5rem}.p-2{padding:.5rem}.mx-2{margin-right:.5rem;margin-left:.5rem}.my-2{margin-top:.5rem;margin-bottom:.5rem}.px-2{padding-right:.5rem;padding-left:.5rem}.py-2{padding-top:.5rem;padding-bottom:.5rem}.ms-2{margin-right:.5rem}.me-2{margin-left:.5rem}.mt-2{margin-top:.5rem}.mb-2{margin-bottom:.5rem}.ps-2{padding-right:.5rem}.pe-2{padding-left:.5rem}.pt-2{padding-top:.5rem}.pb-2{padding-bottom:.5rem}.gap-3{gap:1rem}.m-3{margin:1rem}.p-3{padding:1rem}.mx-3{margin-right:1rem;margin-left:1rem}.my-3{margin-top:1rem;margin-bottom:1rem}.px-3{padding-right:1rem;padding-left:1rem}.py-3{padding-top:1rem;padding-bottom:1rem}.ms-3{margin-right:1rem}.me-3{margin-left:1rem}.mt-3{margin-top:1rem}.mb-3{margin-bottom:1rem}.ps-3{padding-right:1rem}.pe-3{padding-left:1rem}.pt-3{padding-top:1rem}.pb-3{padding-bottom:1rem}.gap-4{gap:1.5rem}.m-4{margin:1.5rem}.p-4{padding:1.5rem}.mx-4{margin-right:1.5rem;margin-left:1.5rem}.my-4{margin-top:1.5rem;margin-bottom:1.5rem}.px-4{padding-right:1.5rem;padding-left:1.5rem}.py-4{padding-top:1.5rem;padding-bottom:1.5rem}.ms-4{margin-right:1.5rem}.me-4{margin-left:1.5rem}.mt-4{margin-top:1.5rem}.mb-4{margin-bottom:1.5rem}.ps-4{padding-right:1.5rem}.pe-4{padding-left:1.5rem}.pt-4{padding-top:1.5rem}.pb-4{padding-bottom:1.5rem}.gap-5{gap:2rem}.m-5{margin:2rem}.p-5{padding:2rem}.mx-5{margin-right:2rem;margin-left:2rem}.my-5{margin-top:2rem;margin-bottom:2rem}.px-5{padding-right:2rem;padding-left:2rem}.py-5{padding-top:2rem;padding-bottom:2rem}.ms-5{margin-right:2rem}.me-5{margin-left:2rem}.mt-5{margin-top:2rem}.mb-5{margin-bottom:2rem}.ps-5{padding-right:2rem}.pe-5{padding-left:2rem}.pt-5{padding-top:2rem}.pb-5{padding-bottom:2rem}.border{border:1px solid currentColor}.br-start{border-top-left-radius:.5rem;border-bottom-left-radius:.5rem}.br-end{border-top-right-radius:.5rem;border-bottom-right-radius:.5rem}.white-space-nowrap{white-space:nowrap}.text-end{text-align:right}.text-start{text-align:left}.text-center{text-align:center}.overflow-auto{overflow:auto}.overflow-hidden{overflow:hidden}label{display:block;padding-bottom:.5rem;font-weight:700}label:empty{display:none}label.required:after{content:\"*\"}ul{list-style:none;margin:0;padding:0}\n"] }]
|
|
725
1102
|
}], ctorParameters: () => [{ type: i1.NgControl, decorators: [{
|
|
726
1103
|
type: Self
|
|
727
1104
|
}] }, { type: i0.Renderer2 }], propDecorators: { placeholder: [{
|
|
@@ -751,68 +1128,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.5", ngImpor
|
|
|
751
1128
|
args: ['window:resize']
|
|
752
1129
|
}] } });
|
|
753
1130
|
|
|
754
|
-
class SelectComponent extends ItemDirective {
|
|
755
|
-
set searchTerm(value) {
|
|
756
|
-
this._searchTerm = value;
|
|
757
|
-
}
|
|
758
|
-
get showDropdown() {
|
|
759
|
-
return this._showDropdown;
|
|
760
|
-
}
|
|
761
|
-
set showDropdown(value) {
|
|
762
|
-
this._showDropdown = value;
|
|
763
|
-
if (this._showDropdown === false)
|
|
764
|
-
return;
|
|
765
|
-
const hostBoundingRect = this.hostElement.nativeElement.getBoundingClientRect();
|
|
766
|
-
this.isDropdownCloseToBottom = window.innerHeight < hostBoundingRect.bottom + parseInt(this.dropdownMaxHeight, 10);
|
|
767
|
-
}
|
|
768
|
-
constructor(ngControl, hostElement) {
|
|
769
|
-
super(ngControl);
|
|
770
|
-
this.ngControl = ngControl;
|
|
771
|
-
this.hostElement = hostElement;
|
|
772
|
-
this.dropdownMaxHeight = '200px';
|
|
773
|
-
this._searchTerm = '';
|
|
774
|
-
this._showDropdown = false;
|
|
775
|
-
this.isDropdownCloseToBottom = false;
|
|
776
|
-
}
|
|
777
|
-
onGlobalClick(event) {
|
|
778
|
-
if (!this.hostElement.nativeElement.contains(event.target))
|
|
779
|
-
this._showDropdown = false;
|
|
780
|
-
}
|
|
781
|
-
onClickSearch() {
|
|
782
|
-
this.showDropdown = !this.showDropdown;
|
|
783
|
-
}
|
|
784
|
-
onFocusSearch() {
|
|
785
|
-
this.showDropdown = !this.showDropdown;
|
|
786
|
-
}
|
|
787
|
-
onClick(item) {
|
|
788
|
-
this._model = this._model.filter(key => this._items.map(item => item.key).includes(key));
|
|
789
|
-
if (this._model.includes(item.key)) {
|
|
790
|
-
if (this.required === true && this._model.length === 1)
|
|
791
|
-
return;
|
|
792
|
-
this.model = this._model.filter(key => key !== item.key);
|
|
793
|
-
return;
|
|
794
|
-
}
|
|
795
|
-
if (!this.isMultiple && this._model.length === 1) {
|
|
796
|
-
this.model = [item.key];
|
|
797
|
-
return;
|
|
798
|
-
}
|
|
799
|
-
this.model = [...this._model, item.key];
|
|
800
|
-
}
|
|
801
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: SelectComponent, deps: [{ token: i1.NgControl, self: true }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
802
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.5", type: SelectComponent, selector: "jo-select", inputs: { dropdownMaxHeight: "dropdownMaxHeight" }, host: { listeners: { "document:mousedown": "onGlobalClick($event)" } }, usesInheritance: true, ngImport: i0, template: "<label>\r\n <ng-content></ng-content>\r\n</label>\r\n\r\n<div class=\"d-flex align-items-stretch\">\r\n <jo-text\r\n [borderRadiusLeft]=\"borderRadiusLeft\"\r\n [borderRadiusRight]=\"false\"\r\n [(ngModel)]=\"searchTerm\"\r\n [isGrow]=\"false\"\r\n class=\"flex-1\"\r\n (onFocus)=\"onFocusSearch()\"\r\n ></jo-text>\r\n <button\r\n class=\"d-flex\"\r\n [disabled]=\"isDisabled\"\r\n (click)=\"onClickSearch()\"\r\n >\r\n <icon\r\n size=\"1em\"\r\n type=\"chevron\"\r\n [fill]=\"[null, 'current']\"\r\n fillRotate=\"90\"\r\n [stroke]=\"['current']\"\r\n ></icon>\r\n </button>\r\n</div>\r\n\r\n<div\r\n class=\"drop {{isDropdownCloseToBottom ? 'up' : 'down'}}\"\r\n [hidden]=\"!showDropdown\"\r\n [style.max-height]=\"dropdownMaxHeight\"\r\n>\r\n <!-- <jo-button *ngIf=\"items.length === 0\">\r\n No Results\r\n </jo-button> -->\r\n <button\r\n *ngFor=\"let item of items; let idx = index\"\r\n class=\"d-flex\"\r\n [class.active]=\"_model.includes(item.key)\"\r\n [disabled]=\"isDisabled\"\r\n [class.invalid]=\"!ngControl.control?.invalid\"\r\n [class.border-radius-right]=\"borderRadiusRight && idx === items.length - 1\"\r\n [class.border-radius-left]=\"borderRadiusLeft && idx === 0\"\r\n (click)=\"onClick(item)\"\r\n (blur)=\"onTouched()\"\r\n >\r\n <icon-stack\r\n class=\"margin-right-1\"\r\n size=\"1em\"\r\n >\r\n <icon [type]=\"isMultiple ? 'squircle' : 'circle'\"></icon>\r\n <icon\r\n *ngIf=\"_model.includes(item.key)\"\r\n [type]=\"isMultiple ? 'check' : 'dot'\"\r\n [fill]=\"[null, 'current']\"\r\n fillRotate=\"90\"\r\n ></icon>\r\n </icon-stack>\r\n {{item.value}}\r\n </button>\r\n</div>", styles: [":host{position:relative;display:block}.drop{max-height:200px;overflow-y:auto}.drop.down{top:100%}.drop.up{bottom:100%}icon[type=chevron]{transform:rotate(180deg)}\n", "label{display:block;padding-bottom:.5em;font-weight:700}label:empty{display:none}label.required:after{content:\"*\"}ul{list-style:none;margin:0;padding:0}ul>li{padding-top:.25em}a:not(.jo-ignore),button:not(.jo-ignore),.button,input,textarea{color:inherit;background:transparent;border-width:.15em;border-style:outset;border-color:currentColor;padding:.5em;margin:0;font-size:1em;line-height:1em}a:not(.jo-ignore):active,a:not(.jo-ignore).active,button:not(.jo-ignore):active,button:not(.jo-ignore).active,.button:active,.button.active,input:active,input.active,textarea:active,textarea.active{border-style:inset}a:not(.jo-ignore):disabled,a:not(.jo-ignore).disabled,button:not(.jo-ignore):disabled,button:not(.jo-ignore).disabled,.button:disabled,.button.disabled,input:disabled,input.disabled,textarea:disabled,textarea.disabled{cursor:not-allowed;border-style:solid;box-shadow:none;opacity:.5}a,button,.button{cursor:pointer}@keyframes invalid-border{0%,to{border-style:inset}50%{border-style:outset}}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i3.IconComponent, selector: "icon[type]", inputs: ["type", "fill", "fillRotate", "fillOpacity", "stroke", "strokeRotate", "spin"] }, { kind: "component", type: i3.IconStackComponent, selector: "icon-stack" }, { kind: "component", type: TextComponent, selector: "jo-text", inputs: ["placeholder", "minLength", "maxLength", "isSpellCheck", "isGrow", "rows"], outputs: ["onBlur", "onFocus"] }] }); }
|
|
803
|
-
}
|
|
804
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: SelectComponent, decorators: [{
|
|
805
|
-
type: Component,
|
|
806
|
-
args: [{ selector: 'jo-select', template: "<label>\r\n <ng-content></ng-content>\r\n</label>\r\n\r\n<div class=\"d-flex align-items-stretch\">\r\n <jo-text\r\n [borderRadiusLeft]=\"borderRadiusLeft\"\r\n [borderRadiusRight]=\"false\"\r\n [(ngModel)]=\"searchTerm\"\r\n [isGrow]=\"false\"\r\n class=\"flex-1\"\r\n (onFocus)=\"onFocusSearch()\"\r\n ></jo-text>\r\n <button\r\n class=\"d-flex\"\r\n [disabled]=\"isDisabled\"\r\n (click)=\"onClickSearch()\"\r\n >\r\n <icon\r\n size=\"1em\"\r\n type=\"chevron\"\r\n [fill]=\"[null, 'current']\"\r\n fillRotate=\"90\"\r\n [stroke]=\"['current']\"\r\n ></icon>\r\n </button>\r\n</div>\r\n\r\n<div\r\n class=\"drop {{isDropdownCloseToBottom ? 'up' : 'down'}}\"\r\n [hidden]=\"!showDropdown\"\r\n [style.max-height]=\"dropdownMaxHeight\"\r\n>\r\n <!-- <jo-button *ngIf=\"items.length === 0\">\r\n No Results\r\n </jo-button> -->\r\n <button\r\n *ngFor=\"let item of items; let idx = index\"\r\n class=\"d-flex\"\r\n [class.active]=\"_model.includes(item.key)\"\r\n [disabled]=\"isDisabled\"\r\n [class.invalid]=\"!ngControl.control?.invalid\"\r\n [class.border-radius-right]=\"borderRadiusRight && idx === items.length - 1\"\r\n [class.border-radius-left]=\"borderRadiusLeft && idx === 0\"\r\n (click)=\"onClick(item)\"\r\n (blur)=\"onTouched()\"\r\n >\r\n <icon-stack\r\n class=\"margin-right-1\"\r\n size=\"1em\"\r\n >\r\n <icon [type]=\"isMultiple ? 'squircle' : 'circle'\"></icon>\r\n <icon\r\n *ngIf=\"_model.includes(item.key)\"\r\n [type]=\"isMultiple ? 'check' : 'dot'\"\r\n [fill]=\"[null, 'current']\"\r\n fillRotate=\"90\"\r\n ></icon>\r\n </icon-stack>\r\n {{item.value}}\r\n </button>\r\n</div>", styles: [":host{position:relative;display:block}.drop{max-height:200px;overflow-y:auto}.drop.down{top:100%}.drop.up{bottom:100%}icon[type=chevron]{transform:rotate(180deg)}\n", "label{display:block;padding-bottom:.5em;font-weight:700}label:empty{display:none}label.required:after{content:\"*\"}ul{list-style:none;margin:0;padding:0}ul>li{padding-top:.25em}a:not(.jo-ignore),button:not(.jo-ignore),.button,input,textarea{color:inherit;background:transparent;border-width:.15em;border-style:outset;border-color:currentColor;padding:.5em;margin:0;font-size:1em;line-height:1em}a:not(.jo-ignore):active,a:not(.jo-ignore).active,button:not(.jo-ignore):active,button:not(.jo-ignore).active,.button:active,.button.active,input:active,input.active,textarea:active,textarea.active{border-style:inset}a:not(.jo-ignore):disabled,a:not(.jo-ignore).disabled,button:not(.jo-ignore):disabled,button:not(.jo-ignore).disabled,.button:disabled,.button.disabled,input:disabled,input.disabled,textarea:disabled,textarea.disabled{cursor:not-allowed;border-style:solid;box-shadow:none;opacity:.5}a,button,.button{cursor:pointer}@keyframes invalid-border{0%,to{border-style:inset}50%{border-style:outset}}\n"] }]
|
|
807
|
-
}], ctorParameters: () => [{ type: i1.NgControl, decorators: [{
|
|
808
|
-
type: Self
|
|
809
|
-
}] }, { type: i0.ElementRef }], propDecorators: { dropdownMaxHeight: [{
|
|
810
|
-
type: Input
|
|
811
|
-
}], onGlobalClick: [{
|
|
812
|
-
type: HostListener,
|
|
813
|
-
args: ['document:mousedown', ['$event']]
|
|
814
|
-
}] } });
|
|
815
|
-
|
|
816
1131
|
class ChaosControlModule {
|
|
817
1132
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: ChaosControlModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
|
|
818
1133
|
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.0.5", ngImport: i0, type: ChaosControlModule, declarations: [ReadonlyComponent,
|
|
@@ -824,19 +1139,24 @@ class ChaosControlModule {
|
|
|
824
1139
|
ControlDirective,
|
|
825
1140
|
ItemDirective,
|
|
826
1141
|
SelectComponent,
|
|
827
|
-
BorderRadiusDirective
|
|
1142
|
+
BorderRadiusDirective,
|
|
1143
|
+
BusyDirective,
|
|
1144
|
+
IconComponent,
|
|
1145
|
+
IconStackComponent,
|
|
1146
|
+
SizeDirective], imports: [CommonModule,
|
|
828
1147
|
FormsModule,
|
|
829
|
-
IconModule,
|
|
830
1148
|
RouterModule], exports: [ReadonlyComponent,
|
|
831
1149
|
ChoiceComponent,
|
|
832
1150
|
ColorComponent,
|
|
833
1151
|
FileComponent,
|
|
834
1152
|
NumberComponent,
|
|
835
1153
|
TextComponent,
|
|
836
|
-
SelectComponent
|
|
1154
|
+
SelectComponent,
|
|
1155
|
+
BusyDirective,
|
|
1156
|
+
IconComponent,
|
|
1157
|
+
IconStackComponent] }); }
|
|
837
1158
|
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: ChaosControlModule, imports: [CommonModule,
|
|
838
1159
|
FormsModule,
|
|
839
|
-
IconModule,
|
|
840
1160
|
RouterModule] }); }
|
|
841
1161
|
}
|
|
842
1162
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: ChaosControlModule, decorators: [{
|
|
@@ -853,11 +1173,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.5", ngImpor
|
|
|
853
1173
|
ItemDirective,
|
|
854
1174
|
SelectComponent,
|
|
855
1175
|
BorderRadiusDirective,
|
|
1176
|
+
BusyDirective,
|
|
1177
|
+
IconComponent,
|
|
1178
|
+
IconStackComponent,
|
|
1179
|
+
SizeDirective,
|
|
856
1180
|
],
|
|
857
1181
|
imports: [
|
|
858
1182
|
CommonModule,
|
|
859
1183
|
FormsModule,
|
|
860
|
-
IconModule,
|
|
861
1184
|
RouterModule,
|
|
862
1185
|
],
|
|
863
1186
|
exports: [
|
|
@@ -868,6 +1191,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.5", ngImpor
|
|
|
868
1191
|
NumberComponent,
|
|
869
1192
|
TextComponent,
|
|
870
1193
|
SelectComponent,
|
|
1194
|
+
BusyDirective,
|
|
1195
|
+
IconComponent,
|
|
1196
|
+
IconStackComponent,
|
|
871
1197
|
]
|
|
872
1198
|
}]
|
|
873
1199
|
}] });
|
|
@@ -890,5 +1216,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.5", ngImpor
|
|
|
890
1216
|
* Generated bundle index. Do not edit.
|
|
891
1217
|
*/
|
|
892
1218
|
|
|
893
|
-
export { ChaosControlModule, ChaosControlService, ChoiceComponent, ColorComponent, FileComponent, NumberComponent, ReadonlyComponent, SelectComponent, TextComponent, isItem, isItems, isNumber, isPrimitive };
|
|
1219
|
+
export { BorderRadiusDirective, BusyComponent, BusyDirective, ChaosControlModule, ChaosControlService, ChoiceComponent, ColorComponent, ControlDirective, FileComponent, IconComponent, IconStackComponent, ItemDirective, NumberComponent, ReadonlyComponent, SelectComponent, SizeDirective, TextComponent, iconTypes, isItem, isItems, isNumber, isPrimitive };
|
|
894
1220
|
//# sourceMappingURL=joster-dev-chaos-control.mjs.map
|