@joster-dev/chaos-control 0.1.1 → 0.1.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/esm2022/lib/components/choice/choice.component.mjs +3 -3
- package/esm2022/lib/components/color/color.component.mjs +3 -3
- package/esm2022/lib/components/file/file.component.mjs +3 -3
- package/esm2022/lib/components/number/number.component.mjs +3 -3
- package/esm2022/lib/components/readonly/readonly.component.mjs +3 -3
- package/esm2022/lib/components/select/select.component.mjs +53 -24
- package/esm2022/lib/components/text/text.component.mjs +3 -3
- package/esm2022/lib/directives/item.directive.mjs +3 -1
- package/fesm2022/joster-dev-chaos-control.mjs +66 -34
- package/fesm2022/joster-dev-chaos-control.mjs.map +1 -1
- package/lib/components/select/select.component.d.ts +12 -7
- package/lib/directives/item.directive.d.ts +1 -0
- package/package.json +3 -2
- package/src/lib/styles.scss +7 -62
- package/src/lib/atomic.scss +0 -87
- package/src/lib/variables.scss +0 -3
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import * as i2 from '@angular/common';
|
|
2
2
|
import { CommonModule } from '@angular/common';
|
|
3
3
|
import * as i0 from '@angular/core';
|
|
4
|
-
import { Directive, Input, Self, Component, EventEmitter, Output, ViewChild, HostListener, NgModule, Injectable } from '@angular/core';
|
|
4
|
+
import { Directive, Input, Self, Component, EventEmitter, Output, ViewChild, HostListener, HostBinding, NgModule, Injectable } from '@angular/core';
|
|
5
5
|
import * as i1 from '@angular/forms';
|
|
6
6
|
import { Validators, FormsModule } from '@angular/forms';
|
|
7
7
|
import { RouterModule } from '@angular/router';
|
|
@@ -121,6 +121,7 @@ class ItemDirective extends ControlDirective {
|
|
|
121
121
|
if (!isItems(value))
|
|
122
122
|
throw new Error('[items] expects: { key: boolean | number | string, value: string }[]');
|
|
123
123
|
this._items = value;
|
|
124
|
+
this.filteredItems = value;
|
|
124
125
|
this.validation.next();
|
|
125
126
|
}
|
|
126
127
|
get limit() {
|
|
@@ -158,6 +159,7 @@ class ItemDirective extends ControlDirective {
|
|
|
158
159
|
super();
|
|
159
160
|
this.ngControl = ngControl;
|
|
160
161
|
this._items = [];
|
|
162
|
+
this.filteredItems = [];
|
|
161
163
|
this._limit = 0;
|
|
162
164
|
this._isMultiple = false;
|
|
163
165
|
this._model = [];
|
|
@@ -256,11 +258,11 @@ class ChoiceComponent extends ItemDirective {
|
|
|
256
258
|
this.model = [...this._model, item.key];
|
|
257
259
|
}
|
|
258
260
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: ChoiceComponent, deps: [{ token: i1.NgControl, self: true }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
259
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.5", type: ChoiceComponent, selector: "jo-choice", inputs: { isColumn: "isColumn" }, usesInheritance: true, ngImport: i0, template: "<div class=\"d-flex justify-content-between\">\r\n <label\r\n id=\"choice_{{id}}\"\r\n [class.required]=\"required\"\r\n >\r\n <ng-content></ng-content>\r\n </label>\r\n <div>\r\n <ng-content select=\"[rightAligned]\"></ng-content>\r\n </div>\r\n</div>\r\n\r\n<div\r\n class=\"d-flex flex-wrap align-items-start\"\r\n role=\"group\"\r\n attr.aria-labelledby=\"choice_{{id}}\"\r\n [class.flex-column]=\"isColumn\"\r\n>\r\n <button\r\n *ngFor=\"let item of items; let idx = index\"\r\n type=\"button\"\r\n class=\"d-flex align-items-center text-
|
|
261
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.5", type: ChoiceComponent, selector: "jo-choice", inputs: { isColumn: "isColumn" }, usesInheritance: true, ngImport: i0, template: "<div class=\"d-flex justify-content-between\">\r\n <label\r\n id=\"choice_{{id}}\"\r\n [class.required]=\"required\"\r\n >\r\n <ng-content></ng-content>\r\n </label>\r\n <div>\r\n <ng-content select=\"[rightAligned]\"></ng-content>\r\n </div>\r\n</div>\r\n\r\n<div\r\n class=\"d-flex flex-wrap align-items-start\"\r\n role=\"group\"\r\n attr.aria-labelledby=\"choice_{{id}}\"\r\n [class.flex-column]=\"isColumn\"\r\n>\r\n <button\r\n *ngFor=\"let item of items; let idx = index\"\r\n type=\"button\"\r\n class=\"d-flex align-items-center gap-2 text-start\"\r\n role=\"menuitemcheckbox\"\r\n [class.br-end]=\"borderRadiusRight\"\r\n [class.br-start]=\"borderRadiusLeft\"\r\n [disabled]=\"isDisabled\"\r\n (click)=\"onClick(item)\"\r\n (blur)=\"onTouched()\"\r\n >\r\n <div\r\n class=\"jo-button {{isMultiple ? 'br-20' : 'br-50'}}\"\r\n [class.active]=\"_model.includes(item.key)\"\r\n [class.disabled]=\"isDisabled\"\r\n [class.invalid]=\"ngControl.control?.invalid\"\r\n >\r\n <icon\r\n *ngIf=\"_model.includes(item.key)\"\r\n size=\"1rem\"\r\n [type]=\"isMultiple ? 'check' : 'dot'\"\r\n [fill]=\"[null, 'current']\"\r\n fillRotate=\"90\"\r\n ></icon>\r\n </div>\r\n <span>{{item.value}}</span>\r\n </button>\r\n</div>\r\n\r\n<!-- <ul *ngIf=\"ngControl.control?.errors\">\r\n <li *ngIf=\"ngControl.control?.errors?.['invalid']\">\r\n invalid model\r\n </li>\r\n</ul> -->", styles: [":host{display:block}:host>.d-flex>button{border-color:transparent;border-width:.075em}:host>.d-flex>button>.jo-button{position:relative;text-align:left}:host>.d-flex>button>.jo-button>icon{position:absolute;top:0;left:0}.br-20{border-radius:20%}.br-50{border-radius:50%}\n", "body{font-family:Arial;margin:0}h1,h2,h3,h4,h5,h6{margin:0}a:not(.jo-ignore),button:not(.jo-ignore),.jo-button,input,textarea{color:inherit;background:transparent;border-width:.15rem;border-style:outset;border-color:currentColor;padding:.5rem;margin:0;font-size:1rem;line-height:1rem;font-family:inherit}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}label{display:block;padding-bottom:.5rem;font-weight:700}label:empty{display:none}label.required:after{content:\"*\"}ul{list-style:none;margin:0;padding:0}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.IconComponent, selector: "icon[type]", inputs: ["type", "fill", "fillRotate", "fillOpacity", "stroke", "strokeRotate", "spin"] }] }); }
|
|
260
262
|
}
|
|
261
263
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: ChoiceComponent, decorators: [{
|
|
262
264
|
type: Component,
|
|
263
|
-
args: [{ selector: 'jo-choice', template: "<div class=\"d-flex justify-content-between\">\r\n <label\r\n id=\"choice_{{id}}\"\r\n [class.required]=\"required\"\r\n >\r\n <ng-content></ng-content>\r\n </label>\r\n <div>\r\n <ng-content select=\"[rightAligned]\"></ng-content>\r\n </div>\r\n</div>\r\n\r\n<div\r\n class=\"d-flex flex-wrap align-items-start\"\r\n role=\"group\"\r\n attr.aria-labelledby=\"choice_{{id}}\"\r\n [class.flex-column]=\"isColumn\"\r\n>\r\n <button\r\n *ngFor=\"let item of items; let idx = index\"\r\n type=\"button\"\r\n class=\"d-flex align-items-center text-
|
|
265
|
+
args: [{ selector: 'jo-choice', template: "<div class=\"d-flex justify-content-between\">\r\n <label\r\n id=\"choice_{{id}}\"\r\n [class.required]=\"required\"\r\n >\r\n <ng-content></ng-content>\r\n </label>\r\n <div>\r\n <ng-content select=\"[rightAligned]\"></ng-content>\r\n </div>\r\n</div>\r\n\r\n<div\r\n class=\"d-flex flex-wrap align-items-start\"\r\n role=\"group\"\r\n attr.aria-labelledby=\"choice_{{id}}\"\r\n [class.flex-column]=\"isColumn\"\r\n>\r\n <button\r\n *ngFor=\"let item of items; let idx = index\"\r\n type=\"button\"\r\n class=\"d-flex align-items-center gap-2 text-start\"\r\n role=\"menuitemcheckbox\"\r\n [class.br-end]=\"borderRadiusRight\"\r\n [class.br-start]=\"borderRadiusLeft\"\r\n [disabled]=\"isDisabled\"\r\n (click)=\"onClick(item)\"\r\n (blur)=\"onTouched()\"\r\n >\r\n <div\r\n class=\"jo-button {{isMultiple ? 'br-20' : 'br-50'}}\"\r\n [class.active]=\"_model.includes(item.key)\"\r\n [class.disabled]=\"isDisabled\"\r\n [class.invalid]=\"ngControl.control?.invalid\"\r\n >\r\n <icon\r\n *ngIf=\"_model.includes(item.key)\"\r\n size=\"1rem\"\r\n [type]=\"isMultiple ? 'check' : 'dot'\"\r\n [fill]=\"[null, 'current']\"\r\n fillRotate=\"90\"\r\n ></icon>\r\n </div>\r\n <span>{{item.value}}</span>\r\n </button>\r\n</div>\r\n\r\n<!-- <ul *ngIf=\"ngControl.control?.errors\">\r\n <li *ngIf=\"ngControl.control?.errors?.['invalid']\">\r\n invalid model\r\n </li>\r\n</ul> -->", styles: [":host{display:block}:host>.d-flex>button{border-color:transparent;border-width:.075em}:host>.d-flex>button>.jo-button{position:relative;text-align:left}:host>.d-flex>button>.jo-button>icon{position:absolute;top:0;left:0}.br-20{border-radius:20%}.br-50{border-radius:50%}\n", "body{font-family:Arial;margin:0}h1,h2,h3,h4,h5,h6{margin:0}a:not(.jo-ignore),button:not(.jo-ignore),.jo-button,input,textarea{color:inherit;background:transparent;border-width:.15rem;border-style:outset;border-color:currentColor;padding:.5rem;margin:0;font-size:1rem;line-height:1rem;font-family:inherit}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}label{display:block;padding-bottom:.5rem;font-weight:700}label:empty{display:none}label.required:after{content:\"*\"}ul{list-style:none;margin:0;padding:0}\n"] }]
|
|
264
266
|
}], ctorParameters: () => [{ type: i1.NgControl, decorators: [{
|
|
265
267
|
type: Self
|
|
266
268
|
}] }], propDecorators: { isColumn: [{
|
|
@@ -328,11 +330,11 @@ class ColorComponent extends ControlDirective {
|
|
|
328
330
|
this.ngControl.control?.updateValueAndValidity();
|
|
329
331
|
}
|
|
330
332
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: ColorComponent, deps: [{ token: i1.NgControl, self: true }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
331
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.5", type: ColorComponent, selector: "jo-color", usesInheritance: true, ngImport: i0, template: "<label\r\n [for]=\"id\"\r\n [class.required]=\"required\"\r\n>\r\n <ng-content></ng-content>\r\n</label>\r\n\r\n<div class=\"d-flex align-items-stretch\">\r\n <button\r\n class=\"d-flex align-items-center\"\r\n title=\"Color\"\r\n [class.
|
|
333
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.5", type: ColorComponent, selector: "jo-color", usesInheritance: true, ngImport: i0, template: "<label\r\n [for]=\"id\"\r\n [class.required]=\"required\"\r\n>\r\n <ng-content></ng-content>\r\n</label>\r\n\r\n<div class=\"d-flex align-items-stretch\">\r\n <button\r\n class=\"d-flex align-items-center\"\r\n title=\"Color\"\r\n [class.br-start]=\"borderRadiusLeft\"\r\n [disabled]=\"isDisabled\"\r\n (click)=\"colorInput.click()\"\r\n >\r\n <icon\r\n size=\"1rem\"\r\n type=\"square\"\r\n [fill]=\"fullHex.test(_model || '') ? _model : [null, 'current']\"\r\n fillRotate=\"90\"\r\n [stroke]=\"fullHex.test(_model || '') ? _model : ['current']\"\r\n ></icon>\r\n </button>\r\n <input\r\n [(ngModel)]=\"model\"\r\n spellcheck=\"false\"\r\n size=\"5\"\r\n type=\"text\"\r\n [class.active]=\"ngControl.control?.value !== null\"\r\n [class.br-end]=\"borderRadiusRight\"\r\n [class.invalid]=\"ngControl.control?.invalid\"\r\n [disabled]=\"isDisabled\"\r\n [id]=\"id\"\r\n (beforeinput)=\"onBeforeinput($event)\"\r\n (blur)=\"onTouched()\"\r\n />\r\n</div>\r\n\r\n<!-- <ul *ngIf=\"ngControl.control?.errors\">\r\n <li *ngIf=\"ngControl.control?.errors?.['invalid']\">\r\n invalid model\r\n </li>\r\n</ul> -->\r\n\r\n<input\r\n #colorInput\r\n type=\"color\"\r\n (change)=\"onChangeColor($event)\"\r\n/>", styles: [":host{display:block}input[type=color]{margin-top:-2em;padding:0;position:absolute;visibility:hidden;transition:none}:host>div>input{border-left:0}:host>div>button{border-right:0}\n", "body{font-family:Arial;margin:0}h1,h2,h3,h4,h5,h6{margin:0}a:not(.jo-ignore),button:not(.jo-ignore),.jo-button,input,textarea{color:inherit;background:transparent;border-width:.15rem;border-style:outset;border-color:currentColor;padding:.5rem;margin:0;font-size:1rem;line-height:1rem;font-family:inherit}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}label{display:block;padding-bottom:.5rem;font-weight:700}label:empty{display:none}label.required:after{content:\"*\"}ul{list-style:none;margin:0;padding:0}\n"], dependencies: [{ kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i3.IconComponent, selector: "icon[type]", inputs: ["type", "fill", "fillRotate", "fillOpacity", "stroke", "strokeRotate", "spin"] }] }); }
|
|
332
334
|
}
|
|
333
335
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: ColorComponent, decorators: [{
|
|
334
336
|
type: Component,
|
|
335
|
-
args: [{ selector: 'jo-color', template: "<label\r\n [for]=\"id\"\r\n [class.required]=\"required\"\r\n>\r\n <ng-content></ng-content>\r\n</label>\r\n\r\n<div class=\"d-flex align-items-stretch\">\r\n <button\r\n class=\"d-flex align-items-center\"\r\n title=\"Color\"\r\n [class.
|
|
337
|
+
args: [{ selector: 'jo-color', template: "<label\r\n [for]=\"id\"\r\n [class.required]=\"required\"\r\n>\r\n <ng-content></ng-content>\r\n</label>\r\n\r\n<div class=\"d-flex align-items-stretch\">\r\n <button\r\n class=\"d-flex align-items-center\"\r\n title=\"Color\"\r\n [class.br-start]=\"borderRadiusLeft\"\r\n [disabled]=\"isDisabled\"\r\n (click)=\"colorInput.click()\"\r\n >\r\n <icon\r\n size=\"1rem\"\r\n type=\"square\"\r\n [fill]=\"fullHex.test(_model || '') ? _model : [null, 'current']\"\r\n fillRotate=\"90\"\r\n [stroke]=\"fullHex.test(_model || '') ? _model : ['current']\"\r\n ></icon>\r\n </button>\r\n <input\r\n [(ngModel)]=\"model\"\r\n spellcheck=\"false\"\r\n size=\"5\"\r\n type=\"text\"\r\n [class.active]=\"ngControl.control?.value !== null\"\r\n [class.br-end]=\"borderRadiusRight\"\r\n [class.invalid]=\"ngControl.control?.invalid\"\r\n [disabled]=\"isDisabled\"\r\n [id]=\"id\"\r\n (beforeinput)=\"onBeforeinput($event)\"\r\n (blur)=\"onTouched()\"\r\n />\r\n</div>\r\n\r\n<!-- <ul *ngIf=\"ngControl.control?.errors\">\r\n <li *ngIf=\"ngControl.control?.errors?.['invalid']\">\r\n invalid model\r\n </li>\r\n</ul> -->\r\n\r\n<input\r\n #colorInput\r\n type=\"color\"\r\n (change)=\"onChangeColor($event)\"\r\n/>", styles: [":host{display:block}input[type=color]{margin-top:-2em;padding:0;position:absolute;visibility:hidden;transition:none}:host>div>input{border-left:0}:host>div>button{border-right:0}\n", "body{font-family:Arial;margin:0}h1,h2,h3,h4,h5,h6{margin:0}a:not(.jo-ignore),button:not(.jo-ignore),.jo-button,input,textarea{color:inherit;background:transparent;border-width:.15rem;border-style:outset;border-color:currentColor;padding:.5rem;margin:0;font-size:1rem;line-height:1rem;font-family:inherit}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}label{display:block;padding-bottom:.5rem;font-weight:700}label:empty{display:none}label.required:after{content:\"*\"}ul{list-style:none;margin:0;padding:0}\n"] }]
|
|
336
338
|
}], ctorParameters: () => [{ type: i1.NgControl, decorators: [{
|
|
337
339
|
type: Self
|
|
338
340
|
}] }] });
|
|
@@ -442,11 +444,11 @@ class FileComponent extends ControlDirective {
|
|
|
442
444
|
this.ngControl.control?.updateValueAndValidity();
|
|
443
445
|
}
|
|
444
446
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: FileComponent, deps: [{ token: i1.NgControl, self: true }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
445
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.5", type: FileComponent, selector: "jo-file", inputs: { acceptedTypes: "acceptedTypes", sizeLimitMb: "sizeLimitMb", multiple: "multiple", showSize: "showSize" }, usesInheritance: true, ngImport: i0, template: "<label [class.required]=\"required\">\r\n <ng-content></ng-content>\r\n</label>\r\n\r\n<div class=\"d-flex align-items-center\">\r\n <div>\r\n <button\r\n class=\"white-space-nowrap\"\r\n [class.
|
|
447
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.5", type: FileComponent, selector: "jo-file", inputs: { acceptedTypes: "acceptedTypes", sizeLimitMb: "sizeLimitMb", multiple: "multiple", showSize: "showSize" }, usesInheritance: true, ngImport: i0, template: "<label [class.required]=\"required\">\r\n <ng-content></ng-content>\r\n</label>\r\n\r\n<div class=\"d-flex align-items-center\">\r\n <div>\r\n <button\r\n class=\"white-space-nowrap\"\r\n [class.br-end]=\"borderRadiusRight\"\r\n [class.br-start]=\"borderRadiusLeft\"\r\n [class.active]=\"ngControl.value !== null\"\r\n [disabled]=\"isDisabled\"\r\n (click)=\"fileInput.click()\"\r\n >\r\n <icon\r\n type=\"folder\"\r\n size=\"1rem\"\r\n class=\"me-2\"\r\n [fill]=\"[null, 'current']\"\r\n fillRotate=\"90\"\r\n ></icon>\r\n Choose {{multiple ? 'Files' : 'File'}}\r\n </button>\r\n </div>\r\n <div\r\n *ngIf=\"ngControl.value\"\r\n class=\"ml-2\"\r\n >\r\n {{fileNames}}\r\n </div>\r\n</div>\r\n\r\n<!-- <ul *ngIf=\"ngControl.control?.errors\">\r\n <li *ngIf=\"ngControl.control?.errors?.['acceptedTypes']\">\r\n valid types are {{acceptedTypes.join(', ')}}\r\n </li>\r\n <li *ngIf=\"ngControl.control?.errors?.['sizeLimitMb']\">\r\n max file size is {{sizeLimit}}\r\n </li>\r\n <li *ngIf=\"ngControl.control?.errors?.['invalid']\">\r\n invalid model\r\n </li>\r\n</ul> -->\r\n\r\n<input\r\n [(ngModel)]=\"model\"\r\n #fileInput\r\n type=\"file\"\r\n [accept]=\"acceptedTypes.join()\"\r\n [multiple]=\"multiple\"\r\n [id]=\"id\"\r\n (change)=\"onFileChange($event)\"\r\n/>", styles: ["input[type=file]{display:none}\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}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}label{display:block;padding-bottom:.5rem;font-weight:700}label:empty{display:none}label.required:after{content:\"*\"}ul{list-style:none;margin:0;padding:0}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i3.IconComponent, selector: "icon[type]", inputs: ["type", "fill", "fillRotate", "fillOpacity", "stroke", "strokeRotate", "spin"] }] }); }
|
|
446
448
|
}
|
|
447
449
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: FileComponent, decorators: [{
|
|
448
450
|
type: Component,
|
|
449
|
-
args: [{ selector: 'jo-file', template: "<label [class.required]=\"required\">\r\n <ng-content></ng-content>\r\n</label>\r\n\r\n<div class=\"d-flex align-items-center\">\r\n <div>\r\n <button\r\n class=\"white-space-nowrap\"\r\n [class.
|
|
451
|
+
args: [{ selector: 'jo-file', template: "<label [class.required]=\"required\">\r\n <ng-content></ng-content>\r\n</label>\r\n\r\n<div class=\"d-flex align-items-center\">\r\n <div>\r\n <button\r\n class=\"white-space-nowrap\"\r\n [class.br-end]=\"borderRadiusRight\"\r\n [class.br-start]=\"borderRadiusLeft\"\r\n [class.active]=\"ngControl.value !== null\"\r\n [disabled]=\"isDisabled\"\r\n (click)=\"fileInput.click()\"\r\n >\r\n <icon\r\n type=\"folder\"\r\n size=\"1rem\"\r\n class=\"me-2\"\r\n [fill]=\"[null, 'current']\"\r\n fillRotate=\"90\"\r\n ></icon>\r\n Choose {{multiple ? 'Files' : 'File'}}\r\n </button>\r\n </div>\r\n <div\r\n *ngIf=\"ngControl.value\"\r\n class=\"ml-2\"\r\n >\r\n {{fileNames}}\r\n </div>\r\n</div>\r\n\r\n<!-- <ul *ngIf=\"ngControl.control?.errors\">\r\n <li *ngIf=\"ngControl.control?.errors?.['acceptedTypes']\">\r\n valid types are {{acceptedTypes.join(', ')}}\r\n </li>\r\n <li *ngIf=\"ngControl.control?.errors?.['sizeLimitMb']\">\r\n max file size is {{sizeLimit}}\r\n </li>\r\n <li *ngIf=\"ngControl.control?.errors?.['invalid']\">\r\n invalid model\r\n </li>\r\n</ul> -->\r\n\r\n<input\r\n [(ngModel)]=\"model\"\r\n #fileInput\r\n type=\"file\"\r\n [accept]=\"acceptedTypes.join()\"\r\n [multiple]=\"multiple\"\r\n [id]=\"id\"\r\n (change)=\"onFileChange($event)\"\r\n/>", styles: ["input[type=file]{display:none}\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}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}label{display:block;padding-bottom:.5rem;font-weight:700}label:empty{display:none}label.required:after{content:\"*\"}ul{list-style:none;margin:0;padding:0}\n"] }]
|
|
450
452
|
}], ctorParameters: () => [{ type: i1.NgControl, decorators: [{
|
|
451
453
|
type: Self
|
|
452
454
|
}] }], propDecorators: { acceptedTypes: [{
|
|
@@ -571,11 +573,11 @@ class NumberComponent extends ControlDirective {
|
|
|
571
573
|
this.ngControl.control?.updateValueAndValidity();
|
|
572
574
|
}
|
|
573
575
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: NumberComponent, deps: [{ token: i1.NgControl, self: true }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
574
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.5", type: NumberComponent, selector: "jo-number", inputs: { min: "min", max: "max", step: "step" }, usesInheritance: true, ngImport: i0, template: "<label [class.required]=\"required\">\r\n <ng-content></ng-content>\r\n</label>\r\n\r\n<div class=\"d-flex align-items-stretch\">\r\n <input\r\n [(ngModel)]=\"model\"\r\n #numberInput\r\n class=\"d-flex align-items-center\"\r\n type=\"number\"\r\n [size]=\"maxDigitSize + sizePadding\"\r\n [class.active]=\"_model !== null\"\r\n [class.
|
|
576
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.5", type: NumberComponent, selector: "jo-number", inputs: { min: "min", max: "max", step: "step" }, usesInheritance: true, ngImport: i0, template: "<label [class.required]=\"required\">\r\n <ng-content></ng-content>\r\n</label>\r\n\r\n<div class=\"d-flex align-items-stretch\">\r\n <input\r\n [(ngModel)]=\"model\"\r\n #numberInput\r\n class=\"d-flex align-items-center\"\r\n type=\"number\"\r\n [size]=\"maxDigitSize + sizePadding\"\r\n [class.active]=\"_model !== null\"\r\n [class.br-start]=\"borderRadiusLeft\"\r\n [class.invalid]=\"ngControl.control?.invalid\"\r\n [disabled]=\"isDisabled\"\r\n [min]=\"min\"\r\n [max]=\"max\"\r\n (beforeinput)=\"onBeforeinput($event)\"\r\n />\r\n <button\r\n class=\"d-flex align-items-center\"\r\n title=\"Subtract\"\r\n type=\"button\"\r\n [disabled]=\"isDisabledSubtract\"\r\n [class.invalid]=\"ngControl.control?.invalid\"\r\n (blur)=\"onTouched()\"\r\n (click)=\"subtract(numberInput)\"\r\n >\r\n <icon\r\n type=\"minus\"\r\n size=\"1rem\"\r\n [fill]=\"[null, 'current']\"\r\n fillRotate=\"90\"\r\n ></icon>\r\n </button>\r\n <button\r\n class=\"d-flex align-items-center\"\r\n title=\"Add\"\r\n type=\"button\"\r\n [class.br-end]=\"borderRadiusRight\"\r\n [disabled]=\"isDisabledAdd\"\r\n [class.invalid]=\"ngControl.control?.invalid\"\r\n (blur)=\"onTouched()\"\r\n (click)=\"add(numberInput)\"\r\n >\r\n <icon\r\n type=\"plus\"\r\n size=\"1rem\"\r\n [fill]=\"[null, 'current']\"\r\n fillRotate=\"90\"\r\n ></icon>\r\n </button>\r\n</div>\r\n\r\n<!-- <ul *ngIf=\"ngControl.control?.errors\">\r\n <li *ngIf=\"ngControl.control?.errors?.['min']\">\r\n minimum number is {{min}}\r\n </li>\r\n <li *ngIf=\"ngControl.control?.errors?.['max']\">\r\n maximum number is {{max}}\r\n </li>\r\n</ul> -->", styles: ["input[type=number]{-moz-appearance:textfield}input[type=number]::-webkit-outer-spin-button,input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}:host>div>input{border-right:0}:host>div>button:not(:last-child){border-right:0;border-left:0}:host>div>button:last-child{border-left:0}\n", "body{font-family:Arial;margin:0}h1,h2,h3,h4,h5,h6{margin:0}a:not(.jo-ignore),button:not(.jo-ignore),.jo-button,input,textarea{color:inherit;background:transparent;border-width:.15rem;border-style:outset;border-color:currentColor;padding:.5rem;margin:0;font-size:1rem;line-height:1rem;font-family:inherit}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}label{display:block;padding-bottom:.5rem;font-weight:700}label:empty{display:none}label.required:after{content:\"*\"}ul{list-style:none;margin:0;padding:0}\n"], dependencies: [{ kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i1.MaxValidator, selector: "input[type=number][max][formControlName],input[type=number][max][formControl],input[type=number][max][ngModel]", inputs: ["max"] }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i3.IconComponent, selector: "icon[type]", inputs: ["type", "fill", "fillRotate", "fillOpacity", "stroke", "strokeRotate", "spin"] }] }); }
|
|
575
577
|
}
|
|
576
578
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: NumberComponent, decorators: [{
|
|
577
579
|
type: Component,
|
|
578
|
-
args: [{ selector: 'jo-number', template: "<label [class.required]=\"required\">\r\n <ng-content></ng-content>\r\n</label>\r\n\r\n<div class=\"d-flex align-items-stretch\">\r\n <input\r\n [(ngModel)]=\"model\"\r\n #numberInput\r\n class=\"d-flex align-items-center\"\r\n type=\"number\"\r\n [size]=\"maxDigitSize + sizePadding\"\r\n [class.active]=\"_model !== null\"\r\n [class.
|
|
580
|
+
args: [{ selector: 'jo-number', template: "<label [class.required]=\"required\">\r\n <ng-content></ng-content>\r\n</label>\r\n\r\n<div class=\"d-flex align-items-stretch\">\r\n <input\r\n [(ngModel)]=\"model\"\r\n #numberInput\r\n class=\"d-flex align-items-center\"\r\n type=\"number\"\r\n [size]=\"maxDigitSize + sizePadding\"\r\n [class.active]=\"_model !== null\"\r\n [class.br-start]=\"borderRadiusLeft\"\r\n [class.invalid]=\"ngControl.control?.invalid\"\r\n [disabled]=\"isDisabled\"\r\n [min]=\"min\"\r\n [max]=\"max\"\r\n (beforeinput)=\"onBeforeinput($event)\"\r\n />\r\n <button\r\n class=\"d-flex align-items-center\"\r\n title=\"Subtract\"\r\n type=\"button\"\r\n [disabled]=\"isDisabledSubtract\"\r\n [class.invalid]=\"ngControl.control?.invalid\"\r\n (blur)=\"onTouched()\"\r\n (click)=\"subtract(numberInput)\"\r\n >\r\n <icon\r\n type=\"minus\"\r\n size=\"1rem\"\r\n [fill]=\"[null, 'current']\"\r\n fillRotate=\"90\"\r\n ></icon>\r\n </button>\r\n <button\r\n class=\"d-flex align-items-center\"\r\n title=\"Add\"\r\n type=\"button\"\r\n [class.br-end]=\"borderRadiusRight\"\r\n [disabled]=\"isDisabledAdd\"\r\n [class.invalid]=\"ngControl.control?.invalid\"\r\n (blur)=\"onTouched()\"\r\n (click)=\"add(numberInput)\"\r\n >\r\n <icon\r\n type=\"plus\"\r\n size=\"1rem\"\r\n [fill]=\"[null, 'current']\"\r\n fillRotate=\"90\"\r\n ></icon>\r\n </button>\r\n</div>\r\n\r\n<!-- <ul *ngIf=\"ngControl.control?.errors\">\r\n <li *ngIf=\"ngControl.control?.errors?.['min']\">\r\n minimum number is {{min}}\r\n </li>\r\n <li *ngIf=\"ngControl.control?.errors?.['max']\">\r\n maximum number is {{max}}\r\n </li>\r\n</ul> -->", styles: ["input[type=number]{-moz-appearance:textfield}input[type=number]::-webkit-outer-spin-button,input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}:host>div>input{border-right:0}:host>div>button:not(:last-child){border-right:0;border-left:0}:host>div>button:last-child{border-left:0}\n", "body{font-family:Arial;margin:0}h1,h2,h3,h4,h5,h6{margin:0}a:not(.jo-ignore),button:not(.jo-ignore),.jo-button,input,textarea{color:inherit;background:transparent;border-width:.15rem;border-style:outset;border-color:currentColor;padding:.5rem;margin:0;font-size:1rem;line-height:1rem;font-family:inherit}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}label{display:block;padding-bottom:.5rem;font-weight:700}label:empty{display:none}label.required:after{content:\"*\"}ul{list-style:none;margin:0;padding:0}\n"] }]
|
|
579
581
|
}], ctorParameters: () => [{ type: i1.NgControl, decorators: [{
|
|
580
582
|
type: Self
|
|
581
583
|
}] }], propDecorators: { min: [{
|
|
@@ -589,11 +591,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.5", ngImpor
|
|
|
589
591
|
class ReadonlyComponent {
|
|
590
592
|
constructor() { }
|
|
591
593
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: ReadonlyComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
592
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.5", type: ReadonlyComponent, selector: "jo-readonly", inputs: { model: "model" }, ngImport: i0, template: "<label>\r\n <ng-content></ng-content>\r\n</label>\r\n\r\n<div class=\"readonly\">\r\n {{model}}\r\n</div
|
|
594
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.5", type: ReadonlyComponent, selector: "jo-readonly", inputs: { model: "model" }, ngImport: i0, template: "<label>\r\n <ng-content></ng-content>\r\n</label>\r\n\r\n<div class=\"readonly p-2\">\r\n {{model}}\r\n</div>", styles: [":host>div{color:inherit;background:transparent;border-width:.15em;border-color:transparent;border-style:solid}\n", "body{font-family:Arial;margin:0}h1,h2,h3,h4,h5,h6{margin:0}a:not(.jo-ignore),button:not(.jo-ignore),.jo-button,input,textarea{color:inherit;background:transparent;border-width:.15rem;border-style:outset;border-color:currentColor;padding:.5rem;margin:0;font-size:1rem;line-height:1rem;font-family:inherit}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}label{display:block;padding-bottom:.5rem;font-weight:700}label:empty{display:none}label.required:after{content:\"*\"}ul{list-style:none;margin:0;padding:0}\n"] }); }
|
|
593
595
|
}
|
|
594
596
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: ReadonlyComponent, decorators: [{
|
|
595
597
|
type: Component,
|
|
596
|
-
args: [{ selector: 'jo-readonly', template: "<label>\r\n <ng-content></ng-content>\r\n</label>\r\n\r\n<div class=\"readonly\">\r\n {{model}}\r\n</div
|
|
598
|
+
args: [{ selector: 'jo-readonly', template: "<label>\r\n <ng-content></ng-content>\r\n</label>\r\n\r\n<div class=\"readonly p-2\">\r\n {{model}}\r\n</div>", styles: [":host>div{color:inherit;background:transparent;border-width:.15em;border-color:transparent;border-style:solid}\n", "body{font-family:Arial;margin:0}h1,h2,h3,h4,h5,h6{margin:0}a:not(.jo-ignore),button:not(.jo-ignore),.jo-button,input,textarea{color:inherit;background:transparent;border-width:.15rem;border-style:outset;border-color:currentColor;padding:.5rem;margin:0;font-size:1rem;line-height:1rem;font-family:inherit}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}label{display:block;padding-bottom:.5rem;font-weight:700}label:empty{display:none}label.required:after{content:\"*\"}ul{list-style:none;margin:0;padding:0}\n"] }]
|
|
597
599
|
}], ctorParameters: () => [], propDecorators: { model: [{
|
|
598
600
|
type: Input
|
|
599
601
|
}] } });
|
|
@@ -717,11 +719,11 @@ class TextComponent extends ControlDirective {
|
|
|
717
719
|
this.ngControl.control?.updateValueAndValidity();
|
|
718
720
|
}
|
|
719
721
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: TextComponent, deps: [{ token: i1.NgControl, self: true }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
720
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.5", type: TextComponent, selector: "jo-text", inputs: { placeholder: "placeholder", minLength: "minLength", maxLength: "maxLength", isSpellCheck: "isSpellCheck", isGrow: "isGrow", rows: "rows" }, outputs: { onBlur: "onBlur", onFocus: "onFocus" }, host: { listeners: { "window:resize": "onWindowResize()" } }, viewQueries: [{ propertyName: "textareaElement", first: true, predicate: ["textarea"], descendants: true }, { propertyName: "textareaHiddenElement", first: true, predicate: ["textareaHidden"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<label\r\n [for]=\"id\"\r\n [class.required]=\"required\"\r\n>\r\n <ng-content></ng-content>\r\n</label>\r\n\r\n<div class=\"d-flex\">\r\n <input\r\n *ngIf=\"!_isGrow\"\r\n type=\"text\"\r\n [(ngModel)]=\"model\"\r\n [class.
|
|
722
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.5", type: TextComponent, selector: "jo-text", inputs: { placeholder: "placeholder", minLength: "minLength", maxLength: "maxLength", isSpellCheck: "isSpellCheck", isGrow: "isGrow", rows: "rows" }, outputs: { onBlur: "onBlur", onFocus: "onFocus" }, host: { listeners: { "window:resize": "onWindowResize()" } }, viewQueries: [{ propertyName: "textareaElement", first: true, predicate: ["textarea"], descendants: true }, { propertyName: "textareaHiddenElement", first: true, predicate: ["textareaHidden"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<label\r\n [for]=\"id\"\r\n [class.required]=\"required\"\r\n>\r\n <ng-content></ng-content>\r\n</label>\r\n\r\n<div class=\"d-flex\">\r\n <input\r\n *ngIf=\"!_isGrow\"\r\n type=\"text\"\r\n [(ngModel)]=\"model\"\r\n [class.br-end]=\"borderRadiusRight\"\r\n [class.br-start]=\"borderRadiusLeft\"\r\n class=\"flex-1\"\r\n [minlength]=\"_minLength\"\r\n [maxlength]=\"_maxLength\"\r\n [class.active]=\"_model !== null\"\r\n [class.invalid]=\"ngControl.control?.invalid\"\r\n [disabled]=\"isDisabled\"\r\n [id]=\"id\"\r\n [spellcheck]=\"isSpellCheck\"\r\n [placeholder]=\"placeholder\"\r\n (blur)=\"onTouched(); onBlur.emit($event)\"\r\n (focus)=\"onFocus.emit($event)\"\r\n />\r\n <textarea\r\n *ngIf=\"_isGrow\"\r\n #textarea\r\n [(ngModel)]=\"model\"\r\n [class.br-end]=\"borderRadiusRight\"\r\n [class.br-start]=\"borderRadiusLeft\"\r\n class=\"flex-1\"\r\n [rows]=\"rows\"\r\n [minlength]=\"_minLength\"\r\n [maxlength]=\"_maxLength\"\r\n [class.active]=\"_model !== null\"\r\n [class.invalid]=\"ngControl.control?.invalid\"\r\n [disabled]=\"isDisabled\"\r\n [id]=\"id\"\r\n [spellcheck]=\"isSpellCheck\"\r\n [placeholder]=\"placeholder\"\r\n (blur)=\"onTouched(); onBlur.emit($event)\"\r\n (focus)=\"onFocus.emit($event)\"\r\n ></textarea>\r\n</div>\r\n\r\n<div\r\n *ngIf=\"_isGrow\"\r\n class=\"d-flex\"\r\n>\r\n <textarea\r\n #textareaHidden\r\n [ngModel]=\"model\"\r\n class=\"hidden flex-1\"\r\n [rows]=\"rows\"\r\n ></textarea>\r\n</div>\r\n\r\n<!-- <ul *ngIf=\"ngControl.control?.errors\">\r\n <li *ngIf=\"ngControl.control?.errors?.['minlength']\">\r\n minimum length is {{minLength}}\r\n </li>\r\n <li *ngIf=\"ngControl.control?.errors?.['maxLength']\">\r\n maximum length is {{maxLength}}\r\n </li>\r\n</ul> -->", styles: [":host{display:block}textarea{font-family:inherit;cursor:text;overflow:hidden;resize:none;width:100%}textarea.hidden{padding:0;position:absolute;visibility:hidden;transition:none}input[type=text]{font-family:inherit;width:100%}\n", "body{font-family:Arial;margin:0}h1,h2,h3,h4,h5,h6{margin:0}a:not(.jo-ignore),button:not(.jo-ignore),.jo-button,input,textarea{color:inherit;background:transparent;border-width:.15rem;border-style:outset;border-color:currentColor;padding:.5rem;margin:0;font-size:1rem;line-height:1rem;font-family:inherit}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}label{display:block;padding-bottom:.5rem;font-weight:700}label:empty{display:none}label.required:after{content:\"*\"}ul{list-style:none;margin:0;padding:0}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.MinLengthValidator, selector: "[minlength][formControlName],[minlength][formControl],[minlength][ngModel]", inputs: ["minlength"] }, { kind: "directive", type: i1.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] }); }
|
|
721
723
|
}
|
|
722
724
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: TextComponent, decorators: [{
|
|
723
725
|
type: Component,
|
|
724
|
-
args: [{ selector: 'jo-text', template: "<label\r\n [for]=\"id\"\r\n [class.required]=\"required\"\r\n>\r\n <ng-content></ng-content>\r\n</label>\r\n\r\n<div class=\"d-flex\">\r\n <input\r\n *ngIf=\"!_isGrow\"\r\n type=\"text\"\r\n [(ngModel)]=\"model\"\r\n [class.
|
|
726
|
+
args: [{ selector: 'jo-text', template: "<label\r\n [for]=\"id\"\r\n [class.required]=\"required\"\r\n>\r\n <ng-content></ng-content>\r\n</label>\r\n\r\n<div class=\"d-flex\">\r\n <input\r\n *ngIf=\"!_isGrow\"\r\n type=\"text\"\r\n [(ngModel)]=\"model\"\r\n [class.br-end]=\"borderRadiusRight\"\r\n [class.br-start]=\"borderRadiusLeft\"\r\n class=\"flex-1\"\r\n [minlength]=\"_minLength\"\r\n [maxlength]=\"_maxLength\"\r\n [class.active]=\"_model !== null\"\r\n [class.invalid]=\"ngControl.control?.invalid\"\r\n [disabled]=\"isDisabled\"\r\n [id]=\"id\"\r\n [spellcheck]=\"isSpellCheck\"\r\n [placeholder]=\"placeholder\"\r\n (blur)=\"onTouched(); onBlur.emit($event)\"\r\n (focus)=\"onFocus.emit($event)\"\r\n />\r\n <textarea\r\n *ngIf=\"_isGrow\"\r\n #textarea\r\n [(ngModel)]=\"model\"\r\n [class.br-end]=\"borderRadiusRight\"\r\n [class.br-start]=\"borderRadiusLeft\"\r\n class=\"flex-1\"\r\n [rows]=\"rows\"\r\n [minlength]=\"_minLength\"\r\n [maxlength]=\"_maxLength\"\r\n [class.active]=\"_model !== null\"\r\n [class.invalid]=\"ngControl.control?.invalid\"\r\n [disabled]=\"isDisabled\"\r\n [id]=\"id\"\r\n [spellcheck]=\"isSpellCheck\"\r\n [placeholder]=\"placeholder\"\r\n (blur)=\"onTouched(); onBlur.emit($event)\"\r\n (focus)=\"onFocus.emit($event)\"\r\n ></textarea>\r\n</div>\r\n\r\n<div\r\n *ngIf=\"_isGrow\"\r\n class=\"d-flex\"\r\n>\r\n <textarea\r\n #textareaHidden\r\n [ngModel]=\"model\"\r\n class=\"hidden flex-1\"\r\n [rows]=\"rows\"\r\n ></textarea>\r\n</div>\r\n\r\n<!-- <ul *ngIf=\"ngControl.control?.errors\">\r\n <li *ngIf=\"ngControl.control?.errors?.['minlength']\">\r\n minimum length is {{minLength}}\r\n </li>\r\n <li *ngIf=\"ngControl.control?.errors?.['maxLength']\">\r\n maximum length is {{maxLength}}\r\n </li>\r\n</ul> -->", styles: [":host{display:block}textarea{font-family:inherit;cursor:text;overflow:hidden;resize:none;width:100%}textarea.hidden{padding:0;position:absolute;visibility:hidden;transition:none}input[type=text]{font-family:inherit;width:100%}\n", "body{font-family:Arial;margin:0}h1,h2,h3,h4,h5,h6{margin:0}a:not(.jo-ignore),button:not(.jo-ignore),.jo-button,input,textarea{color:inherit;background:transparent;border-width:.15rem;border-style:outset;border-color:currentColor;padding:.5rem;margin:0;font-size:1rem;line-height:1rem;font-family:inherit}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}label{display:block;padding-bottom:.5rem;font-weight:700}label:empty{display:none}label.required:after{content:\"*\"}ul{list-style:none;margin:0;padding:0}\n"] }]
|
|
725
727
|
}], ctorParameters: () => [{ type: i1.NgControl, decorators: [{
|
|
726
728
|
type: Self
|
|
727
729
|
}] }, { type: i0.Renderer2 }], propDecorators: { placeholder: [{
|
|
@@ -752,37 +754,45 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.5", ngImpor
|
|
|
752
754
|
}] } });
|
|
753
755
|
|
|
754
756
|
class SelectComponent extends ItemDirective {
|
|
757
|
+
get searchTerm() {
|
|
758
|
+
return this._searchTerm;
|
|
759
|
+
}
|
|
755
760
|
set searchTerm(value) {
|
|
756
761
|
this._searchTerm = value;
|
|
757
|
-
|
|
758
|
-
|
|
759
|
-
|
|
760
|
-
}
|
|
761
|
-
set showDropdown(value) {
|
|
762
|
-
this._showDropdown = value;
|
|
763
|
-
if (this._showDropdown === false)
|
|
764
|
-
return;
|
|
765
|
-
const hostBoundingRect = this.hostElement.nativeElement.getBoundingClientRect();
|
|
766
|
-
this.isDropdownCloseToBottom = window.innerHeight < hostBoundingRect.bottom + parseInt(this.dropdownMaxHeight, 10);
|
|
762
|
+
this.filteredItems = value
|
|
763
|
+
? this._items.filter(item => item.value.toLowerCase().includes(value.toLowerCase()))
|
|
764
|
+
: this._items;
|
|
767
765
|
}
|
|
768
766
|
constructor(ngControl, hostElement) {
|
|
769
767
|
super(ngControl);
|
|
770
768
|
this.ngControl = ngControl;
|
|
771
769
|
this.hostElement = hostElement;
|
|
772
|
-
this.
|
|
770
|
+
this.dropHeightPx = 200;
|
|
773
771
|
this._searchTerm = '';
|
|
774
|
-
this._showDropdown = false;
|
|
775
772
|
this.isDropdownCloseToBottom = false;
|
|
773
|
+
this.id = `${Math.random().toString(36).substr(2, 9)}`;
|
|
774
|
+
}
|
|
775
|
+
get activeItemValues() {
|
|
776
|
+
return this._items
|
|
777
|
+
.filter(item => this._model.includes(item.key))
|
|
778
|
+
.map(item => item.value)
|
|
779
|
+
.join(', ');
|
|
780
|
+
}
|
|
781
|
+
get isSelectedAll() {
|
|
782
|
+
return this._items.every(item => this._model.includes(item.key));
|
|
776
783
|
}
|
|
777
784
|
onGlobalClick(event) {
|
|
778
785
|
if (!this.hostElement.nativeElement.contains(event.target))
|
|
779
|
-
this.
|
|
780
|
-
}
|
|
781
|
-
onClickSearch() {
|
|
782
|
-
this.showDropdown = !this.showDropdown;
|
|
786
|
+
this.closeDropdown();
|
|
783
787
|
}
|
|
784
|
-
|
|
785
|
-
this.
|
|
788
|
+
onClickGroup() {
|
|
789
|
+
this.closeDropdown();
|
|
790
|
+
if (this.dropGroup.nativeElement.getBoundingClientRect().bottom + this.dropHeightPx > window.innerHeight) {
|
|
791
|
+
this.dropup.nativeElement.show();
|
|
792
|
+
}
|
|
793
|
+
else {
|
|
794
|
+
this.dropdown.nativeElement.show();
|
|
795
|
+
}
|
|
786
796
|
}
|
|
787
797
|
onClick(item) {
|
|
788
798
|
this._model = this._model.filter(key => this._items.map(item => item.key).includes(key));
|
|
@@ -798,16 +808,38 @@ class SelectComponent extends ItemDirective {
|
|
|
798
808
|
}
|
|
799
809
|
this.model = [...this._model, item.key];
|
|
800
810
|
}
|
|
811
|
+
onClickSelectAll() {
|
|
812
|
+
this.model = this.isSelectedAll
|
|
813
|
+
? []
|
|
814
|
+
: this._items.map(item => item.key);
|
|
815
|
+
}
|
|
816
|
+
closeDropdown() {
|
|
817
|
+
this.searchTerm = '';
|
|
818
|
+
this.dropdown.nativeElement.close();
|
|
819
|
+
this.dropup.nativeElement.close();
|
|
820
|
+
}
|
|
801
821
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: SelectComponent, deps: [{ token: i1.NgControl, self: true }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
802
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.5", type: SelectComponent, selector: "jo-select", inputs: { dropdownMaxHeight: "dropdownMaxHeight" }, host: { listeners: { "document:mousedown": "onGlobalClick($event)" } }, usesInheritance: true, ngImport: i0, template: "<label>\r\n <ng-content></ng-content>\r\n</label>\r\n\r\n<div class=\"d-flex align-items-stretch\">\r\n <jo-text\r\n [borderRadiusLeft]=\"borderRadiusLeft\"\r\n [borderRadiusRight]=\"false\"\r\n [(ngModel)]=\"searchTerm\"\r\n [isGrow]=\"false\"\r\n class=\"flex-1\"\r\n (onFocus)=\"onFocusSearch()\"\r\n ></jo-text>\r\n <button\r\n class=\"d-flex\"\r\n [disabled]=\"isDisabled\"\r\n (click)=\"onClickSearch()\"\r\n >\r\n <icon\r\n size=\"1em\"\r\n type=\"chevron\"\r\n [fill]=\"[null, 'current']\"\r\n fillRotate=\"90\"\r\n [stroke]=\"['current']\"\r\n ></icon>\r\n </button>\r\n</div>\r\n\r\n<div\r\n class=\"drop {{isDropdownCloseToBottom ? 'up' : 'down'}}\"\r\n [hidden]=\"!showDropdown\"\r\n [style.max-height]=\"dropdownMaxHeight\"\r\n>\r\n <!-- <jo-button *ngIf=\"items.length === 0\">\r\n No Results\r\n </jo-button> -->\r\n <button\r\n *ngFor=\"let item of items; let idx = index\"\r\n class=\"d-flex\"\r\n [class.active]=\"_model.includes(item.key)\"\r\n [disabled]=\"isDisabled\"\r\n [class.invalid]=\"!ngControl.control?.invalid\"\r\n [class.border-radius-right]=\"borderRadiusRight && idx === items.length - 1\"\r\n [class.border-radius-left]=\"borderRadiusLeft && idx === 0\"\r\n (click)=\"onClick(item)\"\r\n (blur)=\"onTouched()\"\r\n >\r\n <icon-stack\r\n class=\"margin-right-1\"\r\n size=\"1em\"\r\n >\r\n <icon [type]=\"isMultiple ? 'squircle' : 'circle'\"></icon>\r\n <icon\r\n *ngIf=\"_model.includes(item.key)\"\r\n [type]=\"isMultiple ? 'check' : 'dot'\"\r\n [fill]=\"[null, 'current']\"\r\n fillRotate=\"90\"\r\n ></icon>\r\n </icon-stack>\r\n {{item.value}}\r\n </button>\r\n</div>", styles: [":host{position:relative;display:block}.drop{max-height:200px;overflow-y:auto}.drop.down{top:100%}.drop.up{bottom:100%}icon[type=chevron]{transform:rotate(180deg)}\n", "label{display:block;padding-bottom:.5em;font-weight:700}label:empty{display:none}label.required:after{content:\"*\"}ul{list-style:none;margin:0;padding:0}ul>li{padding-top:.25em}a:not(.jo-ignore),button:not(.jo-ignore),.button,input,textarea{color:inherit;background:transparent;border-width:.15em;border-style:outset;border-color:currentColor;padding:.5em;margin:0;font-size:1em;line-height:1em}a:not(.jo-ignore):active,a:not(.jo-ignore).active,button:not(.jo-ignore):active,button:not(.jo-ignore).active,.button:active,.button.active,input:active,input.active,textarea:active,textarea.active{border-style:inset}a:not(.jo-ignore):disabled,a:not(.jo-ignore).disabled,button:not(.jo-ignore):disabled,button:not(.jo-ignore).disabled,.button:disabled,.button.disabled,input:disabled,input.disabled,textarea:disabled,textarea.disabled{cursor:not-allowed;border-style:solid;box-shadow:none;opacity:.5}a,button,.button{cursor:pointer}@keyframes invalid-border{0%,to{border-style:inset}50%{border-style:outset}}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i3.IconComponent, selector: "icon[type]", inputs: ["type", "fill", "fillRotate", "fillOpacity", "stroke", "strokeRotate", "spin"] }, { kind: "component", type: i3.IconStackComponent, selector: "icon-stack" }, { kind: "component", type: TextComponent, selector: "jo-text", inputs: ["placeholder", "minLength", "maxLength", "isSpellCheck", "isGrow", "rows"], outputs: ["onBlur", "onFocus"] }] }); }
|
|
822
|
+
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}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}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: i3.IconComponent, selector: "icon[type]", inputs: ["type", "fill", "fillRotate", "fillOpacity", "stroke", "strokeRotate", "spin"] }] }); }
|
|
803
823
|
}
|
|
804
824
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: SelectComponent, decorators: [{
|
|
805
825
|
type: Component,
|
|
806
|
-
args: [{ selector: 'jo-select', template: "<
|
|
826
|
+
args: [{ selector: 'jo-select', template: "<div class=\"d-flex justify-content-between\">\r\n <label\r\n id=\"select_{{id}}\"\r\n [class.required]=\"required\"\r\n >\r\n <ng-content></ng-content>\r\n </label>\r\n <div>\r\n <ng-content select=\"[rightAligned]\"></ng-content>\r\n </div>\r\n</div>\r\n\r\n<div class=\"position-relative\">\r\n <dialog #dropup>\r\n <ng-template [ngTemplateOutlet]=\"dropContent\"></ng-template>\r\n </dialog>\r\n</div>\r\n\r\n<div\r\n #dropGroup\r\n class=\"d-flex align-items-stretch\"\r\n role=\"group\"\r\n attr.aria-labelledby=\"select_{{id}}\"\r\n>\r\n <button\r\n class=\"flex-1 br-start text-start\"\r\n type=\"button\"\r\n [class.active]=\"_model.length > 0\"\r\n [class.invalid]=\"!ngControl.control?.invalid\"\r\n (click)=\"onClickGroup()\"\r\n (blur)=\"onTouched()\"\r\n >\r\n {{activeItemValues}}\r\n </button>\r\n <button\r\n class=\"d-flex br-end d-flex align-items-center justify-content-center\"\r\n [class.invalid]=\"!ngControl.control?.invalid\"\r\n [disabled]=\"isDisabled\"\r\n (click)=\"onClickGroup()\"\r\n (blur)=\"onTouched()\"\r\n >\r\n <icon\r\n size=\"1rem\"\r\n type=\"chevron\"\r\n [fill]=\"[null, 'current']\"\r\n fillRotate=\"90\"\r\n [stroke]=\"['current']\"\r\n [class.up]=\"dropup.open\"\r\n [class.down]=\"dropdown.open\"\r\n ></icon>\r\n </button>\r\n</div>\r\n\r\n<dialog #dropdown>\r\n <ng-template [ngTemplateOutlet]=\"dropContent\"></ng-template>\r\n</dialog>\r\n\r\n<ng-template #dropContent>\r\n <div class=\"card\">\r\n <div class=\"card-body\">\r\n <div class=\"d-flex gap-2 align-items-stretch\">\r\n <input\r\n [(ngModel)]=\"searchTerm\"\r\n class=\"flex-1 br-start br-end\"\r\n />\r\n <button\r\n *ngIf=\"_isMultiple\"\r\n type=\"button\"\r\n class=\"br-start br-end\"\r\n (click)=\"onClickSelectAll()\"\r\n >\r\n {{isSelectedAll ? 'Deselect' : 'Select'}} All\r\n </button>\r\n </div>\r\n </div>\r\n <div class=\"d-flex flex-column\">\r\n <button\r\n *ngFor=\"let item of filteredItems\"\r\n class=\"d-flex flex-1 align-items-center text-start gap-2\"\r\n [disabled]=\"isDisabled\"\r\n [class.active]=\"_model.includes(item.key)\"\r\n (click)=\"onClick(item)\"\r\n >\r\n <div\r\n class=\"jo-button {{isMultiple ? 'br-20' : 'br-50'}}\"\r\n [class.active]=\"_model.includes(item.key)\"\r\n [class.disabled]=\"isDisabled\"\r\n [class.invalid]=\"ngControl.control?.invalid\"\r\n >\r\n <icon\r\n *ngIf=\"_model.includes(item.key)\"\r\n size=\"1rem\"\r\n [type]=\"isMultiple ? 'check' : 'dot'\"\r\n [fill]=\"[null, 'current']\"\r\n fillRotate=\"90\"\r\n ></icon>\r\n </div>\r\n {{item.value}}\r\n </button>\r\n </div>\r\n </div>\r\n</ng-template>", styles: [":host{position:relative;display:block}:host>.position-relative>dialog{bottom:0}.drop{max-height:200px;overflow-y:auto}.drop.down{top:100%}.drop.up{bottom:100%}div[role=group]>button:first-child{border-right:none;white-space:nowrap;overflow-x:hidden;text-overflow:ellipsis}div[role=group]>button:last-child{border-left:none}dialog{padding:0;border:0;margin:0;background:transparent;width:100%;z-index:2;color:currentColor}dialog>.card{-webkit-backdrop-filter:blur(1.5rem);backdrop-filter:blur(1.5rem);max-height:calc(var(--dropHeightPx) * 1px);overflow-y:auto}dialog>.card>.flex-column>button{border-color:transparent;border-width:.075em}dialog>.card>.flex-column>button>.jo-button{position:relative;text-align:left}dialog>.card>.flex-column>button>.jo-button>icon{position:absolute;top:0;left:0}icon[type=chevron]{transform:rotate(90deg)}icon[type=chevron].up{transform:rotate(0)}icon[type=chevron].down{transform:rotate(180deg)}.br-20{border-radius:20%}.br-50{border-radius:50%}\n", "body{font-family:Arial;margin:0}h1,h2,h3,h4,h5,h6{margin:0}a:not(.jo-ignore),button:not(.jo-ignore),.jo-button,input,textarea{color:inherit;background:transparent;border-width:.15rem;border-style:outset;border-color:currentColor;padding:.5rem;margin:0;font-size:1rem;line-height:1rem;font-family:inherit}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}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"] }]
|
|
807
827
|
}], ctorParameters: () => [{ type: i1.NgControl, decorators: [{
|
|
808
828
|
type: Self
|
|
809
|
-
}] }, { type: i0.ElementRef }], propDecorators: {
|
|
829
|
+
}] }, { type: i0.ElementRef }], propDecorators: { dropGroup: [{
|
|
830
|
+
type: ViewChild,
|
|
831
|
+
args: ['dropGroup']
|
|
832
|
+
}], dropup: [{
|
|
833
|
+
type: ViewChild,
|
|
834
|
+
args: ['dropup']
|
|
835
|
+
}], dropdown: [{
|
|
836
|
+
type: ViewChild,
|
|
837
|
+
args: ['dropdown']
|
|
838
|
+
}], dropHeightPx: [{
|
|
810
839
|
type: Input
|
|
840
|
+
}, {
|
|
841
|
+
type: HostBinding,
|
|
842
|
+
args: ['style.--dropHeightPx']
|
|
811
843
|
}], onGlobalClick: [{
|
|
812
844
|
type: HostListener,
|
|
813
845
|
args: ['document:mousedown', ['$event']]
|