@joster-dev/chaos-control 0.2.0 → 0.3.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/README.md +86 -86
- package/fesm2022/joster-dev-chaos-control.mjs +380 -742
- package/fesm2022/joster-dev-chaos-control.mjs.map +1 -1
- package/{lib/LICENSE → lib} +9 -9
- package/package.json +6 -7
- package/src/lib/scss/all.scss +7 -0
- package/src/lib/scss/card.scss +78 -0
- package/src/lib/scss/control.scss +49 -0
- package/src/lib/scss/reboot.scss +13 -0
- package/src/lib/scss/utility.scss +179 -0
- package/src/lib/scss/variables.scss +7 -0
- package/src/lib/styles.scss +28 -28
- package/types/joster-dev-chaos-control.d.ts +243 -0
- package/esm2022/joster-dev-chaos-control.mjs +0 -5
- package/esm2022/lib/chaos-control.module.mjs +0 -77
- package/esm2022/lib/chaos-control.service.mjs +0 -14
- package/esm2022/lib/components/busy/busy.component.mjs +0 -11
- package/esm2022/lib/components/choice/choice.component.mjs +0 -53
- package/esm2022/lib/components/color/color.component.mjs +0 -78
- package/esm2022/lib/components/file/file.component.mjs +0 -135
- package/esm2022/lib/components/icon/icon.component.mjs +0 -117
- package/esm2022/lib/components/icon-stack/icon-stack.component.mjs +0 -29
- package/esm2022/lib/components/index.mjs +0 -11
- package/esm2022/lib/components/number/number.component.mjs +0 -135
- package/esm2022/lib/components/readonly/readonly.component.mjs +0 -14
- package/esm2022/lib/components/select/select.component.mjs +0 -99
- package/esm2022/lib/components/text/text.component.mjs +0 -162
- package/esm2022/lib/directives/border-radius.directive.mjs +0 -41
- package/esm2022/lib/directives/busy.directive.mjs +0 -71
- package/esm2022/lib/directives/control.directive.mjs +0 -46
- package/esm2022/lib/directives/index.mjs +0 -6
- package/esm2022/lib/directives/item.directive.mjs +0 -117
- package/esm2022/lib/directives/size.directive.mjs +0 -38
- package/esm2022/lib/models/icon-types.const.mjs +0 -33
- package/esm2022/lib/models/icon.type.mjs +0 -2
- package/esm2022/lib/models/index.mjs +0 -9
- package/esm2022/lib/models/is-item.function.mjs +0 -8
- package/esm2022/lib/models/is-items.function.mjs +0 -5
- package/esm2022/lib/models/is-number.function.mjs +0 -5
- package/esm2022/lib/models/is-primitive.function.mjs +0 -7
- package/esm2022/lib/models/item.interface.mjs +0 -2
- package/esm2022/lib/models/primitive.type.mjs +0 -2
- package/esm2022/public-api.mjs +0 -7
- package/index.d.ts +0 -5
- package/lib/chaos-control.module.d.ts +0 -23
- package/lib/chaos-control.service.d.ts +0 -6
- package/lib/components/busy/busy.component.d.ts +0 -5
- package/lib/components/choice/choice.component.d.ts +0 -15
- package/lib/components/color/color.component.d.ts +0 -22
- package/lib/components/file/file.component.d.ts +0 -32
- package/lib/components/icon/icon.component.d.ts +0 -31
- package/lib/components/icon-stack/icon-stack.component.d.ts +0 -9
- package/lib/components/index.d.ts +0 -10
- package/lib/components/number/number.component.d.ts +0 -33
- package/lib/components/readonly/readonly.component.d.ts +0 -8
- package/lib/components/select/select.component.d.ts +0 -28
- package/lib/components/text/text.component.d.ts +0 -41
- package/lib/directives/border-radius.directive.d.ts +0 -12
- package/lib/directives/busy.directive.d.ts +0 -20
- package/lib/directives/control.directive.d.ts +0 -18
- package/lib/directives/index.d.ts +0 -5
- package/lib/directives/item.directive.d.ts +0 -36
- package/lib/directives/size.directive.d.ts +0 -12
- package/lib/models/icon-types.const.d.ts +0 -1
- package/lib/models/icon.type.d.ts +0 -2
- package/lib/models/index.d.ts +0 -8
- package/lib/models/is-item.function.d.ts +0 -2
- package/lib/models/is-items.function.d.ts +0 -2
- package/lib/models/is-number.function.d.ts +0 -1
- package/lib/models/is-primitive.function.d.ts +0 -2
- package/lib/models/item.interface.d.ts +0 -6
- package/lib/models/primitive.type.d.ts +0 -1
- package/public-api.d.ts +0 -5
|
@@ -1,66 +1,42 @@
|
|
|
1
|
-
import
|
|
2
|
-
|
|
1
|
+
import { IconComponent, IconStackComponent } from '@joster-dev/icon';
|
|
2
|
+
export { IconComponent, IconStackComponent, iconTypes } from '@joster-dev/icon';
|
|
3
3
|
import * as i0 from '@angular/core';
|
|
4
|
-
import { Component, Directive, Input,
|
|
5
|
-
import * as i1 from '@angular/forms';
|
|
6
|
-
import { Validators, FormsModule } from '@angular/forms';
|
|
7
|
-
import { RouterModule } from '@angular/router';
|
|
4
|
+
import { ChangeDetectionStrategy, Component, input, booleanAttribute, Directive, inject, ElementRef, ViewContainerRef, Renderer2, Input, signal, effect, computed, viewChild, numberAttribute, HostListener, output, NgModule, Injectable } from '@angular/core';
|
|
8
5
|
import { Subject, from, interval, map, filter, take, takeUntil } from 'rxjs';
|
|
6
|
+
import * as i1 from '@angular/forms';
|
|
7
|
+
import { NgControl, Validators, FormsModule } from '@angular/forms';
|
|
8
|
+
import { NgTemplateOutlet } from '@angular/common';
|
|
9
9
|
import { debounceTime } from 'rxjs/operators';
|
|
10
10
|
|
|
11
11
|
class BusyComponent {
|
|
12
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
13
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "
|
|
12
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: BusyComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
13
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.2", type: BusyComponent, isStandalone: true, selector: "jo-busy", ngImport: i0, template: "<!-- <div class=\"spinner spinner-1\"></div> -->\n<div class=\"spinner big\"></div>\n<div class=\"spinner small\"></div>\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;-webkit-mask:linear-gradient(#fff 0 0) padding-box,linear-gradient(#fff 0 0);mask:linear-gradient(#fff 0 0) padding-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;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"], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
|
|
14
14
|
}
|
|
15
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
15
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: BusyComponent, decorators: [{
|
|
16
16
|
type: Component,
|
|
17
|
-
args: [{ selector: 'jo-busy', template: "<!-- <div class=\"spinner spinner-1\"></div> -->\
|
|
17
|
+
args: [{ selector: 'jo-busy', changeDetection: ChangeDetectionStrategy.Eager, template: "<!-- <div class=\"spinner spinner-1\"></div> -->\n<div class=\"spinner big\"></div>\n<div class=\"spinner small\"></div>\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;-webkit-mask:linear-gradient(#fff 0 0) padding-box,linear-gradient(#fff 0 0);mask:linear-gradient(#fff 0 0) padding-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;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
18
|
}] });
|
|
19
19
|
|
|
20
20
|
class BorderRadiusDirective {
|
|
21
|
-
get borderRadiusRight() {
|
|
22
|
-
return this._borderRadiusRight;
|
|
23
|
-
}
|
|
24
|
-
set borderRadiusRight(value) {
|
|
25
|
-
if (value === '')
|
|
26
|
-
value = true;
|
|
27
|
-
if (value == null)
|
|
28
|
-
value = false;
|
|
29
|
-
this._borderRadiusRight = value;
|
|
30
|
-
}
|
|
31
|
-
get borderRadiusLeft() {
|
|
32
|
-
return this._borderRadiusLeft;
|
|
33
|
-
}
|
|
34
|
-
set borderRadiusLeft(value) {
|
|
35
|
-
if (value === '')
|
|
36
|
-
value = true;
|
|
37
|
-
if (value == null)
|
|
38
|
-
value = false;
|
|
39
|
-
this._borderRadiusLeft = value;
|
|
40
|
-
}
|
|
41
21
|
constructor() {
|
|
42
|
-
this.
|
|
43
|
-
this.
|
|
22
|
+
this.borderRadiusRight = input(true, { ...(ngDevMode ? { debugName: "borderRadiusRight" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
23
|
+
this.borderRadiusLeft = input(true, { ...(ngDevMode ? { debugName: "borderRadiusLeft" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
44
24
|
}
|
|
45
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
46
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "
|
|
25
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: BorderRadiusDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
26
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.2", type: BorderRadiusDirective, isStandalone: true, selector: "[joBorderRadius]", inputs: { borderRadiusRight: { classPropertyName: "borderRadiusRight", publicName: "borderRadiusRight", isSignal: true, isRequired: false, transformFunction: null }, borderRadiusLeft: { classPropertyName: "borderRadiusLeft", publicName: "borderRadiusLeft", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 }); }
|
|
47
27
|
}
|
|
48
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
28
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: BorderRadiusDirective, decorators: [{
|
|
49
29
|
type: Directive,
|
|
50
30
|
args: [{
|
|
51
31
|
selector: '[joBorderRadius]'
|
|
52
32
|
}]
|
|
53
|
-
}],
|
|
54
|
-
type: Input
|
|
55
|
-
}], borderRadiusLeft: [{
|
|
56
|
-
type: Input
|
|
57
|
-
}] } });
|
|
33
|
+
}], propDecorators: { borderRadiusRight: [{ type: i0.Input, args: [{ isSignal: true, alias: "borderRadiusRight", required: false }] }], borderRadiusLeft: [{ type: i0.Input, args: [{ isSignal: true, alias: "borderRadiusLeft", required: false }] }] } });
|
|
58
34
|
|
|
59
35
|
class BusyDirective {
|
|
60
|
-
constructor(
|
|
61
|
-
this.element =
|
|
62
|
-
this.viewContainerRef =
|
|
63
|
-
this.renderer =
|
|
36
|
+
constructor() {
|
|
37
|
+
this.element = inject(ElementRef);
|
|
38
|
+
this.viewContainerRef = inject(ViewContainerRef);
|
|
39
|
+
this.renderer = inject(Renderer2);
|
|
64
40
|
this.host = this.element.nativeElement;
|
|
65
41
|
this.endSubscription$ = new Subject();
|
|
66
42
|
}
|
|
@@ -110,93 +86,42 @@ class BusyDirective {
|
|
|
110
86
|
this.renderer.removeClass(this.host, 'position-relative');
|
|
111
87
|
this.renderer.removeClass(this.host, 'overflow-hidden');
|
|
112
88
|
}
|
|
113
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
114
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "
|
|
89
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: BusyDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
90
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.2", type: BusyDirective, isStandalone: true, selector: "[joBusy]", inputs: { asyncEvents: ["joBusy", "asyncEvents"] }, usesOnChanges: true, ngImport: i0 }); }
|
|
115
91
|
}
|
|
116
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
92
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: BusyDirective, decorators: [{
|
|
117
93
|
type: Directive,
|
|
118
94
|
args: [{
|
|
119
95
|
selector: '[joBusy]'
|
|
120
96
|
}]
|
|
121
|
-
}],
|
|
97
|
+
}], propDecorators: { asyncEvents: [{
|
|
122
98
|
type: Input,
|
|
123
99
|
args: ['joBusy']
|
|
124
100
|
}] } });
|
|
125
101
|
|
|
126
102
|
class ControlDirective extends BorderRadiusDirective {
|
|
127
|
-
get required() {
|
|
128
|
-
return this._required;
|
|
129
|
-
}
|
|
130
|
-
set required(value) {
|
|
131
|
-
if (value === '')
|
|
132
|
-
value = true;
|
|
133
|
-
if (value == null)
|
|
134
|
-
value = false;
|
|
135
|
-
if (typeof value !== 'boolean')
|
|
136
|
-
throw new Error('required input must be: boolean');
|
|
137
|
-
this._required = value;
|
|
138
|
-
this.validation.next();
|
|
139
|
-
}
|
|
140
103
|
constructor() {
|
|
141
|
-
super();
|
|
142
|
-
this.
|
|
143
|
-
this.isDisabled = false
|
|
144
|
-
|
|
145
|
-
}
|
|
146
|
-
ngOnDestroy() {
|
|
147
|
-
this.validation.complete();
|
|
104
|
+
super(...arguments);
|
|
105
|
+
this.required = input(false, { ...(ngDevMode ? { debugName: "required" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
106
|
+
this.isDisabled = signal(false, /* @ts-ignore */
|
|
107
|
+
...(ngDevMode ? [{ debugName: "isDisabled" }] : /* istanbul ignore next */ []));
|
|
148
108
|
}
|
|
149
109
|
onTouched() { }
|
|
150
110
|
registerOnTouched(fn) {
|
|
151
111
|
this.onTouched = fn;
|
|
152
112
|
}
|
|
153
113
|
setDisabledState(isDisabled) {
|
|
154
|
-
this.isDisabled
|
|
114
|
+
this.isDisabled.set(isDisabled);
|
|
155
115
|
}
|
|
156
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
157
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "
|
|
116
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: ControlDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
|
|
117
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.2", type: ControlDirective, isStandalone: true, selector: "[joControl]", inputs: { required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0 }); }
|
|
158
118
|
}
|
|
159
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
119
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: ControlDirective, decorators: [{
|
|
160
120
|
type: Directive,
|
|
161
121
|
args: [{
|
|
162
122
|
selector: '[joControl]'
|
|
163
123
|
}]
|
|
164
|
-
}],
|
|
165
|
-
type: Input
|
|
166
|
-
}] } });
|
|
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
|
-
];
|
|
124
|
+
}], propDecorators: { required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }] } });
|
|
200
125
|
|
|
201
126
|
function isNumber(value) {
|
|
202
127
|
return typeof value === 'number'
|
|
@@ -220,60 +145,45 @@ function isItems(value) {
|
|
|
220
145
|
return Array.isArray(value) && value.every(item => isItem(item));
|
|
221
146
|
}
|
|
222
147
|
|
|
148
|
+
function toItems(value) {
|
|
149
|
+
if (!isItems(value))
|
|
150
|
+
throw new Error('[items] expects: { key: boolean | number | string, value: string }[]');
|
|
151
|
+
return value;
|
|
152
|
+
}
|
|
153
|
+
function toLimit(value) {
|
|
154
|
+
if (value == null)
|
|
155
|
+
value = 0;
|
|
156
|
+
if (!isNumber(value) || value < 0 || !Number.isInteger(value))
|
|
157
|
+
throw new Error('limit expects: positive integer');
|
|
158
|
+
return value;
|
|
159
|
+
}
|
|
223
160
|
class ItemDirective extends ControlDirective {
|
|
224
|
-
|
|
225
|
-
|
|
226
|
-
|
|
227
|
-
|
|
228
|
-
|
|
229
|
-
|
|
230
|
-
this.
|
|
231
|
-
|
|
232
|
-
this.
|
|
233
|
-
|
|
234
|
-
|
|
235
|
-
|
|
236
|
-
|
|
237
|
-
|
|
238
|
-
|
|
239
|
-
|
|
240
|
-
|
|
241
|
-
|
|
242
|
-
this._limit = value;
|
|
243
|
-
this.validation.next();
|
|
244
|
-
}
|
|
245
|
-
get isMultiple() {
|
|
246
|
-
return this._isMultiple;
|
|
247
|
-
}
|
|
248
|
-
set isMultiple(value) {
|
|
249
|
-
if (value === '')
|
|
250
|
-
value = true;
|
|
251
|
-
if (value == null)
|
|
252
|
-
value = false;
|
|
253
|
-
if (typeof value !== 'boolean')
|
|
254
|
-
throw new Error('multiple expects: boolean');
|
|
255
|
-
this._isMultiple = value;
|
|
161
|
+
constructor() {
|
|
162
|
+
super();
|
|
163
|
+
this.ngControl = inject(NgControl, { self: true });
|
|
164
|
+
this.items = input([], { ...(ngDevMode ? { debugName: "items" } : /* istanbul ignore next */ {}), transform: toItems });
|
|
165
|
+
this.limit = input(0, { ...(ngDevMode ? { debugName: "limit" } : /* istanbul ignore next */ {}), transform: toLimit });
|
|
166
|
+
this.isMultiple = input(false, { ...(ngDevMode ? { debugName: "isMultiple" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
167
|
+
this.model = signal([], /* @ts-ignore */
|
|
168
|
+
...(ngDevMode ? [{ debugName: "model" }] : /* istanbul ignore next */ []));
|
|
169
|
+
this.ngControl.valueAccessor = this;
|
|
170
|
+
// Re-run validation synchronously whenever an input that feeds the
|
|
171
|
+
// validators changes. No debounce means validity repaints under zoneless.
|
|
172
|
+
effect(() => {
|
|
173
|
+
this.items();
|
|
174
|
+
this.limit();
|
|
175
|
+
this.isMultiple();
|
|
176
|
+
this.required();
|
|
177
|
+
this.validate();
|
|
178
|
+
});
|
|
256
179
|
}
|
|
257
|
-
|
|
258
|
-
this.
|
|
180
|
+
setModel(value) {
|
|
181
|
+
this.model.set(value);
|
|
259
182
|
this.onChange(value.length === 0
|
|
260
183
|
? null
|
|
261
|
-
: this.isMultiple
|
|
262
|
-
?
|
|
263
|
-
:
|
|
264
|
-
}
|
|
265
|
-
constructor(ngControl) {
|
|
266
|
-
super();
|
|
267
|
-
this.ngControl = ngControl;
|
|
268
|
-
this._items = [];
|
|
269
|
-
this.filteredItems = [];
|
|
270
|
-
this._limit = 0;
|
|
271
|
-
this._isMultiple = false;
|
|
272
|
-
this._model = [];
|
|
273
|
-
this.validation
|
|
274
|
-
.pipe(debounceTime(100))
|
|
275
|
-
.subscribe(() => this.validate());
|
|
276
|
-
ngControl.valueAccessor = this;
|
|
184
|
+
: this.isMultiple()
|
|
185
|
+
? value
|
|
186
|
+
: value[0]);
|
|
277
187
|
}
|
|
278
188
|
onChange(_value) { }
|
|
279
189
|
registerOnChange(fn) {
|
|
@@ -285,7 +195,7 @@ class ItemDirective extends ControlDirective {
|
|
|
285
195
|
if (!Array.isArray(value))
|
|
286
196
|
value = [value];
|
|
287
197
|
if (value.every(item => isPrimitive(item)))
|
|
288
|
-
this.
|
|
198
|
+
this.model.set(value);
|
|
289
199
|
}
|
|
290
200
|
invalidValidator(items, isMultiple) {
|
|
291
201
|
return (control) => (isMultiple
|
|
@@ -301,34 +211,24 @@ class ItemDirective extends ControlDirective {
|
|
|
301
211
|
}
|
|
302
212
|
validate() {
|
|
303
213
|
const validators = [
|
|
304
|
-
this.invalidValidator(this.
|
|
214
|
+
this.invalidValidator(this.items(), this.isMultiple()),
|
|
305
215
|
];
|
|
306
|
-
if (this.
|
|
307
|
-
validators.push(this.limitValidator(this.
|
|
308
|
-
if (this.required === true)
|
|
216
|
+
if (this.isMultiple())
|
|
217
|
+
validators.push(this.limitValidator(this.limit()));
|
|
218
|
+
if (this.required() === true)
|
|
309
219
|
validators.push(Validators.required);
|
|
310
|
-
|
|
311
|
-
|
|
312
|
-
this.ngControl.control.setValidators(validators);
|
|
313
|
-
this.ngControl.control.updateValueAndValidity();
|
|
220
|
+
this.ngControl.control?.setValidators(validators);
|
|
221
|
+
this.ngControl.control?.updateValueAndValidity();
|
|
314
222
|
}
|
|
315
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
316
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "
|
|
223
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: ItemDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
224
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.2", type: ItemDirective, isStandalone: true, selector: "[joItem]", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, limit: { classPropertyName: "limit", publicName: "limit", isSignal: true, isRequired: false, transformFunction: null }, isMultiple: { classPropertyName: "isMultiple", publicName: "isMultiple", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0 }); }
|
|
317
225
|
}
|
|
318
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
226
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: ItemDirective, decorators: [{
|
|
319
227
|
type: Directive,
|
|
320
228
|
args: [{
|
|
321
229
|
selector: '[joItem]'
|
|
322
230
|
}]
|
|
323
|
-
}], ctorParameters: () => [{ type:
|
|
324
|
-
type: Self
|
|
325
|
-
}] }], propDecorators: { items: [{
|
|
326
|
-
type: Input
|
|
327
|
-
}], limit: [{
|
|
328
|
-
type: Input
|
|
329
|
-
}], isMultiple: [{
|
|
330
|
-
type: Input
|
|
331
|
-
}] } });
|
|
231
|
+
}], ctorParameters: () => [], propDecorators: { items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], limit: [{ type: i0.Input, args: [{ isSignal: true, alias: "limit", required: false }] }], isMultiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "isMultiple", required: false }] }] } });
|
|
332
232
|
|
|
333
233
|
class SizeDirective {
|
|
334
234
|
constructor() {
|
|
@@ -353,10 +253,10 @@ class SizeDirective {
|
|
|
353
253
|
ngOnDestroy() {
|
|
354
254
|
this.sizeChangesSubject.complete();
|
|
355
255
|
}
|
|
356
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
357
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "
|
|
256
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: SizeDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
257
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.2", type: SizeDirective, isStandalone: true, selector: "[size]", inputs: { size: "size" }, ngImport: i0 }); }
|
|
358
258
|
}
|
|
359
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
259
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: SizeDirective, decorators: [{
|
|
360
260
|
type: Directive,
|
|
361
261
|
args: [{
|
|
362
262
|
selector: '[size]'
|
|
@@ -365,189 +265,62 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.5", ngImpor
|
|
|
365
265
|
type: Input
|
|
366
266
|
}] } });
|
|
367
267
|
|
|
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
|
-
|
|
480
268
|
class ChoiceComponent extends ItemDirective {
|
|
481
|
-
constructor(
|
|
482
|
-
super(
|
|
483
|
-
this.
|
|
484
|
-
this._isColumn = false;
|
|
269
|
+
constructor() {
|
|
270
|
+
super(...arguments);
|
|
271
|
+
this.isColumn = input(false, { ...(ngDevMode ? { debugName: "isColumn" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
485
272
|
this.id = `${Math.random().toString(36).substr(2, 9)}`;
|
|
486
273
|
}
|
|
487
|
-
get isColumn() {
|
|
488
|
-
return this._isColumn;
|
|
489
|
-
}
|
|
490
|
-
set isColumn(value) {
|
|
491
|
-
if (value === '')
|
|
492
|
-
value = true;
|
|
493
|
-
if (value == null)
|
|
494
|
-
value = false;
|
|
495
|
-
if (typeof value !== 'boolean')
|
|
496
|
-
throw new Error('isColumn expects: boolean');
|
|
497
|
-
this._isColumn = value;
|
|
498
|
-
}
|
|
499
274
|
onClick(item) {
|
|
500
|
-
|
|
501
|
-
|
|
502
|
-
if (
|
|
503
|
-
if (this.required === true &&
|
|
275
|
+
const keys = this.items().map(item => item.key);
|
|
276
|
+
const model = this.model().filter(key => keys.includes(key));
|
|
277
|
+
if (model.includes(item.key)) {
|
|
278
|
+
if (this.required() === true && model.length === 1)
|
|
504
279
|
return;
|
|
505
|
-
this.model
|
|
280
|
+
this.setModel(model.filter(key => key !== item.key));
|
|
506
281
|
return;
|
|
507
282
|
}
|
|
508
|
-
if (!this.isMultiple &&
|
|
509
|
-
this.
|
|
283
|
+
if (!this.isMultiple() && model.length === 1) {
|
|
284
|
+
this.setModel([item.key]);
|
|
510
285
|
return;
|
|
511
286
|
}
|
|
512
|
-
this.
|
|
287
|
+
this.setModel([...model, item.key]);
|
|
513
288
|
}
|
|
514
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
515
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
289
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: ChoiceComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
290
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.2", type: ChoiceComponent, isStandalone: true, selector: "jo-choice", inputs: { isColumn: { classPropertyName: "isColumn", publicName: "isColumn", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0, template: "<div class=\"d-flex justify-content-between\">\n <label\n id=\"choice_{{id}}\"\n [class.required]=\"required()\"\n >\n <ng-content></ng-content>\n </label>\n <div>\n <ng-content select=\"[rightAligned]\"></ng-content>\n </div>\n</div>\n\n<div\n class=\"d-flex flex-wrap align-items-start\"\n role=\"group\"\n attr.aria-labelledby=\"choice_{{id}}\"\n [class.flex-column]=\"isColumn()\"\n >\n @for (item of items(); track item; let idx = $index) {\n <button\n type=\"button\"\n class=\"d-flex align-items-center gap-2 text-start\"\n role=\"menuitemcheckbox\"\n [class.br-end]=\"borderRadiusRight()\"\n [class.br-start]=\"borderRadiusLeft()\"\n [disabled]=\"isDisabled()\"\n (click)=\"onClick(item)\"\n (blur)=\"onTouched()\"\n >\n <div\n class=\"jo-button {{isMultiple() ? 'br-20' : 'br-50'}}\"\n [class.active]=\"model().includes(item.key)\"\n [class.disabled]=\"isDisabled()\"\n [class.invalid]=\"ngControl.control?.invalid\"\n >\n @if (model().includes(item.key)) {\n <icon\n size=\"1rem\"\n [type]=\"isMultiple() ? 'check' : 'dot'\"\n [fill]=\"[null, 'current']\"\n fillRotate=\"90\"\n ></icon>\n }\n </div>\n <span>{{item.value}}</span>\n </button>\n }\n</div>\n\n<!-- <ul *ngIf=\"ngControl.control?.errors\">\n<li *ngIf=\"ngControl.control?.errors?.['invalid']\">\n invalid model\n</li>\n</ul> -->\n", 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: "component", type: IconComponent, selector: "icon[type]", inputs: ["type", "fill", "fillRotate", "fillOpacity", "stroke", "strokeRotate", "spin"] }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
|
|
516
291
|
}
|
|
517
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
292
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: ChoiceComponent, decorators: [{
|
|
518
293
|
type: Component,
|
|
519
|
-
args: [{ selector: 'jo-choice', template: "<div class=\"d-flex justify-content-between\">\
|
|
520
|
-
}],
|
|
521
|
-
type: Self
|
|
522
|
-
}] }], propDecorators: { isColumn: [{
|
|
523
|
-
type: Input
|
|
524
|
-
}] } });
|
|
294
|
+
args: [{ selector: 'jo-choice', changeDetection: ChangeDetectionStrategy.Eager, imports: [IconComponent], template: "<div class=\"d-flex justify-content-between\">\n <label\n id=\"choice_{{id}}\"\n [class.required]=\"required()\"\n >\n <ng-content></ng-content>\n </label>\n <div>\n <ng-content select=\"[rightAligned]\"></ng-content>\n </div>\n</div>\n\n<div\n class=\"d-flex flex-wrap align-items-start\"\n role=\"group\"\n attr.aria-labelledby=\"choice_{{id}}\"\n [class.flex-column]=\"isColumn()\"\n >\n @for (item of items(); track item; let idx = $index) {\n <button\n type=\"button\"\n class=\"d-flex align-items-center gap-2 text-start\"\n role=\"menuitemcheckbox\"\n [class.br-end]=\"borderRadiusRight()\"\n [class.br-start]=\"borderRadiusLeft()\"\n [disabled]=\"isDisabled()\"\n (click)=\"onClick(item)\"\n (blur)=\"onTouched()\"\n >\n <div\n class=\"jo-button {{isMultiple() ? 'br-20' : 'br-50'}}\"\n [class.active]=\"model().includes(item.key)\"\n [class.disabled]=\"isDisabled()\"\n [class.invalid]=\"ngControl.control?.invalid\"\n >\n @if (model().includes(item.key)) {\n <icon\n size=\"1rem\"\n [type]=\"isMultiple() ? 'check' : 'dot'\"\n [fill]=\"[null, 'current']\"\n fillRotate=\"90\"\n ></icon>\n }\n </div>\n <span>{{item.value}}</span>\n </button>\n }\n</div>\n\n<!-- <ul *ngIf=\"ngControl.control?.errors\">\n<li *ngIf=\"ngControl.control?.errors?.['invalid']\">\n invalid model\n</li>\n</ul> -->\n", 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"] }]
|
|
295
|
+
}], propDecorators: { isColumn: [{ type: i0.Input, args: [{ isSignal: true, alias: "isColumn", required: false }] }] } });
|
|
525
296
|
|
|
526
297
|
class ColorComponent extends ControlDirective {
|
|
527
|
-
|
|
528
|
-
return this._model;
|
|
529
|
-
}
|
|
530
|
-
set model(value) {
|
|
531
|
-
this._model = value;
|
|
532
|
-
this.onChange(this._model !== null && this.fullHex.test(this._model)
|
|
533
|
-
? this._model
|
|
534
|
-
: null);
|
|
535
|
-
}
|
|
536
|
-
constructor(ngControl) {
|
|
298
|
+
constructor() {
|
|
537
299
|
super();
|
|
538
|
-
this.ngControl =
|
|
300
|
+
this.ngControl = inject(NgControl, { self: true });
|
|
539
301
|
this.partialHex = /^[0-9A-Fa-f]{1,6}$/;
|
|
540
302
|
this.fullHex = /^[0-9A-Fa-f]{6}$/;
|
|
541
|
-
this.
|
|
303
|
+
this.model = signal(null, /* @ts-ignore */
|
|
304
|
+
...(ngDevMode ? [{ debugName: "model" }] : /* istanbul ignore next */ []));
|
|
542
305
|
this.id = `_${Math.random().toString(36).substring(2, 11)}`;
|
|
543
|
-
this.
|
|
544
|
-
|
|
545
|
-
|
|
546
|
-
|
|
306
|
+
this.ngControl.valueAccessor = this;
|
|
307
|
+
effect(() => {
|
|
308
|
+
this.required();
|
|
309
|
+
this.validate();
|
|
310
|
+
});
|
|
311
|
+
}
|
|
312
|
+
onModelChange(value) {
|
|
313
|
+
this.setModel(value);
|
|
547
314
|
}
|
|
548
315
|
onChangeColor(event) {
|
|
549
316
|
const ele = event.target;
|
|
550
|
-
this.
|
|
317
|
+
this.setModel(ele.value.substring(1).toUpperCase());
|
|
318
|
+
}
|
|
319
|
+
setModel(value) {
|
|
320
|
+
this.model.set(value);
|
|
321
|
+
this.onChange(value !== null && this.fullHex.test(value)
|
|
322
|
+
? value
|
|
323
|
+
: null);
|
|
551
324
|
}
|
|
552
325
|
onChange(_model) { }
|
|
553
326
|
registerOnChange(fn) {
|
|
@@ -567,7 +340,7 @@ class ColorComponent extends ControlDirective {
|
|
|
567
340
|
if (value === undefined || typeof value !== 'string' || !this.partialHex.test(value))
|
|
568
341
|
value = null;
|
|
569
342
|
if (value === null || this.partialHex.test(value))
|
|
570
|
-
this.
|
|
343
|
+
this.model.set(value);
|
|
571
344
|
}
|
|
572
345
|
invalidValidator() {
|
|
573
346
|
return (control) => control.value !== null && (typeof control.value !== 'string' || !this.fullHex.test(control.value))
|
|
@@ -578,60 +351,48 @@ class ColorComponent extends ControlDirective {
|
|
|
578
351
|
const validators = [
|
|
579
352
|
this.invalidValidator()
|
|
580
353
|
];
|
|
581
|
-
if (this.required === true)
|
|
354
|
+
if (this.required() === true)
|
|
582
355
|
validators.push(Validators.required);
|
|
583
356
|
this.ngControl.control?.setValidators(validators);
|
|
584
357
|
this.ngControl.control?.updateValueAndValidity();
|
|
585
358
|
}
|
|
586
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
587
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "
|
|
359
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: ColorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
360
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.2", type: ColorComponent, isStandalone: true, selector: "jo-color", usesInheritance: true, ngImport: i0, template: "<label\n [for]=\"id\"\n [class.required]=\"required()\"\n>\n <ng-content></ng-content>\n</label>\n\n<div class=\"d-flex align-items-stretch\">\n <button\n class=\"d-flex align-items-center\"\n title=\"Color\"\n [class.br-start]=\"borderRadiusLeft()\"\n [disabled]=\"isDisabled()\"\n (click)=\"colorInput.click()\"\n >\n <icon\n size=\"1rem\"\n type=\"square\"\n [fill]=\"fullHex.test(model() || '') ? model() : [null, 'current']\"\n fillRotate=\"90\"\n [stroke]=\"fullHex.test(model() || '') ? model() : ['current']\"\n ></icon>\n </button>\n <input\n [ngModel]=\"model()\"\n (ngModelChange)=\"onModelChange($event)\"\n spellcheck=\"false\"\n size=\"5\"\n type=\"text\"\n [class.active]=\"ngControl.control?.value !== null\"\n [class.br-end]=\"borderRadiusRight()\"\n [class.invalid]=\"ngControl.control?.invalid\"\n [disabled]=\"isDisabled()\"\n [id]=\"id\"\n (beforeinput)=\"onBeforeinput($event)\"\n (blur)=\"onTouched()\"\n />\n</div>\n\n<!-- <ul *ngIf=\"ngControl.control?.errors\">\n <li *ngIf=\"ngControl.control?.errors?.['invalid']\">\n invalid model\n </li>\n</ul> -->\n\n<input\n #colorInput\n type=\"color\"\n (change)=\"onChangeColor($event)\"\n/>\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: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[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"] }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
|
|
588
361
|
}
|
|
589
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
362
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: ColorComponent, decorators: [{
|
|
590
363
|
type: Component,
|
|
591
|
-
args: [{ selector: 'jo-color', template: "<label\
|
|
592
|
-
}], ctorParameters: () => [
|
|
593
|
-
type: Self
|
|
594
|
-
}] }] });
|
|
364
|
+
args: [{ selector: 'jo-color', changeDetection: ChangeDetectionStrategy.Eager, imports: [FormsModule, IconComponent], template: "<label\n [for]=\"id\"\n [class.required]=\"required()\"\n>\n <ng-content></ng-content>\n</label>\n\n<div class=\"d-flex align-items-stretch\">\n <button\n class=\"d-flex align-items-center\"\n title=\"Color\"\n [class.br-start]=\"borderRadiusLeft()\"\n [disabled]=\"isDisabled()\"\n (click)=\"colorInput.click()\"\n >\n <icon\n size=\"1rem\"\n type=\"square\"\n [fill]=\"fullHex.test(model() || '') ? model() : [null, 'current']\"\n fillRotate=\"90\"\n [stroke]=\"fullHex.test(model() || '') ? model() : ['current']\"\n ></icon>\n </button>\n <input\n [ngModel]=\"model()\"\n (ngModelChange)=\"onModelChange($event)\"\n spellcheck=\"false\"\n size=\"5\"\n type=\"text\"\n [class.active]=\"ngControl.control?.value !== null\"\n [class.br-end]=\"borderRadiusRight()\"\n [class.invalid]=\"ngControl.control?.invalid\"\n [disabled]=\"isDisabled()\"\n [id]=\"id\"\n (beforeinput)=\"onBeforeinput($event)\"\n (blur)=\"onTouched()\"\n />\n</div>\n\n<!-- <ul *ngIf=\"ngControl.control?.errors\">\n <li *ngIf=\"ngControl.control?.errors?.['invalid']\">\n invalid model\n </li>\n</ul> -->\n\n<input\n #colorInput\n type=\"color\"\n (change)=\"onChangeColor($event)\"\n/>\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"] }]
|
|
365
|
+
}], ctorParameters: () => [] });
|
|
595
366
|
|
|
367
|
+
function toAcceptedTypes(value) {
|
|
368
|
+
if (!Array.isArray(value) || !value.every(item => typeof item === 'string'))
|
|
369
|
+
throw new Error(`acceptedTypes expects: string[]`);
|
|
370
|
+
return value;
|
|
371
|
+
}
|
|
372
|
+
function toSizeLimitMb(value) {
|
|
373
|
+
if (!isNumber(value) || value < 0)
|
|
374
|
+
throw new Error('sizeLimitMb expects: positive number');
|
|
375
|
+
return value;
|
|
376
|
+
}
|
|
596
377
|
class FileComponent extends ControlDirective {
|
|
597
|
-
|
|
598
|
-
return this._acceptedTypes;
|
|
599
|
-
}
|
|
600
|
-
set acceptedTypes(value) {
|
|
601
|
-
if (!Array.isArray(value) || !value.every(item => typeof item === 'string'))
|
|
602
|
-
throw new Error(`acceptedTypes expects: string[]`);
|
|
603
|
-
this._acceptedTypes = value;
|
|
604
|
-
this.validation.next();
|
|
605
|
-
}
|
|
606
|
-
get sizeLimitMb() {
|
|
607
|
-
return this._sizeLimitMb;
|
|
608
|
-
}
|
|
609
|
-
set sizeLimitMb(value) {
|
|
610
|
-
if (!isNumber(value) || value < 0)
|
|
611
|
-
throw new Error('sizeLimitMb expects: positive number');
|
|
612
|
-
this._sizeLimitMb = value;
|
|
613
|
-
this.validation.next();
|
|
614
|
-
}
|
|
615
|
-
get multiple() {
|
|
616
|
-
return this._multiple;
|
|
617
|
-
}
|
|
618
|
-
set multiple(value) {
|
|
619
|
-
this._multiple = value === true;
|
|
620
|
-
this.validation.next();
|
|
621
|
-
}
|
|
622
|
-
constructor(ngControl) {
|
|
378
|
+
constructor() {
|
|
623
379
|
super();
|
|
624
|
-
this.ngControl =
|
|
625
|
-
this.
|
|
626
|
-
this.
|
|
627
|
-
this.
|
|
628
|
-
this.showSize = false;
|
|
629
|
-
this.model = null
|
|
380
|
+
this.ngControl = inject(NgControl, { self: true });
|
|
381
|
+
this.acceptedTypes = input([], { ...(ngDevMode ? { debugName: "acceptedTypes" } : /* istanbul ignore next */ {}), transform: toAcceptedTypes });
|
|
382
|
+
this.sizeLimitMb = input(0, { ...(ngDevMode ? { debugName: "sizeLimitMb" } : /* istanbul ignore next */ {}), transform: toSizeLimitMb });
|
|
383
|
+
this.multiple = input(false, { ...(ngDevMode ? { debugName: "multiple" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
384
|
+
this.showSize = input(false, { ...(ngDevMode ? { debugName: "showSize" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
385
|
+
this.model = signal(null, /* @ts-ignore */
|
|
386
|
+
...(ngDevMode ? [{ debugName: "model" }] : /* istanbul ignore next */ []));
|
|
630
387
|
this.id = `${Math.random().toString(36).substr(2, 9)}`;
|
|
631
|
-
this.
|
|
632
|
-
|
|
633
|
-
|
|
634
|
-
|
|
388
|
+
this.ngControl.valueAccessor = this;
|
|
389
|
+
effect(() => {
|
|
390
|
+
this.acceptedTypes();
|
|
391
|
+
this.sizeLimitMb();
|
|
392
|
+
this.multiple();
|
|
393
|
+
this.required();
|
|
394
|
+
this.validate();
|
|
395
|
+
});
|
|
635
396
|
}
|
|
636
397
|
get fileNames() {
|
|
637
398
|
if (this.ngControl.value instanceof FileList)
|
|
@@ -641,9 +402,9 @@ class FileComponent extends ControlDirective {
|
|
|
641
402
|
return '';
|
|
642
403
|
}
|
|
643
404
|
get sizeLimit() {
|
|
644
|
-
return this.sizeLimitMb < 1
|
|
645
|
-
? `${this.sizeLimitMb * 1000} KB`
|
|
646
|
-
: `${this.sizeLimitMb} MB`;
|
|
405
|
+
return this.sizeLimitMb() < 1
|
|
406
|
+
? `${this.sizeLimitMb() * 1000} KB`
|
|
407
|
+
: `${this.sizeLimitMb()} MB`;
|
|
647
408
|
}
|
|
648
409
|
onFileChange(event) {
|
|
649
410
|
const target = event.target;
|
|
@@ -664,7 +425,7 @@ class FileComponent extends ControlDirective {
|
|
|
664
425
|
if (value !== null && !(value instanceof FileList))
|
|
665
426
|
throw new Error('control value must be: File or null');
|
|
666
427
|
// todo
|
|
667
|
-
// this.model
|
|
428
|
+
// this.model.set(value);
|
|
668
429
|
}
|
|
669
430
|
acceptedTypesValidator(acceptedTypes) {
|
|
670
431
|
return (control) => control.value !== null
|
|
@@ -689,121 +450,64 @@ class FileComponent extends ControlDirective {
|
|
|
689
450
|
}
|
|
690
451
|
validate() {
|
|
691
452
|
const validators = [
|
|
692
|
-
this.invalidValidator(this.multiple)
|
|
453
|
+
this.invalidValidator(this.multiple())
|
|
693
454
|
];
|
|
694
|
-
if (this.acceptedTypes.length > 0)
|
|
695
|
-
validators.push(this.acceptedTypesValidator(this.acceptedTypes));
|
|
696
|
-
if (this.sizeLimitMb > 0)
|
|
697
|
-
validators.push(this.sizeLimitMbValidator(this.sizeLimitMb));
|
|
698
|
-
if (this.required === true)
|
|
455
|
+
if (this.acceptedTypes().length > 0)
|
|
456
|
+
validators.push(this.acceptedTypesValidator(this.acceptedTypes()));
|
|
457
|
+
if (this.sizeLimitMb() > 0)
|
|
458
|
+
validators.push(this.sizeLimitMbValidator(this.sizeLimitMb()));
|
|
459
|
+
if (this.required() === true)
|
|
699
460
|
validators.push(Validators.required);
|
|
700
461
|
this.ngControl.control?.setValidators(validators);
|
|
701
462
|
this.ngControl.control?.updateValueAndValidity();
|
|
702
463
|
}
|
|
703
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
704
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
464
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: FileComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
465
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.2", type: FileComponent, isStandalone: true, selector: "jo-file", inputs: { acceptedTypes: { classPropertyName: "acceptedTypes", publicName: "acceptedTypes", isSignal: true, isRequired: false, transformFunction: null }, sizeLimitMb: { classPropertyName: "sizeLimitMb", publicName: "sizeLimitMb", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, showSize: { classPropertyName: "showSize", publicName: "showSize", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0, template: "<div class=\"d-flex justify-content-between\">\n <label [class.required]=\"required()\">\n <ng-content></ng-content>\n </label>\n <div>\n <ng-content select=\"[rightAligned]\"></ng-content>\n </div>\n</div>\n\n<div class=\"d-flex align-items-stretch\">\n <button\n class=\"d-flex align-items-center gap-2\"\n [class.br-start]=\"borderRadiusLeft()\"\n [disabled]=\"isDisabled()\"\n (click)=\"fileInput.click()\"\n >\n <icon\n type=\"folder\"\n size=\"1rem\"\n [fill]=\"[null, 'current']\"\n fillRotate=\"90\"\n ></icon>\n Browse...\n </button>\n <button\n class=\"d-flex align-items-center\"\n [class.br-end]=\"borderRadiusRight()\"\n [class.active]=\"ngControl.value !== null\"\n [disabled]=\"isDisabled()\"\n (click)=\"fileInput.click()\"\n >\n @if (!ngControl.value) {\n No {{multiple() ? 'files' : 'file'}} selected\n }\n @if (ngControl.value) {\n {{fileNames}}\n }\n </button>\n</div>\n\n<!-- <ul *ngIf=\"ngControl.control?.errors\">\n<li *ngIf=\"ngControl.control?.errors?.['acceptedTypes']\">\n valid types are {{acceptedTypes().join(', ')}}\n</li>\n<li *ngIf=\"ngControl.control?.errors?.['sizeLimitMb']\">\n max file size is {{sizeLimit}}\n</li>\n<li *ngIf=\"ngControl.control?.errors?.['invalid']\">\n invalid model\n</li>\n</ul> -->\n\n<input\n [ngModel]=\"model()\"\n #fileInput\n type=\"file\"\n [accept]=\"acceptedTypes().join()\"\n [multiple]=\"multiple()\"\n [id]=\"id\"\n (change)=\"onFileChange($event)\"\n (cancel)=\"onFileCancel()\"\n />\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: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[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"] }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
|
|
705
466
|
}
|
|
706
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
467
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: FileComponent, decorators: [{
|
|
707
468
|
type: Component,
|
|
708
|
-
args: [{ selector: 'jo-file', template: "<div class=\"d-flex justify-content-between\">\
|
|
709
|
-
}], ctorParameters: () => [{ type:
|
|
710
|
-
type: Self
|
|
711
|
-
}] }], propDecorators: { acceptedTypes: [{
|
|
712
|
-
type: Input
|
|
713
|
-
}], sizeLimitMb: [{
|
|
714
|
-
type: Input
|
|
715
|
-
}], multiple: [{
|
|
716
|
-
type: Input
|
|
717
|
-
}], showSize: [{
|
|
718
|
-
type: Input
|
|
719
|
-
}] } });
|
|
469
|
+
args: [{ selector: 'jo-file', changeDetection: ChangeDetectionStrategy.Eager, imports: [FormsModule, IconComponent], template: "<div class=\"d-flex justify-content-between\">\n <label [class.required]=\"required()\">\n <ng-content></ng-content>\n </label>\n <div>\n <ng-content select=\"[rightAligned]\"></ng-content>\n </div>\n</div>\n\n<div class=\"d-flex align-items-stretch\">\n <button\n class=\"d-flex align-items-center gap-2\"\n [class.br-start]=\"borderRadiusLeft()\"\n [disabled]=\"isDisabled()\"\n (click)=\"fileInput.click()\"\n >\n <icon\n type=\"folder\"\n size=\"1rem\"\n [fill]=\"[null, 'current']\"\n fillRotate=\"90\"\n ></icon>\n Browse...\n </button>\n <button\n class=\"d-flex align-items-center\"\n [class.br-end]=\"borderRadiusRight()\"\n [class.active]=\"ngControl.value !== null\"\n [disabled]=\"isDisabled()\"\n (click)=\"fileInput.click()\"\n >\n @if (!ngControl.value) {\n No {{multiple() ? 'files' : 'file'}} selected\n }\n @if (ngControl.value) {\n {{fileNames}}\n }\n </button>\n</div>\n\n<!-- <ul *ngIf=\"ngControl.control?.errors\">\n<li *ngIf=\"ngControl.control?.errors?.['acceptedTypes']\">\n valid types are {{acceptedTypes().join(', ')}}\n</li>\n<li *ngIf=\"ngControl.control?.errors?.['sizeLimitMb']\">\n max file size is {{sizeLimit}}\n</li>\n<li *ngIf=\"ngControl.control?.errors?.['invalid']\">\n invalid model\n</li>\n</ul> -->\n\n<input\n [ngModel]=\"model()\"\n #fileInput\n type=\"file\"\n [accept]=\"acceptedTypes().join()\"\n [multiple]=\"multiple()\"\n [id]=\"id\"\n (change)=\"onFileChange($event)\"\n (cancel)=\"onFileCancel()\"\n />\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"] }]
|
|
470
|
+
}], ctorParameters: () => [], propDecorators: { acceptedTypes: [{ type: i0.Input, args: [{ isSignal: true, alias: "acceptedTypes", required: false }] }], sizeLimitMb: [{ type: i0.Input, args: [{ isSignal: true, alias: "sizeLimitMb", required: false }] }], multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], showSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "showSize", required: false }] }] } });
|
|
720
471
|
|
|
721
|
-
|
|
722
|
-
|
|
723
|
-
|
|
724
|
-
|
|
725
|
-
|
|
726
|
-
|
|
727
|
-
|
|
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"] }); }
|
|
472
|
+
function toNumber(label) {
|
|
473
|
+
return (value) => {
|
|
474
|
+
const result = typeof value === 'string' ? parseFloat(value) : value;
|
|
475
|
+
if (!isNumber(result))
|
|
476
|
+
throw new Error(`[${label}] expects: number`);
|
|
477
|
+
return result;
|
|
478
|
+
};
|
|
735
479
|
}
|
|
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
|
-
|
|
747
480
|
class NumberComponent extends ControlDirective {
|
|
748
|
-
|
|
749
|
-
return this._min;
|
|
750
|
-
}
|
|
751
|
-
set min(value) {
|
|
752
|
-
if (!isNumber(value))
|
|
753
|
-
throw new Error('[min] expects: number');
|
|
754
|
-
this._min = value;
|
|
755
|
-
this.validation.next();
|
|
756
|
-
}
|
|
757
|
-
get max() {
|
|
758
|
-
return this._max;
|
|
759
|
-
}
|
|
760
|
-
set max(value) {
|
|
761
|
-
if (!isNumber(value))
|
|
762
|
-
throw new Error('[max] expects: number');
|
|
763
|
-
this._max = value;
|
|
764
|
-
this.validation.next();
|
|
765
|
-
}
|
|
766
|
-
get step() {
|
|
767
|
-
return this._step;
|
|
768
|
-
}
|
|
769
|
-
set step(value) {
|
|
770
|
-
if (!isNumber(value))
|
|
771
|
-
throw new Error('[step] expects: number');
|
|
772
|
-
this._step = value;
|
|
773
|
-
this.mustBeInteger = Number.isInteger(this._step);
|
|
774
|
-
}
|
|
775
|
-
constructor(ngControl) {
|
|
481
|
+
constructor() {
|
|
776
482
|
super();
|
|
777
|
-
this.ngControl =
|
|
778
|
-
this.
|
|
779
|
-
this.
|
|
780
|
-
this.
|
|
781
|
-
this.mustBeInteger = true;
|
|
483
|
+
this.ngControl = inject(NgControl, { self: true });
|
|
484
|
+
this.min = input(0, { ...(ngDevMode ? { debugName: "min" } : /* istanbul ignore next */ {}), transform: toNumber('min') });
|
|
485
|
+
this.max = input(9, { ...(ngDevMode ? { debugName: "max" } : /* istanbul ignore next */ {}), transform: toNumber('max') });
|
|
486
|
+
this.step = input(1, { ...(ngDevMode ? { debugName: "step" } : /* istanbul ignore next */ {}), transform: toNumber('step') });
|
|
782
487
|
this.sizePadding = 5;
|
|
783
|
-
this.
|
|
784
|
-
|
|
785
|
-
this.
|
|
786
|
-
|
|
787
|
-
|
|
788
|
-
|
|
789
|
-
|
|
790
|
-
|
|
791
|
-
|
|
792
|
-
|
|
793
|
-
this.
|
|
794
|
-
|
|
795
|
-
|
|
796
|
-
|
|
797
|
-
|
|
798
|
-
|
|
799
|
-
|
|
800
|
-
|
|
801
|
-
|
|
802
|
-
|
|
803
|
-
|
|
804
|
-
|
|
805
|
-
|
|
806
|
-
return Math.max(this._step.toString().length, this._max.toString().length, this._min.toString().length);
|
|
488
|
+
this.model = signal(null, /* @ts-ignore */
|
|
489
|
+
...(ngDevMode ? [{ debugName: "model" }] : /* istanbul ignore next */ []));
|
|
490
|
+
this.mustBeInteger = computed(() => Number.isInteger(this.step()), /* @ts-ignore */
|
|
491
|
+
...(ngDevMode ? [{ debugName: "mustBeInteger" }] : /* istanbul ignore next */ []));
|
|
492
|
+
this.maxDigitSize = computed(() => Math.max(this.step().toString().length, this.max().toString().length, this.min().toString().length), /* @ts-ignore */
|
|
493
|
+
...(ngDevMode ? [{ debugName: "maxDigitSize" }] : /* istanbul ignore next */ []));
|
|
494
|
+
this.isDisabledAdd = computed(() => this.isDisabled() === true
|
|
495
|
+
|| this.model() !== null
|
|
496
|
+
&& this.model() + this.step() > this.max(), /* @ts-ignore */
|
|
497
|
+
...(ngDevMode ? [{ debugName: "isDisabledAdd" }] : /* istanbul ignore next */ []));
|
|
498
|
+
this.isDisabledSubtract = computed(() => this.isDisabled() === true
|
|
499
|
+
|| this.model() !== null
|
|
500
|
+
&& this.model() - this.step() < this.min(), /* @ts-ignore */
|
|
501
|
+
...(ngDevMode ? [{ debugName: "isDisabledSubtract" }] : /* istanbul ignore next */ []));
|
|
502
|
+
this.ngControl.valueAccessor = this;
|
|
503
|
+
// Re-run validation synchronously whenever an input that feeds the
|
|
504
|
+
// validators changes. No debounce means validity repaints under zoneless.
|
|
505
|
+
effect(() => {
|
|
506
|
+
this.min();
|
|
507
|
+
this.max();
|
|
508
|
+
this.required();
|
|
509
|
+
this.validate();
|
|
510
|
+
});
|
|
807
511
|
}
|
|
808
512
|
onBeforeinput(e) {
|
|
809
513
|
const event = e;
|
|
@@ -811,27 +515,34 @@ class NumberComponent extends ControlDirective {
|
|
|
811
515
|
return;
|
|
812
516
|
const isDigit = /\d/.test(event.data);
|
|
813
517
|
const isMinus = event.data === '-';
|
|
814
|
-
const isMinusAllowed = this.min < 0;
|
|
518
|
+
const isMinusAllowed = this.min() < 0;
|
|
815
519
|
const isBlockedNonDigit = !isDigit && !(isMinus && isMinusAllowed);
|
|
816
|
-
const isPastMax = Number((this.
|
|
520
|
+
const isPastMax = Number((this.model() || '') + event.data) > this.max();
|
|
817
521
|
if (isBlockedNonDigit || isPastMax)
|
|
818
522
|
event.preventDefault();
|
|
819
523
|
}
|
|
820
524
|
add(e) {
|
|
821
|
-
if (this.model === null) {
|
|
822
|
-
this.
|
|
525
|
+
if (this.model() === null) {
|
|
526
|
+
this.setModel(this.max());
|
|
823
527
|
return;
|
|
824
528
|
}
|
|
825
529
|
e.stepUp();
|
|
826
|
-
this.
|
|
530
|
+
this.setModel(e.valueAsNumber);
|
|
827
531
|
}
|
|
828
532
|
subtract(e) {
|
|
829
|
-
if (this.model === null) {
|
|
830
|
-
this.
|
|
533
|
+
if (this.model() === null) {
|
|
534
|
+
this.setModel(this.min());
|
|
831
535
|
return;
|
|
832
536
|
}
|
|
833
537
|
e.stepDown();
|
|
834
|
-
this.
|
|
538
|
+
this.setModel(e.valueAsNumber);
|
|
539
|
+
}
|
|
540
|
+
onModelChange(value) {
|
|
541
|
+
this.setModel(value);
|
|
542
|
+
}
|
|
543
|
+
setModel(value) {
|
|
544
|
+
this.model.set(value);
|
|
545
|
+
this.onChange(value);
|
|
835
546
|
}
|
|
836
547
|
onChange(_model) { }
|
|
837
548
|
registerOnChange(fn) {
|
|
@@ -843,230 +554,196 @@ class NumberComponent extends ControlDirective {
|
|
|
843
554
|
if (typeof value === 'string')
|
|
844
555
|
value = parseFloat(value);
|
|
845
556
|
if (value === null || isNumber(value))
|
|
846
|
-
this.
|
|
557
|
+
this.model.set(value);
|
|
847
558
|
}
|
|
848
559
|
validate() {
|
|
849
560
|
const validators = [
|
|
850
|
-
Validators.min(this.min),
|
|
851
|
-
Validators.max(this.max)
|
|
561
|
+
Validators.min(this.min()),
|
|
562
|
+
Validators.max(this.max())
|
|
852
563
|
];
|
|
853
|
-
if (this.required === true)
|
|
564
|
+
if (this.required() === true)
|
|
854
565
|
validators.push(Validators.required);
|
|
855
566
|
this.ngControl.control?.setValidators(validators);
|
|
856
567
|
this.ngControl.control?.updateValueAndValidity();
|
|
857
568
|
}
|
|
858
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
859
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
569
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: NumberComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
570
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.2", type: NumberComponent, isStandalone: true, selector: "jo-number", inputs: { min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, step: { classPropertyName: "step", publicName: "step", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0, template: "<label [class.required]=\"required()\">\n <ng-content></ng-content>\n</label>\n\n<div class=\"d-flex align-items-stretch\">\n <input\n [ngModel]=\"model()\"\n (ngModelChange)=\"onModelChange($event)\"\n #numberInput\n class=\"d-flex align-items-center\"\n type=\"number\"\n [size]=\"maxDigitSize() + sizePadding\"\n [class.active]=\"model() !== null\"\n [class.br-start]=\"borderRadiusLeft()\"\n [class.invalid]=\"ngControl.control?.invalid\"\n [disabled]=\"isDisabled()\"\n [min]=\"min()\"\n [max]=\"max()\"\n (beforeinput)=\"onBeforeinput($event)\"\n />\n <button\n class=\"d-flex align-items-center\"\n title=\"Subtract\"\n type=\"button\"\n [disabled]=\"isDisabledSubtract()\"\n [class.invalid]=\"ngControl.control?.invalid\"\n (blur)=\"onTouched()\"\n (click)=\"subtract(numberInput)\"\n >\n <icon\n type=\"minus\"\n size=\"1rem\"\n [fill]=\"[null, 'current']\"\n fillRotate=\"90\"\n ></icon>\n </button>\n <button\n class=\"d-flex align-items-center\"\n title=\"Add\"\n type=\"button\"\n [class.br-end]=\"borderRadiusRight()\"\n [disabled]=\"isDisabledAdd()\"\n [class.invalid]=\"ngControl.control?.invalid\"\n (blur)=\"onTouched()\"\n (click)=\"add(numberInput)\"\n >\n <icon\n type=\"plus\"\n size=\"1rem\"\n [fill]=\"[null, 'current']\"\n fillRotate=\"90\"\n ></icon>\n </button>\n</div>\n\n<!-- <ul *ngIf=\"ngControl.control?.errors\">\n <li *ngIf=\"ngControl.control?.errors?.['min']\">\n minimum number is {{min}}\n </li>\n <li *ngIf=\"ngControl.control?.errors?.['max']\">\n maximum number is {{max}}\n </li>\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: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NumberValueAccessor, selector: "input[type=number]:not([ngNoCva])[formControlName],input[type=number]:not([ngNoCva])[formControl],input[type=number]:not([ngNoCva])[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"] }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
|
|
860
571
|
}
|
|
861
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
572
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: NumberComponent, decorators: [{
|
|
862
573
|
type: Component,
|
|
863
|
-
args: [{ selector: 'jo-number', template: "<label [class.required]=\"required\">\
|
|
864
|
-
}], ctorParameters: () => [{ type:
|
|
865
|
-
type: Self
|
|
866
|
-
}] }], propDecorators: { min: [{
|
|
867
|
-
type: Input
|
|
868
|
-
}], max: [{
|
|
869
|
-
type: Input
|
|
870
|
-
}], step: [{
|
|
871
|
-
type: Input
|
|
872
|
-
}] } });
|
|
574
|
+
args: [{ selector: 'jo-number', changeDetection: ChangeDetectionStrategy.Eager, imports: [FormsModule, IconComponent], template: "<label [class.required]=\"required()\">\n <ng-content></ng-content>\n</label>\n\n<div class=\"d-flex align-items-stretch\">\n <input\n [ngModel]=\"model()\"\n (ngModelChange)=\"onModelChange($event)\"\n #numberInput\n class=\"d-flex align-items-center\"\n type=\"number\"\n [size]=\"maxDigitSize() + sizePadding\"\n [class.active]=\"model() !== null\"\n [class.br-start]=\"borderRadiusLeft()\"\n [class.invalid]=\"ngControl.control?.invalid\"\n [disabled]=\"isDisabled()\"\n [min]=\"min()\"\n [max]=\"max()\"\n (beforeinput)=\"onBeforeinput($event)\"\n />\n <button\n class=\"d-flex align-items-center\"\n title=\"Subtract\"\n type=\"button\"\n [disabled]=\"isDisabledSubtract()\"\n [class.invalid]=\"ngControl.control?.invalid\"\n (blur)=\"onTouched()\"\n (click)=\"subtract(numberInput)\"\n >\n <icon\n type=\"minus\"\n size=\"1rem\"\n [fill]=\"[null, 'current']\"\n fillRotate=\"90\"\n ></icon>\n </button>\n <button\n class=\"d-flex align-items-center\"\n title=\"Add\"\n type=\"button\"\n [class.br-end]=\"borderRadiusRight()\"\n [disabled]=\"isDisabledAdd()\"\n [class.invalid]=\"ngControl.control?.invalid\"\n (blur)=\"onTouched()\"\n (click)=\"add(numberInput)\"\n >\n <icon\n type=\"plus\"\n size=\"1rem\"\n [fill]=\"[null, 'current']\"\n fillRotate=\"90\"\n ></icon>\n </button>\n</div>\n\n<!-- <ul *ngIf=\"ngControl.control?.errors\">\n <li *ngIf=\"ngControl.control?.errors?.['min']\">\n minimum number is {{min}}\n </li>\n <li *ngIf=\"ngControl.control?.errors?.['max']\">\n maximum number is {{max}}\n </li>\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"] }]
|
|
575
|
+
}], ctorParameters: () => [], propDecorators: { min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], step: [{ type: i0.Input, args: [{ isSignal: true, alias: "step", required: false }] }] } });
|
|
873
576
|
|
|
874
577
|
class ReadonlyComponent {
|
|
875
|
-
constructor() {
|
|
876
|
-
|
|
877
|
-
|
|
578
|
+
constructor() {
|
|
579
|
+
this.model = input(/* @ts-ignore */
|
|
580
|
+
...(ngDevMode ? [undefined, { debugName: "model" }] : /* istanbul ignore next */ []));
|
|
581
|
+
}
|
|
582
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: ReadonlyComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
583
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.2", type: ReadonlyComponent, isStandalone: true, selector: "jo-readonly", inputs: { model: { classPropertyName: "model", publicName: "model", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<label>\n <ng-content></ng-content>\n</label>\n\n<div class=\"readonly p-2\">\n {{model()}}\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"], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
|
|
878
584
|
}
|
|
879
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
585
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: ReadonlyComponent, decorators: [{
|
|
880
586
|
type: Component,
|
|
881
|
-
args: [{ selector: 'jo-readonly', template: "<label>\
|
|
882
|
-
}],
|
|
883
|
-
type: Input
|
|
884
|
-
}] } });
|
|
587
|
+
args: [{ selector: 'jo-readonly', changeDetection: ChangeDetectionStrategy.Eager, template: "<label>\n <ng-content></ng-content>\n</label>\n\n<div class=\"readonly p-2\">\n {{model()}}\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"] }]
|
|
588
|
+
}], propDecorators: { model: [{ type: i0.Input, args: [{ isSignal: true, alias: "model", required: false }] }] } });
|
|
885
589
|
|
|
886
590
|
class SelectComponent extends ItemDirective {
|
|
887
|
-
|
|
888
|
-
|
|
889
|
-
|
|
890
|
-
|
|
891
|
-
this.
|
|
892
|
-
this.
|
|
893
|
-
|
|
894
|
-
|
|
895
|
-
|
|
896
|
-
|
|
897
|
-
|
|
898
|
-
|
|
899
|
-
|
|
900
|
-
|
|
901
|
-
|
|
591
|
+
constructor() {
|
|
592
|
+
super(...arguments);
|
|
593
|
+
this.hostElement = inject(ElementRef);
|
|
594
|
+
this.dropGroup = viewChild.required('dropGroup');
|
|
595
|
+
this.dropup = viewChild.required('dropup');
|
|
596
|
+
this.dropdown = viewChild.required('dropdown');
|
|
597
|
+
this.dropHeightPx = input(200, { ...(ngDevMode ? { debugName: "dropHeightPx" } : /* istanbul ignore next */ {}), transform: numberAttribute });
|
|
598
|
+
this.searchTerm = signal('', /* @ts-ignore */
|
|
599
|
+
...(ngDevMode ? [{ debugName: "searchTerm" }] : /* istanbul ignore next */ []));
|
|
600
|
+
this.filteredItems = computed(() => {
|
|
601
|
+
const term = this.searchTerm().toLowerCase();
|
|
602
|
+
return term
|
|
603
|
+
? this.items().filter(item => item.value.toLowerCase().includes(term))
|
|
604
|
+
: this.items();
|
|
605
|
+
}, /* @ts-ignore */
|
|
606
|
+
...(ngDevMode ? [{ debugName: "filteredItems" }] : /* istanbul ignore next */ []));
|
|
902
607
|
this.isDropdownCloseToBottom = false;
|
|
903
608
|
this.id = `${Math.random().toString(36).substr(2, 9)}`;
|
|
904
|
-
|
|
905
|
-
|
|
906
|
-
return this._items
|
|
907
|
-
.filter(item => this._model.includes(item.key))
|
|
609
|
+
this.activeItemValues = computed(() => this.items()
|
|
610
|
+
.filter(item => this.model().includes(item.key))
|
|
908
611
|
.map(item => item.value)
|
|
909
|
-
.join(', ')
|
|
910
|
-
|
|
911
|
-
|
|
912
|
-
|
|
612
|
+
.join(', '), /* @ts-ignore */
|
|
613
|
+
...(ngDevMode ? [{ debugName: "activeItemValues" }] : /* istanbul ignore next */ []));
|
|
614
|
+
this.isSelectedAll = computed(() => this.items().every(item => this.model().includes(item.key)), /* @ts-ignore */
|
|
615
|
+
...(ngDevMode ? [{ debugName: "isSelectedAll" }] : /* istanbul ignore next */ []));
|
|
913
616
|
}
|
|
914
617
|
onGlobalClick(event) {
|
|
915
618
|
if (!this.hostElement.nativeElement.contains(event.target))
|
|
916
619
|
this.closeDropdown();
|
|
917
620
|
}
|
|
621
|
+
onSearchChange(value) {
|
|
622
|
+
this.searchTerm.set(value);
|
|
623
|
+
}
|
|
918
624
|
onClickGroup() {
|
|
919
625
|
this.closeDropdown();
|
|
920
|
-
if (this.dropGroup.nativeElement.getBoundingClientRect().bottom + this.dropHeightPx > window.innerHeight) {
|
|
921
|
-
this.dropup.nativeElement.show();
|
|
626
|
+
if (this.dropGroup().nativeElement.getBoundingClientRect().bottom + this.dropHeightPx() > window.innerHeight) {
|
|
627
|
+
this.dropup().nativeElement.show();
|
|
922
628
|
}
|
|
923
629
|
else {
|
|
924
|
-
this.dropdown.nativeElement.show();
|
|
630
|
+
this.dropdown().nativeElement.show();
|
|
925
631
|
}
|
|
926
632
|
}
|
|
927
633
|
onClick(item) {
|
|
928
|
-
|
|
929
|
-
|
|
930
|
-
|
|
634
|
+
const keys = this.items().map(item => item.key);
|
|
635
|
+
const model = this.model().filter(key => keys.includes(key));
|
|
636
|
+
if (model.includes(item.key)) {
|
|
637
|
+
if (this.required() === true && model.length === 1)
|
|
931
638
|
return;
|
|
932
|
-
this.model
|
|
639
|
+
this.setModel(model.filter(key => key !== item.key));
|
|
933
640
|
return;
|
|
934
641
|
}
|
|
935
|
-
if (!this.isMultiple &&
|
|
936
|
-
this.
|
|
642
|
+
if (!this.isMultiple() && model.length === 1) {
|
|
643
|
+
this.setModel([item.key]);
|
|
937
644
|
return;
|
|
938
645
|
}
|
|
939
|
-
this.
|
|
646
|
+
this.setModel([...model, item.key]);
|
|
940
647
|
}
|
|
941
648
|
onClickSelectAll() {
|
|
942
|
-
this.
|
|
649
|
+
this.setModel(this.isSelectedAll()
|
|
943
650
|
? []
|
|
944
|
-
: this.
|
|
651
|
+
: this.items().map(item => item.key));
|
|
945
652
|
}
|
|
946
653
|
closeDropdown() {
|
|
947
|
-
this.searchTerm
|
|
948
|
-
this.dropdown.nativeElement.close();
|
|
949
|
-
this.dropup.nativeElement.close();
|
|
654
|
+
this.searchTerm.set('');
|
|
655
|
+
this.dropdown().nativeElement.close();
|
|
656
|
+
this.dropup().nativeElement.close();
|
|
950
657
|
}
|
|
951
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
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"] }] }); }
|
|
658
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: SelectComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
659
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.2", type: SelectComponent, isStandalone: true, selector: "jo-select", inputs: { dropHeightPx: { classPropertyName: "dropHeightPx", publicName: "dropHeightPx", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "document:mousedown": "onGlobalClick($event)" }, properties: { "style.--dropHeightPx": "dropHeightPx()" } }, viewQueries: [{ propertyName: "dropGroup", first: true, predicate: ["dropGroup"], descendants: true, isSignal: true }, { propertyName: "dropup", first: true, predicate: ["dropup"], descendants: true, isSignal: true }, { propertyName: "dropdown", first: true, predicate: ["dropdown"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"d-flex justify-content-between\">\n <label\n id=\"select_{{id}}\"\n [class.required]=\"required()\"\n >\n <ng-content></ng-content>\n </label>\n <div>\n <ng-content select=\"[rightAligned]\"></ng-content>\n </div>\n</div>\n\n<div class=\"position-relative\">\n <dialog #dropup>\n <ng-template [ngTemplateOutlet]=\"dropContent\"></ng-template>\n </dialog>\n</div>\n\n<div\n #dropGroup\n class=\"d-flex align-items-stretch\"\n role=\"group\"\n attr.aria-labelledby=\"select_{{id}}\"\n >\n <button\n class=\"flex-1 br-start text-start\"\n type=\"button\"\n [class.active]=\"model().length > 0\"\n [class.invalid]=\"!ngControl.control?.invalid\"\n (click)=\"onClickGroup()\"\n (blur)=\"onTouched()\"\n >\n {{activeItemValues()}}\n </button>\n <button\n class=\"d-flex br-end d-flex align-items-center justify-content-center\"\n [class.invalid]=\"!ngControl.control?.invalid\"\n [disabled]=\"isDisabled()\"\n (click)=\"onClickGroup()\"\n (blur)=\"onTouched()\"\n >\n <icon\n size=\"1rem\"\n type=\"chevron\"\n [fill]=\"[null, 'current']\"\n fillRotate=\"90\"\n [stroke]=\"['current']\"\n [class.up]=\"dropup.open\"\n [class.down]=\"dropdown.open\"\n ></icon>\n </button>\n</div>\n\n<dialog #dropdown>\n <ng-template [ngTemplateOutlet]=\"dropContent\"></ng-template>\n</dialog>\n\n<ng-template #dropContent>\n <div class=\"card\">\n <div class=\"card-body\">\n <div class=\"d-flex gap-2 align-items-stretch\">\n <input\n [ngModel]=\"searchTerm()\"\n (ngModelChange)=\"onSearchChange($event)\"\n class=\"flex-1 br-start br-end\"\n />\n @if (isMultiple()) {\n <button\n type=\"button\"\n class=\"br-start br-end\"\n (click)=\"onClickSelectAll()\"\n >\n {{isSelectedAll() ? 'Deselect' : 'Select'}} All\n </button>\n }\n </div>\n </div>\n <div class=\"d-flex flex-column\">\n @for (item of filteredItems(); track item) {\n <button\n class=\"d-flex flex-1 align-items-center text-start gap-2\"\n [disabled]=\"isDisabled()\"\n [class.active]=\"model().includes(item.key)\"\n (click)=\"onClick(item)\"\n >\n <div\n class=\"jo-button {{isMultiple() ? 'br-20' : 'br-50'}}\"\n [class.active]=\"model().includes(item.key)\"\n [class.disabled]=\"isDisabled()\"\n [class.invalid]=\"ngControl.control?.invalid\"\n >\n @if (model().includes(item.key)) {\n <icon\n size=\"1rem\"\n [type]=\"isMultiple() ? 'check' : 'dot'\"\n [fill]=\"[null, 'current']\"\n fillRotate=\"90\"\n ></icon>\n }\n </div>\n {{item.value}}\n </button>\n }\n </div>\n </div>\n</ng-template>\n", 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: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[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: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: IconComponent, selector: "icon[type]", inputs: ["type", "fill", "fillRotate", "fillOpacity", "stroke", "strokeRotate", "spin"] }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
|
|
953
660
|
}
|
|
954
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
661
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: SelectComponent, decorators: [{
|
|
955
662
|
type: Component,
|
|
956
|
-
args: [{ selector: 'jo-select',
|
|
957
|
-
|
|
958
|
-
type:
|
|
959
|
-
|
|
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: [{
|
|
663
|
+
args: [{ selector: 'jo-select', changeDetection: ChangeDetectionStrategy.Eager, host: {
|
|
664
|
+
'[style.--dropHeightPx]': 'dropHeightPx()',
|
|
665
|
+
}, imports: [FormsModule, NgTemplateOutlet, IconComponent], template: "<div class=\"d-flex justify-content-between\">\n <label\n id=\"select_{{id}}\"\n [class.required]=\"required()\"\n >\n <ng-content></ng-content>\n </label>\n <div>\n <ng-content select=\"[rightAligned]\"></ng-content>\n </div>\n</div>\n\n<div class=\"position-relative\">\n <dialog #dropup>\n <ng-template [ngTemplateOutlet]=\"dropContent\"></ng-template>\n </dialog>\n</div>\n\n<div\n #dropGroup\n class=\"d-flex align-items-stretch\"\n role=\"group\"\n attr.aria-labelledby=\"select_{{id}}\"\n >\n <button\n class=\"flex-1 br-start text-start\"\n type=\"button\"\n [class.active]=\"model().length > 0\"\n [class.invalid]=\"!ngControl.control?.invalid\"\n (click)=\"onClickGroup()\"\n (blur)=\"onTouched()\"\n >\n {{activeItemValues()}}\n </button>\n <button\n class=\"d-flex br-end d-flex align-items-center justify-content-center\"\n [class.invalid]=\"!ngControl.control?.invalid\"\n [disabled]=\"isDisabled()\"\n (click)=\"onClickGroup()\"\n (blur)=\"onTouched()\"\n >\n <icon\n size=\"1rem\"\n type=\"chevron\"\n [fill]=\"[null, 'current']\"\n fillRotate=\"90\"\n [stroke]=\"['current']\"\n [class.up]=\"dropup.open\"\n [class.down]=\"dropdown.open\"\n ></icon>\n </button>\n</div>\n\n<dialog #dropdown>\n <ng-template [ngTemplateOutlet]=\"dropContent\"></ng-template>\n</dialog>\n\n<ng-template #dropContent>\n <div class=\"card\">\n <div class=\"card-body\">\n <div class=\"d-flex gap-2 align-items-stretch\">\n <input\n [ngModel]=\"searchTerm()\"\n (ngModelChange)=\"onSearchChange($event)\"\n class=\"flex-1 br-start br-end\"\n />\n @if (isMultiple()) {\n <button\n type=\"button\"\n class=\"br-start br-end\"\n (click)=\"onClickSelectAll()\"\n >\n {{isSelectedAll() ? 'Deselect' : 'Select'}} All\n </button>\n }\n </div>\n </div>\n <div class=\"d-flex flex-column\">\n @for (item of filteredItems(); track item) {\n <button\n class=\"d-flex flex-1 align-items-center text-start gap-2\"\n [disabled]=\"isDisabled()\"\n [class.active]=\"model().includes(item.key)\"\n (click)=\"onClick(item)\"\n >\n <div\n class=\"jo-button {{isMultiple() ? 'br-20' : 'br-50'}}\"\n [class.active]=\"model().includes(item.key)\"\n [class.disabled]=\"isDisabled()\"\n [class.invalid]=\"ngControl.control?.invalid\"\n >\n @if (model().includes(item.key)) {\n <icon\n size=\"1rem\"\n [type]=\"isMultiple() ? 'check' : 'dot'\"\n [fill]=\"[null, 'current']\"\n fillRotate=\"90\"\n ></icon>\n }\n </div>\n {{item.value}}\n </button>\n }\n </div>\n </div>\n</ng-template>\n", 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"] }]
|
|
666
|
+
}], propDecorators: { dropGroup: [{ type: i0.ViewChild, args: ['dropGroup', { isSignal: true }] }], dropup: [{ type: i0.ViewChild, args: ['dropup', { isSignal: true }] }], dropdown: [{ type: i0.ViewChild, args: ['dropdown', { isSignal: true }] }], dropHeightPx: [{ type: i0.Input, args: [{ isSignal: true, alias: "dropHeightPx", required: false }] }], onGlobalClick: [{
|
|
974
667
|
type: HostListener,
|
|
975
668
|
args: ['document:mousedown', ['$event']]
|
|
976
669
|
}] } });
|
|
977
670
|
|
|
978
|
-
|
|
979
|
-
|
|
980
|
-
|
|
981
|
-
|
|
982
|
-
|
|
983
|
-
|
|
984
|
-
|
|
985
|
-
throw new Error('[placeholder] expects: string');
|
|
986
|
-
this._placeholder = value;
|
|
987
|
-
}
|
|
988
|
-
get minLength() {
|
|
989
|
-
return this._minLength;
|
|
990
|
-
}
|
|
991
|
-
set minLength(value) {
|
|
992
|
-
if (typeof value === 'string')
|
|
993
|
-
value = parseInt(value, 10);
|
|
994
|
-
if (value === undefined)
|
|
995
|
-
value = null;
|
|
996
|
-
if (!isNumber(value) || value < 0 || !Number.isInteger(value) || value === null)
|
|
997
|
-
throw new Error('[minLength] expects: positive integer');
|
|
998
|
-
this._minLength = value;
|
|
999
|
-
this.validation.next();
|
|
1000
|
-
}
|
|
1001
|
-
get maxLength() {
|
|
1002
|
-
return this._maxLength;
|
|
1003
|
-
}
|
|
1004
|
-
set maxLength(value) {
|
|
671
|
+
function toPlaceholder(value) {
|
|
672
|
+
if (typeof value !== 'string')
|
|
673
|
+
throw new Error('[placeholder] expects: string');
|
|
674
|
+
return value;
|
|
675
|
+
}
|
|
676
|
+
function toLength(label) {
|
|
677
|
+
return (value) => {
|
|
1005
678
|
if (typeof value === 'string')
|
|
1006
679
|
value = parseInt(value, 10);
|
|
1007
680
|
if (value === undefined)
|
|
1008
681
|
value = null;
|
|
1009
682
|
if (!isNumber(value) || value < 0 || !Number.isInteger(value) || value === null)
|
|
1010
|
-
throw new Error(
|
|
1011
|
-
|
|
1012
|
-
|
|
1013
|
-
|
|
1014
|
-
|
|
1015
|
-
|
|
1016
|
-
value = true;
|
|
1017
|
-
if (value == null)
|
|
1018
|
-
value = false;
|
|
1019
|
-
if (typeof value !== 'boolean')
|
|
1020
|
-
throw new Error('[isGrow] expects: boolean');
|
|
1021
|
-
this._isGrow = value;
|
|
1022
|
-
}
|
|
1023
|
-
get model() {
|
|
1024
|
-
return this._model;
|
|
1025
|
-
}
|
|
1026
|
-
set model(value) {
|
|
1027
|
-
if (value === '')
|
|
1028
|
-
value = null;
|
|
1029
|
-
this._model = value;
|
|
1030
|
-
this.onChange(this._model);
|
|
1031
|
-
setTimeout(() => this.setTextareaHeight());
|
|
1032
|
-
}
|
|
1033
|
-
constructor(ngControl, renderer) {
|
|
683
|
+
throw new Error(`[${label}] expects: positive integer`);
|
|
684
|
+
return value;
|
|
685
|
+
};
|
|
686
|
+
}
|
|
687
|
+
class TextComponent extends ControlDirective {
|
|
688
|
+
constructor() {
|
|
1034
689
|
super();
|
|
1035
|
-
this.ngControl =
|
|
1036
|
-
this.renderer =
|
|
1037
|
-
this.
|
|
1038
|
-
this.
|
|
1039
|
-
this.
|
|
1040
|
-
this.isSpellCheck = false;
|
|
1041
|
-
this.
|
|
1042
|
-
this.rows = 3
|
|
1043
|
-
|
|
1044
|
-
this.
|
|
1045
|
-
this.
|
|
690
|
+
this.ngControl = inject(NgControl, { self: true });
|
|
691
|
+
this.renderer = inject(Renderer2);
|
|
692
|
+
this.placeholder = input('', { ...(ngDevMode ? { debugName: "placeholder" } : /* istanbul ignore next */ {}), transform: toPlaceholder });
|
|
693
|
+
this.minLength = input(null, { ...(ngDevMode ? { debugName: "minLength" } : /* istanbul ignore next */ {}), transform: toLength('minLength') });
|
|
694
|
+
this.maxLength = input(null, { ...(ngDevMode ? { debugName: "maxLength" } : /* istanbul ignore next */ {}), transform: toLength('maxLength') });
|
|
695
|
+
this.isSpellCheck = input(false, { ...(ngDevMode ? { debugName: "isSpellCheck" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
696
|
+
this.isGrow = input(false, { ...(ngDevMode ? { debugName: "isGrow" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
697
|
+
this.rows = input(3, /* @ts-ignore */
|
|
698
|
+
...(ngDevMode ? [{ debugName: "rows" }] : /* istanbul ignore next */ []));
|
|
699
|
+
this.onBlur = output();
|
|
700
|
+
this.onFocus = output();
|
|
701
|
+
this.textareaElement = viewChild('textarea', /* @ts-ignore */
|
|
702
|
+
...(ngDevMode ? [{ debugName: "textareaElement" }] : /* istanbul ignore next */ []));
|
|
703
|
+
this.textareaHiddenElement = viewChild('textareaHidden', /* @ts-ignore */
|
|
704
|
+
...(ngDevMode ? [{ debugName: "textareaHiddenElement" }] : /* istanbul ignore next */ []));
|
|
705
|
+
this.model = signal(null, /* @ts-ignore */
|
|
706
|
+
...(ngDevMode ? [{ debugName: "model" }] : /* istanbul ignore next */ []));
|
|
1046
707
|
this.id = `_${Math.random().toString(36).substring(2, 11)}`;
|
|
1047
708
|
this.resizeSubject = new Subject();
|
|
1048
|
-
this.
|
|
1049
|
-
ngControl.valueAccessor = this;
|
|
709
|
+
this.ngControl.valueAccessor = this;
|
|
1050
710
|
this.resizeSubject
|
|
1051
711
|
.pipe(debounceTime(300))
|
|
1052
|
-
.subscribe(() => this.
|
|
712
|
+
.subscribe(() => this.isGrow() && this.setTextareaHeight());
|
|
713
|
+
effect(() => {
|
|
714
|
+
this.minLength();
|
|
715
|
+
this.maxLength();
|
|
716
|
+
this.required();
|
|
717
|
+
this.validate();
|
|
718
|
+
});
|
|
1053
719
|
}
|
|
1054
720
|
ngOnDestroy() {
|
|
1055
|
-
super.ngOnDestroy();
|
|
1056
721
|
this.resizeSubject.complete();
|
|
1057
722
|
}
|
|
1058
723
|
onWindowResize() {
|
|
1059
724
|
this.resizeSubject.next();
|
|
1060
725
|
}
|
|
1061
726
|
setTextareaHeight() {
|
|
1062
|
-
|
|
727
|
+
const textareaRef = this.textareaElement();
|
|
728
|
+
const textareaHiddenRef = this.textareaHiddenElement();
|
|
729
|
+
if (!textareaRef || !textareaHiddenRef)
|
|
1063
730
|
return;
|
|
1064
|
-
const textarea =
|
|
1065
|
-
const textareaHidden =
|
|
731
|
+
const textarea = textareaRef.nativeElement;
|
|
732
|
+
const textareaHidden = textareaHiddenRef.nativeElement;
|
|
1066
733
|
this.renderer.setStyle(textareaHidden, 'width', `calc(${textarea.scrollWidth}px - 1em)`);
|
|
1067
734
|
this.renderer.setStyle(textareaHidden, 'height', 'auto');
|
|
1068
735
|
this.renderer.setStyle(textarea, 'height', `${textareaHidden.scrollHeight}px`);
|
|
1069
736
|
}
|
|
737
|
+
onModelChange(value) {
|
|
738
|
+
this.setModel(value);
|
|
739
|
+
}
|
|
740
|
+
setModel(value) {
|
|
741
|
+
if (value === '')
|
|
742
|
+
value = null;
|
|
743
|
+
this.model.set(value);
|
|
744
|
+
this.onChange(value);
|
|
745
|
+
setTimeout(() => this.setTextareaHeight());
|
|
746
|
+
}
|
|
1070
747
|
onChange(_model) { }
|
|
1071
748
|
registerOnChange(fn) {
|
|
1072
749
|
this.onChange = fn;
|
|
@@ -1078,74 +755,61 @@ class TextComponent extends ControlDirective {
|
|
|
1078
755
|
if (isNumber(value))
|
|
1079
756
|
value = value.toString();
|
|
1080
757
|
if (value === null || typeof value === 'string') {
|
|
1081
|
-
this.
|
|
758
|
+
this.model.set(value);
|
|
1082
759
|
setTimeout(() => this.setTextareaHeight());
|
|
1083
760
|
}
|
|
1084
761
|
}
|
|
1085
762
|
validate() {
|
|
1086
763
|
const validators = [];
|
|
1087
|
-
|
|
1088
|
-
|
|
1089
|
-
|
|
1090
|
-
|
|
1091
|
-
if (
|
|
764
|
+
const minLength = this.minLength();
|
|
765
|
+
if (minLength != null)
|
|
766
|
+
validators.push(Validators.minLength(minLength));
|
|
767
|
+
const maxLength = this.maxLength();
|
|
768
|
+
if (maxLength != null)
|
|
769
|
+
validators.push(Validators.maxLength(maxLength));
|
|
770
|
+
if (this.required() === true)
|
|
1092
771
|
validators.push(Validators.required);
|
|
1093
772
|
this.ngControl.control?.setValidators(validators);
|
|
1094
773
|
this.ngControl.control?.updateValueAndValidity();
|
|
1095
774
|
}
|
|
1096
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1097
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
775
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: TextComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
776
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.2", type: TextComponent, isStandalone: true, selector: "jo-text", inputs: { placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, minLength: { classPropertyName: "minLength", publicName: "minLength", isSignal: true, isRequired: false, transformFunction: null }, maxLength: { classPropertyName: "maxLength", publicName: "maxLength", isSignal: true, isRequired: false, transformFunction: null }, isSpellCheck: { classPropertyName: "isSpellCheck", publicName: "isSpellCheck", isSignal: true, isRequired: false, transformFunction: null }, isGrow: { classPropertyName: "isGrow", publicName: "isGrow", isSignal: true, isRequired: false, transformFunction: null }, rows: { classPropertyName: "rows", publicName: "rows", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onBlur: "onBlur", onFocus: "onFocus" }, host: { listeners: { "window:resize": "onWindowResize()" } }, viewQueries: [{ propertyName: "textareaElement", first: true, predicate: ["textarea"], descendants: true, isSignal: true }, { propertyName: "textareaHiddenElement", first: true, predicate: ["textareaHidden"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<label\n [for]=\"id\"\n [class.required]=\"required()\"\n >\n <ng-content></ng-content>\n</label>\n\n<div class=\"d-flex\">\n @if (!isGrow()) {\n <input\n type=\"text\"\n [ngModel]=\"model()\"\n (ngModelChange)=\"onModelChange($event)\"\n [class.br-end]=\"borderRadiusRight()\"\n [class.br-start]=\"borderRadiusLeft()\"\n class=\"flex-1\"\n [minlength]=\"minLength()\"\n [maxlength]=\"maxLength()\"\n [class.active]=\"model() !== null\"\n [class.invalid]=\"ngControl.control?.invalid\"\n [disabled]=\"isDisabled()\"\n [id]=\"id\"\n [spellcheck]=\"isSpellCheck()\"\n [placeholder]=\"placeholder()\"\n (blur)=\"onTouched(); onBlur.emit($event)\"\n (focus)=\"onFocus.emit($event)\"\n />\n }\n @if (isGrow()) {\n <textarea\n #textarea\n [ngModel]=\"model()\"\n (ngModelChange)=\"onModelChange($event)\"\n [class.br-end]=\"borderRadiusRight()\"\n [class.br-start]=\"borderRadiusLeft()\"\n class=\"flex-1\"\n [rows]=\"rows()\"\n [minlength]=\"minLength()\"\n [maxlength]=\"maxLength()\"\n [class.active]=\"model() !== null\"\n [class.invalid]=\"ngControl.control?.invalid\"\n [disabled]=\"isDisabled()\"\n [id]=\"id\"\n [spellcheck]=\"isSpellCheck()\"\n [placeholder]=\"placeholder()\"\n (blur)=\"onTouched(); onBlur.emit($event)\"\n (focus)=\"onFocus.emit($event)\"\n ></textarea>\n }\n</div>\n\n@if (isGrow()) {\n <div\n class=\"d-flex\"\n >\n <textarea\n #textareaHidden\n [ngModel]=\"model()\"\n class=\"hidden flex-1\"\n [rows]=\"rows()\"\n ></textarea>\n </div>\n}\n\n<!-- <ul *ngIf=\"ngControl.control?.errors\">\n<li *ngIf=\"ngControl.control?.errors?.['minlength']\">\n minimum length is {{minLength()}}\n</li>\n<li *ngIf=\"ngControl.control?.errors?.['maxLength']\">\n maximum length is {{maxLength()}}\n</li>\n</ul> -->\n", 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: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[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"] }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
|
|
1098
777
|
}
|
|
1099
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
778
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: TextComponent, decorators: [{
|
|
1100
779
|
type: Component,
|
|
1101
|
-
args: [{ selector: 'jo-text', template: "<label\
|
|
1102
|
-
}], ctorParameters: () => [{ type:
|
|
1103
|
-
type: Self
|
|
1104
|
-
}] }, { type: i0.Renderer2 }], propDecorators: { placeholder: [{
|
|
1105
|
-
type: Input
|
|
1106
|
-
}], minLength: [{
|
|
1107
|
-
type: Input
|
|
1108
|
-
}], maxLength: [{
|
|
1109
|
-
type: Input
|
|
1110
|
-
}], isSpellCheck: [{
|
|
1111
|
-
type: Input
|
|
1112
|
-
}], isGrow: [{
|
|
1113
|
-
type: Input
|
|
1114
|
-
}], rows: [{
|
|
1115
|
-
type: Input
|
|
1116
|
-
}], onBlur: [{
|
|
1117
|
-
type: Output
|
|
1118
|
-
}], onFocus: [{
|
|
1119
|
-
type: Output
|
|
1120
|
-
}], textareaElement: [{
|
|
1121
|
-
type: ViewChild,
|
|
1122
|
-
args: ['textarea']
|
|
1123
|
-
}], textareaHiddenElement: [{
|
|
1124
|
-
type: ViewChild,
|
|
1125
|
-
args: ['textareaHidden']
|
|
1126
|
-
}], onWindowResize: [{
|
|
780
|
+
args: [{ selector: 'jo-text', changeDetection: ChangeDetectionStrategy.Eager, imports: [FormsModule], template: "<label\n [for]=\"id\"\n [class.required]=\"required()\"\n >\n <ng-content></ng-content>\n</label>\n\n<div class=\"d-flex\">\n @if (!isGrow()) {\n <input\n type=\"text\"\n [ngModel]=\"model()\"\n (ngModelChange)=\"onModelChange($event)\"\n [class.br-end]=\"borderRadiusRight()\"\n [class.br-start]=\"borderRadiusLeft()\"\n class=\"flex-1\"\n [minlength]=\"minLength()\"\n [maxlength]=\"maxLength()\"\n [class.active]=\"model() !== null\"\n [class.invalid]=\"ngControl.control?.invalid\"\n [disabled]=\"isDisabled()\"\n [id]=\"id\"\n [spellcheck]=\"isSpellCheck()\"\n [placeholder]=\"placeholder()\"\n (blur)=\"onTouched(); onBlur.emit($event)\"\n (focus)=\"onFocus.emit($event)\"\n />\n }\n @if (isGrow()) {\n <textarea\n #textarea\n [ngModel]=\"model()\"\n (ngModelChange)=\"onModelChange($event)\"\n [class.br-end]=\"borderRadiusRight()\"\n [class.br-start]=\"borderRadiusLeft()\"\n class=\"flex-1\"\n [rows]=\"rows()\"\n [minlength]=\"minLength()\"\n [maxlength]=\"maxLength()\"\n [class.active]=\"model() !== null\"\n [class.invalid]=\"ngControl.control?.invalid\"\n [disabled]=\"isDisabled()\"\n [id]=\"id\"\n [spellcheck]=\"isSpellCheck()\"\n [placeholder]=\"placeholder()\"\n (blur)=\"onTouched(); onBlur.emit($event)\"\n (focus)=\"onFocus.emit($event)\"\n ></textarea>\n }\n</div>\n\n@if (isGrow()) {\n <div\n class=\"d-flex\"\n >\n <textarea\n #textareaHidden\n [ngModel]=\"model()\"\n class=\"hidden flex-1\"\n [rows]=\"rows()\"\n ></textarea>\n </div>\n}\n\n<!-- <ul *ngIf=\"ngControl.control?.errors\">\n<li *ngIf=\"ngControl.control?.errors?.['minlength']\">\n minimum length is {{minLength()}}\n</li>\n<li *ngIf=\"ngControl.control?.errors?.['maxLength']\">\n maximum length is {{maxLength()}}\n</li>\n</ul> -->\n", 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"] }]
|
|
781
|
+
}], ctorParameters: () => [], propDecorators: { placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], minLength: [{ type: i0.Input, args: [{ isSignal: true, alias: "minLength", required: false }] }], maxLength: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxLength", required: false }] }], isSpellCheck: [{ type: i0.Input, args: [{ isSignal: true, alias: "isSpellCheck", required: false }] }], isGrow: [{ type: i0.Input, args: [{ isSignal: true, alias: "isGrow", required: false }] }], rows: [{ type: i0.Input, args: [{ isSignal: true, alias: "rows", required: false }] }], onBlur: [{ type: i0.Output, args: ["onBlur"] }], onFocus: [{ type: i0.Output, args: ["onFocus"] }], textareaElement: [{ type: i0.ViewChild, args: ['textarea', { isSignal: true }] }], textareaHiddenElement: [{ type: i0.ViewChild, args: ['textareaHidden', { isSignal: true }] }], onWindowResize: [{
|
|
1127
782
|
type: HostListener,
|
|
1128
783
|
args: ['window:resize']
|
|
1129
784
|
}] } });
|
|
1130
785
|
|
|
786
|
+
// The components and directives are standalone; this module is kept purely as a
|
|
787
|
+
// convenience aggregator so existing consumers can keep importing
|
|
788
|
+
// `ChaosControlModule`. New consumers can import the standalone pieces directly.
|
|
789
|
+
const PUBLIC_DECLARABLES = [
|
|
790
|
+
ReadonlyComponent,
|
|
791
|
+
ChoiceComponent,
|
|
792
|
+
ColorComponent,
|
|
793
|
+
FileComponent,
|
|
794
|
+
NumberComponent,
|
|
795
|
+
TextComponent,
|
|
796
|
+
SelectComponent,
|
|
797
|
+
BusyDirective,
|
|
798
|
+
IconComponent,
|
|
799
|
+
IconStackComponent,
|
|
800
|
+
];
|
|
1131
801
|
class ChaosControlModule {
|
|
1132
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1133
|
-
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "
|
|
802
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: ChaosControlModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
|
|
803
|
+
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.0.2", ngImport: i0, type: ChaosControlModule, imports: [ReadonlyComponent,
|
|
1134
804
|
ChoiceComponent,
|
|
1135
805
|
ColorComponent,
|
|
1136
806
|
FileComponent,
|
|
1137
807
|
NumberComponent,
|
|
1138
808
|
TextComponent,
|
|
1139
|
-
ControlDirective,
|
|
1140
|
-
ItemDirective,
|
|
1141
809
|
SelectComponent,
|
|
1142
|
-
BorderRadiusDirective,
|
|
1143
810
|
BusyDirective,
|
|
1144
811
|
IconComponent,
|
|
1145
|
-
IconStackComponent,
|
|
1146
|
-
SizeDirective], imports: [CommonModule,
|
|
1147
|
-
FormsModule,
|
|
1148
|
-
RouterModule], exports: [ReadonlyComponent,
|
|
812
|
+
IconStackComponent], exports: [ReadonlyComponent,
|
|
1149
813
|
ChoiceComponent,
|
|
1150
814
|
ColorComponent,
|
|
1151
815
|
FileComponent,
|
|
@@ -1155,55 +819,29 @@ class ChaosControlModule {
|
|
|
1155
819
|
BusyDirective,
|
|
1156
820
|
IconComponent,
|
|
1157
821
|
IconStackComponent] }); }
|
|
1158
|
-
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "
|
|
1159
|
-
|
|
1160
|
-
|
|
822
|
+
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: ChaosControlModule, imports: [ChoiceComponent,
|
|
823
|
+
ColorComponent,
|
|
824
|
+
FileComponent,
|
|
825
|
+
NumberComponent,
|
|
826
|
+
TextComponent,
|
|
827
|
+
SelectComponent,
|
|
828
|
+
IconComponent,
|
|
829
|
+
IconStackComponent] }); }
|
|
1161
830
|
}
|
|
1162
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
831
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: ChaosControlModule, decorators: [{
|
|
1163
832
|
type: NgModule,
|
|
1164
833
|
args: [{
|
|
1165
|
-
|
|
1166
|
-
|
|
1167
|
-
ChoiceComponent,
|
|
1168
|
-
ColorComponent,
|
|
1169
|
-
FileComponent,
|
|
1170
|
-
NumberComponent,
|
|
1171
|
-
TextComponent,
|
|
1172
|
-
ControlDirective,
|
|
1173
|
-
ItemDirective,
|
|
1174
|
-
SelectComponent,
|
|
1175
|
-
BorderRadiusDirective,
|
|
1176
|
-
BusyDirective,
|
|
1177
|
-
IconComponent,
|
|
1178
|
-
IconStackComponent,
|
|
1179
|
-
SizeDirective,
|
|
1180
|
-
],
|
|
1181
|
-
imports: [
|
|
1182
|
-
CommonModule,
|
|
1183
|
-
FormsModule,
|
|
1184
|
-
RouterModule,
|
|
1185
|
-
],
|
|
1186
|
-
exports: [
|
|
1187
|
-
ReadonlyComponent,
|
|
1188
|
-
ChoiceComponent,
|
|
1189
|
-
ColorComponent,
|
|
1190
|
-
FileComponent,
|
|
1191
|
-
NumberComponent,
|
|
1192
|
-
TextComponent,
|
|
1193
|
-
SelectComponent,
|
|
1194
|
-
BusyDirective,
|
|
1195
|
-
IconComponent,
|
|
1196
|
-
IconStackComponent,
|
|
1197
|
-
]
|
|
834
|
+
imports: PUBLIC_DECLARABLES,
|
|
835
|
+
exports: PUBLIC_DECLARABLES,
|
|
1198
836
|
}]
|
|
1199
837
|
}] });
|
|
1200
838
|
|
|
1201
839
|
class ChaosControlService {
|
|
1202
840
|
constructor() { }
|
|
1203
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1204
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "
|
|
841
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: ChaosControlService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
842
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: ChaosControlService, providedIn: 'root' }); }
|
|
1205
843
|
}
|
|
1206
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
844
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: ChaosControlService, decorators: [{
|
|
1207
845
|
type: Injectable,
|
|
1208
846
|
args: [{
|
|
1209
847
|
providedIn: 'root'
|
|
@@ -1216,5 +854,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.5", ngImpor
|
|
|
1216
854
|
* Generated bundle index. Do not edit.
|
|
1217
855
|
*/
|
|
1218
856
|
|
|
1219
|
-
export { BorderRadiusDirective, BusyComponent, BusyDirective, ChaosControlModule, ChaosControlService, ChoiceComponent, ColorComponent, ControlDirective, FileComponent,
|
|
857
|
+
export { BorderRadiusDirective, BusyComponent, BusyDirective, ChaosControlModule, ChaosControlService, ChoiceComponent, ColorComponent, ControlDirective, FileComponent, ItemDirective, NumberComponent, ReadonlyComponent, SelectComponent, SizeDirective, TextComponent, isItem, isItems, isNumber, isPrimitive };
|
|
1220
858
|
//# sourceMappingURL=joster-dev-chaos-control.mjs.map
|