@agorapulse/ui-components 22.4.3-beta.1 → 22.4.4-beta.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/agorapulse-ui-components-22.4.4-beta.2.tgz +0 -0
- package/fesm2022/agorapulse-ui-components-checkbox.mjs +2 -2
- package/fesm2022/agorapulse-ui-components-checkbox.mjs.map +1 -1
- package/fesm2022/agorapulse-ui-components-datepicker.mjs +28 -9
- package/fesm2022/agorapulse-ui-components-datepicker.mjs.map +1 -1
- package/fesm2022/agorapulse-ui-components-filter-dropdown.mjs +5 -0
- package/fesm2022/agorapulse-ui-components-filter-dropdown.mjs.map +1 -1
- package/fesm2022/agorapulse-ui-components-selection-dropdown.mjs +3 -0
- package/fesm2022/agorapulse-ui-components-selection-dropdown.mjs.map +1 -1
- package/package.json +1 -1
- package/types/agorapulse-ui-components-datepicker.d.ts +9 -3
- package/agorapulse-ui-components-22.4.3-beta.1.tgz +0 -0
|
Binary file
|
|
@@ -140,7 +140,7 @@ class CheckboxComponent {
|
|
|
140
140
|
useExisting: CheckboxComponent,
|
|
141
141
|
multi: true,
|
|
142
142
|
},
|
|
143
|
-
], viewQueries: [{ propertyName: "inputElement", first: true, predicate: ["input"], descendants: true, static: true }, { propertyName: "labelElement", first: true, predicate: ["label"], descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: "<div\n class=\"checkbox\"\n (click)=\"_preventBubblingFromLabel($event)\">\n <div\n class=\"checkbox-container\"\n [class.hover]=\"hovered\"\n [class.checked]=\"checked\"\n [class.indeterminate]=\"indeterminate && !checked\"\n [class.disabled]=\"disabled\"\n [class.has-label]=\"hasLabel\"\n [class.required]=\"required\">\n <input\n #input\n type=\"checkbox\"\n [id]=\"name\"\n [attr.aria-hidden]=\"presentational || null\"\n [attr.tabindex]=\"presentational ? -1 : null\"\n [class.disabled]=\"disabled\"\n [disabled]=\"disabled\"\n [checked]=\"checked\"\n [indeterminate]=\"indeterminate && !checked\"\n [required]=\"required\"\n [attr.aria-label]=\"ariaLabel\"\n [attr.aria-labelledby]=\"ariaLabelledby\"\n [attr.aria-describedby]=\"ariaDescribedby\"\n [attr.data-test]=\"name\"\n (click)=\"onValueChange($event)\"
|
|
143
|
+
], viewQueries: [{ propertyName: "inputElement", first: true, predicate: ["input"], descendants: true, static: true }, { propertyName: "labelElement", first: true, predicate: ["label"], descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: "<div\n class=\"checkbox\"\n (click)=\"_preventBubblingFromLabel($event)\">\n <div\n class=\"checkbox-container\"\n [class.hover]=\"hovered\"\n [class.checked]=\"checked\"\n [class.indeterminate]=\"indeterminate && !checked\"\n [class.disabled]=\"disabled\"\n [class.has-label]=\"hasLabel\"\n [class.required]=\"required\">\n <input\n #input\n type=\"checkbox\"\n [id]=\"name\"\n [attr.aria-hidden]=\"presentational || null\"\n [attr.tabindex]=\"presentational ? -1 : null\"\n [class.disabled]=\"disabled\"\n [disabled]=\"disabled\"\n [checked]=\"checked\"\n [indeterminate]=\"indeterminate && !checked\"\n [required]=\"required\"\n [attr.aria-label]=\"ariaLabel\"\n [attr.aria-labelledby]=\"ariaLabelledby\"\n [attr.aria-describedby]=\"ariaDescribedby\"\n [attr.data-test]=\"name\"\n (click)=\"onValueChange($event)\" />\n <span\n class=\"checkbox\"\n (mouseenter)=\"onMouseEnter()\"\n (mouseleave)=\"onMouseLeave()\"\n (click)=\"onValueChange($event)\">\n @if (checked) {\n <span class=\"checkmark\">\n <ap-symbol\n symbolId=\"check\"\n color=\"white\"\n [size]=\"10\" />\n </span>\n }\n @if (indeterminate && !checked) {\n <span class=\"indeterminate\"></span>\n }\n </span>\n </div>\n <label\n #label\n [class.disabled]=\"disabled\"\n [for]=\"name\">\n <ng-content />\n </label>\n</div>\n", styles: ["ap-checkbox{display:flex;align-items:center}ap-checkbox.ng-invalid.ng-touched .checkbox-container.required span.checkbox{border-color:var(--ref-color-red-100)!important}ap-checkbox.bold label{font-weight:var(--ref-font-weight-bold)}ap-checkbox.full-width .checkbox{justify-content:space-between;align-items:center;width:100%}ap-checkbox.centered .checkbox{align-items:center}ap-checkbox.centered .checkbox>.checkbox-container{padding-top:0}ap-checkbox .checkbox{display:flex;align-items:flex-start;gap:var(--ref-spacing-xxs)}ap-checkbox .checkbox .checkbox-container{display:flex;justify-content:center;align-items:center;max-width:36px;height:fit-content;box-sizing:border-box;position:relative;padding-top:1px}ap-checkbox .checkbox .checkbox-container:not(.has-label){padding:10px}ap-checkbox .checkbox .checkbox-container.hover:not(.disabled):not(.has-label){border-radius:var(--ref-border-radius-md);background:var(--ref-color-grey-05)}ap-checkbox .checkbox .checkbox-container.checked:not(.disabled).hover{background:var(--ref-color-electric-blue-10)}ap-checkbox .checkbox .checkbox-container.checked:not(.disabled):active:not(.has-label){background:var(--ref-color-electric-blue-20)}ap-checkbox .checkbox .checkbox-container.checked:not(.disabled):active:not(.has-label) span.checkbox{background:var(--ref-color-electric-blue-60)}ap-checkbox .checkbox .checkbox-container.checked:not(.disabled) span.checkbox{background:var(--ref-color-electric-blue-100);border-color:var(--ref-color-electric-blue-100)}ap-checkbox .checkbox .checkbox-container.checked:not(.disabled) span.checkbox:hover{border:1px solid var(--ref-color-electric-blue-100);background:var(--ref-color-electric-blue-80)}ap-checkbox .checkbox .checkbox-container.checked:not(.disabled) span.checkbox:active{border:1px solid var(--ref-color-electric-blue-100);background:var(--ref-color-electric-blue-60)}ap-checkbox .checkbox .checkbox-container.indeterminate:not(.disabled).hover{background:var(--ref-color-electric-blue-10)}ap-checkbox .checkbox .checkbox-container.indeterminate:not(.disabled) span.checkbox{background:var(--ref-color-electric-blue-100);border-color:var(--ref-color-electric-blue-100)}ap-checkbox .checkbox .checkbox-container.indeterminate:not(.disabled) span.checkbox:hover{border:1px solid var(--ref-color-electric-blue-100);background:var(--ref-color-electric-blue-80)}ap-checkbox .checkbox .checkbox-container.disabled span.checkbox{border:1px solid var(--ref-color-grey-20);background:var(--ref-color-grey-10)}ap-checkbox .checkbox .checkbox-container.disabled.checked span.checkbox{background:var(--ref-color-grey-20)}ap-checkbox .checkbox .checkbox-container.disabled.indeterminate span.checkbox{background:var(--ref-color-grey-20)}ap-checkbox .checkbox .checkbox-container.disabled span.checkbox{pointer-events:none}ap-checkbox .checkbox .checkbox-container input[type=checkbox]{position:absolute;clip:rect(0,0,0,0)}@media(hover:hover){ap-checkbox .checkbox .checkbox-container input[type=checkbox]:focus:not(.disabled)~.checkbox{outline:3px solid var(--ref-color-electric-blue-100);outline-offset:1px}}ap-checkbox .checkbox .checkbox-container span.checkbox{display:flex;justify-content:center;align-items:center;width:16px;height:16px;min-width:16px;min-height:16px;max-height:16px;max-width:16px;border-radius:var(--sys-border-radius-sm);border:1px solid var(--ref-color-grey-60);background:var(--ref-color-white);box-sizing:border-box}ap-checkbox .checkbox .checkbox-container span.checkbox:hover{cursor:pointer;border-color:var(--ref-color-grey-80)}ap-checkbox .checkbox .checkbox-container span.checkbox:active{border-color:var(--ref-color-grey-100)}ap-checkbox .checkbox .checkbox-container span.checkbox .checkmark{display:flex;justify-content:center;align-items:center}ap-checkbox .checkbox .checkbox-container span.checkbox .indeterminate{height:1.5px;background:var(--ref-color-white);width:8px}ap-checkbox .checkbox label{display:flex;align-items:center;font-family:var(--comp-forms-label-font-family);font-size:var(--comp-forms-label-size);font-weight:var(--comp-forms-label-font-weight);line-height:var(--comp-forms-label-line-height);color:var(--comp-forms-label-text-color)}ap-checkbox .checkbox label:empty{display:none}ap-checkbox .checkbox label.disabled{color:var(--ref-color-grey-60)}ap-checkbox .checkbox label:hover:not(.disabled){cursor:pointer}form.ng-submitted ap-checkbox.ng-invalid span.checkbox{border-color:var(--ref-color-red-100)!important}\n"], dependencies: [{ kind: "component", type: SymbolComponent, selector: "ap-symbol", inputs: ["symbolId", "color", "size"], outputs: ["sizeChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
144
144
|
}
|
|
145
145
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: CheckboxComponent, decorators: [{
|
|
146
146
|
type: Component,
|
|
@@ -151,7 +151,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
|
|
|
151
151
|
useExisting: CheckboxComponent,
|
|
152
152
|
multi: true,
|
|
153
153
|
},
|
|
154
|
-
], encapsulation: ViewEncapsulation.None, template: "<div\n class=\"checkbox\"\n (click)=\"_preventBubblingFromLabel($event)\">\n <div\n class=\"checkbox-container\"\n [class.hover]=\"hovered\"\n [class.checked]=\"checked\"\n [class.indeterminate]=\"indeterminate && !checked\"\n [class.disabled]=\"disabled\"\n [class.has-label]=\"hasLabel\"\n [class.required]=\"required\">\n <input\n #input\n type=\"checkbox\"\n [id]=\"name\"\n [attr.aria-hidden]=\"presentational || null\"\n [attr.tabindex]=\"presentational ? -1 : null\"\n [class.disabled]=\"disabled\"\n [disabled]=\"disabled\"\n [checked]=\"checked\"\n [indeterminate]=\"indeterminate && !checked\"\n [required]=\"required\"\n [attr.aria-label]=\"ariaLabel\"\n [attr.aria-labelledby]=\"ariaLabelledby\"\n [attr.aria-describedby]=\"ariaDescribedby\"\n [attr.data-test]=\"name\"\n (click)=\"onValueChange($event)\"
|
|
154
|
+
], encapsulation: ViewEncapsulation.None, template: "<div\n class=\"checkbox\"\n (click)=\"_preventBubblingFromLabel($event)\">\n <div\n class=\"checkbox-container\"\n [class.hover]=\"hovered\"\n [class.checked]=\"checked\"\n [class.indeterminate]=\"indeterminate && !checked\"\n [class.disabled]=\"disabled\"\n [class.has-label]=\"hasLabel\"\n [class.required]=\"required\">\n <input\n #input\n type=\"checkbox\"\n [id]=\"name\"\n [attr.aria-hidden]=\"presentational || null\"\n [attr.tabindex]=\"presentational ? -1 : null\"\n [class.disabled]=\"disabled\"\n [disabled]=\"disabled\"\n [checked]=\"checked\"\n [indeterminate]=\"indeterminate && !checked\"\n [required]=\"required\"\n [attr.aria-label]=\"ariaLabel\"\n [attr.aria-labelledby]=\"ariaLabelledby\"\n [attr.aria-describedby]=\"ariaDescribedby\"\n [attr.data-test]=\"name\"\n (click)=\"onValueChange($event)\" />\n <span\n class=\"checkbox\"\n (mouseenter)=\"onMouseEnter()\"\n (mouseleave)=\"onMouseLeave()\"\n (click)=\"onValueChange($event)\">\n @if (checked) {\n <span class=\"checkmark\">\n <ap-symbol\n symbolId=\"check\"\n color=\"white\"\n [size]=\"10\" />\n </span>\n }\n @if (indeterminate && !checked) {\n <span class=\"indeterminate\"></span>\n }\n </span>\n </div>\n <label\n #label\n [class.disabled]=\"disabled\"\n [for]=\"name\">\n <ng-content />\n </label>\n</div>\n", styles: ["ap-checkbox{display:flex;align-items:center}ap-checkbox.ng-invalid.ng-touched .checkbox-container.required span.checkbox{border-color:var(--ref-color-red-100)!important}ap-checkbox.bold label{font-weight:var(--ref-font-weight-bold)}ap-checkbox.full-width .checkbox{justify-content:space-between;align-items:center;width:100%}ap-checkbox.centered .checkbox{align-items:center}ap-checkbox.centered .checkbox>.checkbox-container{padding-top:0}ap-checkbox .checkbox{display:flex;align-items:flex-start;gap:var(--ref-spacing-xxs)}ap-checkbox .checkbox .checkbox-container{display:flex;justify-content:center;align-items:center;max-width:36px;height:fit-content;box-sizing:border-box;position:relative;padding-top:1px}ap-checkbox .checkbox .checkbox-container:not(.has-label){padding:10px}ap-checkbox .checkbox .checkbox-container.hover:not(.disabled):not(.has-label){border-radius:var(--ref-border-radius-md);background:var(--ref-color-grey-05)}ap-checkbox .checkbox .checkbox-container.checked:not(.disabled).hover{background:var(--ref-color-electric-blue-10)}ap-checkbox .checkbox .checkbox-container.checked:not(.disabled):active:not(.has-label){background:var(--ref-color-electric-blue-20)}ap-checkbox .checkbox .checkbox-container.checked:not(.disabled):active:not(.has-label) span.checkbox{background:var(--ref-color-electric-blue-60)}ap-checkbox .checkbox .checkbox-container.checked:not(.disabled) span.checkbox{background:var(--ref-color-electric-blue-100);border-color:var(--ref-color-electric-blue-100)}ap-checkbox .checkbox .checkbox-container.checked:not(.disabled) span.checkbox:hover{border:1px solid var(--ref-color-electric-blue-100);background:var(--ref-color-electric-blue-80)}ap-checkbox .checkbox .checkbox-container.checked:not(.disabled) span.checkbox:active{border:1px solid var(--ref-color-electric-blue-100);background:var(--ref-color-electric-blue-60)}ap-checkbox .checkbox .checkbox-container.indeterminate:not(.disabled).hover{background:var(--ref-color-electric-blue-10)}ap-checkbox .checkbox .checkbox-container.indeterminate:not(.disabled) span.checkbox{background:var(--ref-color-electric-blue-100);border-color:var(--ref-color-electric-blue-100)}ap-checkbox .checkbox .checkbox-container.indeterminate:not(.disabled) span.checkbox:hover{border:1px solid var(--ref-color-electric-blue-100);background:var(--ref-color-electric-blue-80)}ap-checkbox .checkbox .checkbox-container.disabled span.checkbox{border:1px solid var(--ref-color-grey-20);background:var(--ref-color-grey-10)}ap-checkbox .checkbox .checkbox-container.disabled.checked span.checkbox{background:var(--ref-color-grey-20)}ap-checkbox .checkbox .checkbox-container.disabled.indeterminate span.checkbox{background:var(--ref-color-grey-20)}ap-checkbox .checkbox .checkbox-container.disabled span.checkbox{pointer-events:none}ap-checkbox .checkbox .checkbox-container input[type=checkbox]{position:absolute;clip:rect(0,0,0,0)}@media(hover:hover){ap-checkbox .checkbox .checkbox-container input[type=checkbox]:focus:not(.disabled)~.checkbox{outline:3px solid var(--ref-color-electric-blue-100);outline-offset:1px}}ap-checkbox .checkbox .checkbox-container span.checkbox{display:flex;justify-content:center;align-items:center;width:16px;height:16px;min-width:16px;min-height:16px;max-height:16px;max-width:16px;border-radius:var(--sys-border-radius-sm);border:1px solid var(--ref-color-grey-60);background:var(--ref-color-white);box-sizing:border-box}ap-checkbox .checkbox .checkbox-container span.checkbox:hover{cursor:pointer;border-color:var(--ref-color-grey-80)}ap-checkbox .checkbox .checkbox-container span.checkbox:active{border-color:var(--ref-color-grey-100)}ap-checkbox .checkbox .checkbox-container span.checkbox .checkmark{display:flex;justify-content:center;align-items:center}ap-checkbox .checkbox .checkbox-container span.checkbox .indeterminate{height:1.5px;background:var(--ref-color-white);width:8px}ap-checkbox .checkbox label{display:flex;align-items:center;font-family:var(--comp-forms-label-font-family);font-size:var(--comp-forms-label-size);font-weight:var(--comp-forms-label-font-weight);line-height:var(--comp-forms-label-line-height);color:var(--comp-forms-label-text-color)}ap-checkbox .checkbox label:empty{display:none}ap-checkbox .checkbox label.disabled{color:var(--ref-color-grey-60)}ap-checkbox .checkbox label:hover:not(.disabled){cursor:pointer}form.ng-submitted ap-checkbox.ng-invalid span.checkbox{border-color:var(--ref-color-red-100)!important}\n"] }]
|
|
155
155
|
}], propDecorators: { inputElement: [{
|
|
156
156
|
type: ViewChild,
|
|
157
157
|
args: ['input', { static: true }]
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"agorapulse-ui-components-checkbox.mjs","sources":["../../../libs/ui-components/checkbox/src/checkbox.component.ts","../../../libs/ui-components/checkbox/src/checkbox.component.html","../../../libs/ui-components/checkbox/src/agorapulse-ui-components-checkbox.ts"],"sourcesContent":["import { apCheck, SymbolComponent, SymbolRegistry } from '@agorapulse/ui-symbol';\nimport {\n AfterContentInit,\n booleanAttribute,\n ChangeDetectionStrategy,\n Component,\n ElementRef,\n EventEmitter,\n forwardRef,\n inject,\n Input,\n OnChanges,\n OnInit,\n Output,\n ViewChild,\n ViewEncapsulation,\n} from '@angular/core';\nimport { ControlValueAccessor, NG_VALIDATORS, NG_VALUE_ACCESSOR } from '@angular/forms';\n\nexport const AP_CHECKBOX_CONTROL_VALUE_ACCESSOR = {\n provide: NG_VALUE_ACCESSOR,\n useExisting: forwardRef(() => CheckboxComponent),\n multi: true,\n};\n\n@Component({\n changeDetection: ChangeDetectionStrategy.OnPush,\n selector: 'ap-checkbox',\n styleUrls: ['./checkbox.component.scss'],\n imports: [SymbolComponent],\n providers: [\n AP_CHECKBOX_CONTROL_VALUE_ACCESSOR,\n {\n provide: NG_VALIDATORS,\n useExisting: CheckboxComponent,\n multi: true,\n },\n ],\n templateUrl: './checkbox.component.html',\n encapsulation: ViewEncapsulation.None,\n})\nexport class CheckboxComponent implements ControlValueAccessor, AfterContentInit, OnChanges, OnInit {\n private readonly symbolRegistry = inject(SymbolRegistry);\n @ViewChild('input', { static: true }) inputElement!: ElementRef<HTMLInputElement>;\n @ViewChild('label', { static: true }) labelElement!: ElementRef<HTMLInputElement>;\n @Input('aria-label') ariaLabel?: string;\n @Input('aria-labelledby') ariaLabelledby?: string;\n @Input('aria-describedby') ariaDescribedby?: string;\n @Input({\n transform: booleanAttribute,\n })\n disabled = false;\n @Input({\n transform: booleanAttribute,\n })\n set indeterminate(indeterminate: boolean) {\n if (indeterminate) {\n this.checked = false;\n }\n this._indeterminate = indeterminate;\n }\n\n get indeterminate(): boolean {\n return this._indeterminate;\n }\n\n @Input() checked = false;\n\n /**\n * Swallows clicks so the box only mirrors the `checked` it is given — set it where the\n * surrounding element handles the click. Left off, the box owns its value, as `ngModel` needs.\n */\n @Input({\n transform: booleanAttribute,\n })\n fullyControlled = false;\n\n /**\n * Hides the box from assistive tech and from the tab order: decoration for a control that\n * carries the state itself, such as an `option` in a multi-select listbox.\n */\n @Input({\n transform: booleanAttribute,\n })\n presentational = false;\n\n @Input({\n transform: booleanAttribute,\n })\n required = false;\n\n @Input({\n required: true,\n })\n set name(name: string) {\n this._name = name;\n }\n get name(): string {\n return this._name;\n }\n // eslint-disable-next-line\n @Output() readonly change: EventEmitter<boolean> = new EventEmitter<boolean>();\n\n ariaChecked: 'true' | 'false' | 'mixed' = 'false';\n hasLabel = false;\n hovered = false;\n\n private _indeterminate = false;\n private _name = '';\n private _controlValueAccessorChangeFn!: (value: boolean) => void;\n onTouched!: () => void;\n\n ngOnChanges(): void {\n if (this.labelElement) {\n this.hasLabel = !!this.labelElement.nativeElement.textContent?.trim();\n }\n }\n\n ngOnInit() {\n this.symbolRegistry.registerSymbols([apCheck]);\n }\n\n ngAfterContentInit(): void {\n if (this.labelElement) {\n this.hasLabel = !!this.labelElement.nativeElement.textContent?.trim();\n }\n }\n\n onMouseEnter(): void {\n if (!this.disabled) {\n this.hovered = true;\n }\n }\n\n onMouseLeave(): void {\n if (!this.disabled) {\n this.hovered = false;\n }\n }\n\n onValueChange(event?: MouseEvent) {\n if (this.fullyControlled) {\n // The browser flips a native checkbox before any binding can correct it, so block that here.\n event?.preventDefault();\n return;\n }\n if (this.onTouched) {\n this.onTouched();\n }\n if (!this.disabled) {\n if (this.indeterminate) {\n // Activating a partly selected group completes it. Emptying it is the other reading,\n // and it reads as nothing happening: the box was unchecked and stays unchecked.\n this.checked = true;\n this.indeterminate = false;\n } else {\n this.checked = !this.checked;\n this.focus();\n }\n this.change.emit(this.checked);\n if (this._controlValueAccessorChangeFn) {\n this._controlValueAccessorChangeFn(this.checked);\n }\n\n // Assigning the value again here is redundant, but we have to do it in case it was\n // changed inside the `change` listener which will cause the input to be out of sync.\n if (this.inputElement) {\n this.inputElement.nativeElement.checked = this.checked;\n }\n }\n }\n\n focus() {\n this.inputElement.nativeElement.focus();\n }\n\n writeValue(value: boolean): void {\n this.checked = value;\n }\n registerOnChange(fn: (value: boolean) => void): void {\n this._controlValueAccessorChangeFn = fn;\n }\n registerOnTouched(fn: () => void): void {\n this.onTouched = fn;\n }\n setDisabledState(isDisabled: boolean): void {\n this.disabled = isDisabled;\n }\n\n validate() {\n const isNotValid = !this.checked && this.required;\n return (\n isNotValid && {\n invalid: true,\n }\n );\n }\n\n _preventBubblingFromLabel(event: MouseEvent) {\n if (!!event.target && this.labelElement.nativeElement.contains(event.target as HTMLElement)) {\n event.stopPropagation();\n }\n }\n}\n","<div\n class=\"checkbox\"\n (click)=\"_preventBubblingFromLabel($event)\">\n <div\n class=\"checkbox-container\"\n [class.hover]=\"hovered\"\n [class.checked]=\"checked\"\n [class.indeterminate]=\"indeterminate && !checked\"\n [class.disabled]=\"disabled\"\n [class.has-label]=\"hasLabel\"\n [class.required]=\"required\">\n <input\n #input\n type=\"checkbox\"\n [id]=\"name\"\n [attr.aria-hidden]=\"presentational || null\"\n [attr.tabindex]=\"presentational ? -1 : null\"\n [class.disabled]=\"disabled\"\n [disabled]=\"disabled\"\n [checked]=\"checked\"\n [indeterminate]=\"indeterminate && !checked\"\n [required]=\"required\"\n [attr.aria-label]=\"ariaLabel\"\n [attr.aria-labelledby]=\"ariaLabelledby\"\n [attr.aria-describedby]=\"ariaDescribedby\"\n [attr.data-test]=\"name\"\n (click)=\"onValueChange($event)\"\n (change)=\"$event.stopPropagation()\" />\n <span\n class=\"checkbox\"\n (mouseenter)=\"onMouseEnter()\"\n (mouseleave)=\"onMouseLeave()\"\n (click)=\"onValueChange($event)\">\n @if (checked) {\n <span class=\"checkmark\">\n <ap-symbol\n symbolId=\"check\"\n color=\"white\"\n [size]=\"10\" />\n </span>\n }\n @if (indeterminate && !checked) {\n <span class=\"indeterminate\"></span>\n }\n </span>\n </div>\n <label\n #label\n [class.disabled]=\"disabled\"\n [for]=\"name\">\n <ng-content />\n </label>\n</div>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public_api';\n"],"names":[],"mappings":";;;;;AAmBO,MAAM,kCAAkC,GAAG;AAC9C,IAAA,OAAO,EAAE,iBAAiB;AAC1B,IAAA,WAAW,EAAE,UAAU,CAAC,MAAM,iBAAiB,CAAC;AAChD,IAAA,KAAK,EAAE,IAAI;;MAmBF,iBAAiB,CAAA;AACT,IAAA,cAAc,GAAG,MAAM,CAAC,cAAc,CAAC;AAClB,IAAA,YAAY;AACZ,IAAA,YAAY;AAC7B,IAAA,SAAS;AACJ,IAAA,cAAc;AACb,IAAA,eAAe;IAI1C,QAAQ,GAAG,KAAK;IAChB,IAGI,aAAa,CAAC,aAAsB,EAAA;QACpC,IAAI,aAAa,EAAE;AACf,YAAA,IAAI,CAAC,OAAO,GAAG,KAAK;QACxB;AACA,QAAA,IAAI,CAAC,cAAc,GAAG,aAAa;IACvC;AAEA,IAAA,IAAI,aAAa,GAAA;QACb,OAAO,IAAI,CAAC,cAAc;IAC9B;IAES,OAAO,GAAG,KAAK;AAExB;;;AAGG;IAIH,eAAe,GAAG,KAAK;AAEvB;;;AAGG;IAIH,cAAc,GAAG,KAAK;IAKtB,QAAQ,GAAG,KAAK;IAEhB,IAGI,IAAI,CAAC,IAAY,EAAA;AACjB,QAAA,IAAI,CAAC,KAAK,GAAG,IAAI;IACrB;AACA,IAAA,IAAI,IAAI,GAAA;QACJ,OAAO,IAAI,CAAC,KAAK;IACrB;;AAEmB,IAAA,MAAM,GAA0B,IAAI,YAAY,EAAW;IAE9E,WAAW,GAA+B,OAAO;IACjD,QAAQ,GAAG,KAAK;IAChB,OAAO,GAAG,KAAK;IAEP,cAAc,GAAG,KAAK;IACtB,KAAK,GAAG,EAAE;AACV,IAAA,6BAA6B;AACrC,IAAA,SAAS;IAET,WAAW,GAAA;AACP,QAAA,IAAI,IAAI,CAAC,YAAY,EAAE;AACnB,YAAA,IAAI,CAAC,QAAQ,GAAG,CAAC,CAAC,IAAI,CAAC,YAAY,CAAC,aAAa,CAAC,WAAW,EAAE,IAAI,EAAE;QACzE;IACJ;IAEA,QAAQ,GAAA;QACJ,IAAI,CAAC,cAAc,CAAC,eAAe,CAAC,CAAC,OAAO,CAAC,CAAC;IAClD;IAEA,kBAAkB,GAAA;AACd,QAAA,IAAI,IAAI,CAAC,YAAY,EAAE;AACnB,YAAA,IAAI,CAAC,QAAQ,GAAG,CAAC,CAAC,IAAI,CAAC,YAAY,CAAC,aAAa,CAAC,WAAW,EAAE,IAAI,EAAE;QACzE;IACJ;IAEA,YAAY,GAAA;AACR,QAAA,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE;AAChB,YAAA,IAAI,CAAC,OAAO,GAAG,IAAI;QACvB;IACJ;IAEA,YAAY,GAAA;AACR,QAAA,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE;AAChB,YAAA,IAAI,CAAC,OAAO,GAAG,KAAK;QACxB;IACJ;AAEA,IAAA,aAAa,CAAC,KAAkB,EAAA;AAC5B,QAAA,IAAI,IAAI,CAAC,eAAe,EAAE;;YAEtB,KAAK,EAAE,cAAc,EAAE;YACvB;QACJ;AACA,QAAA,IAAI,IAAI,CAAC,SAAS,EAAE;YAChB,IAAI,CAAC,SAAS,EAAE;QACpB;AACA,QAAA,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE;AAChB,YAAA,IAAI,IAAI,CAAC,aAAa,EAAE;;;AAGpB,gBAAA,IAAI,CAAC,OAAO,GAAG,IAAI;AACnB,gBAAA,IAAI,CAAC,aAAa,GAAG,KAAK;YAC9B;iBAAO;AACH,gBAAA,IAAI,CAAC,OAAO,GAAG,CAAC,IAAI,CAAC,OAAO;gBAC5B,IAAI,CAAC,KAAK,EAAE;YAChB;YACA,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC;AAC9B,YAAA,IAAI,IAAI,CAAC,6BAA6B,EAAE;AACpC,gBAAA,IAAI,CAAC,6BAA6B,CAAC,IAAI,CAAC,OAAO,CAAC;YACpD;;;AAIA,YAAA,IAAI,IAAI,CAAC,YAAY,EAAE;gBACnB,IAAI,CAAC,YAAY,CAAC,aAAa,CAAC,OAAO,GAAG,IAAI,CAAC,OAAO;YAC1D;QACJ;IACJ;IAEA,KAAK,GAAA;AACD,QAAA,IAAI,CAAC,YAAY,CAAC,aAAa,CAAC,KAAK,EAAE;IAC3C;AAEA,IAAA,UAAU,CAAC,KAAc,EAAA;AACrB,QAAA,IAAI,CAAC,OAAO,GAAG,KAAK;IACxB;AACA,IAAA,gBAAgB,CAAC,EAA4B,EAAA;AACzC,QAAA,IAAI,CAAC,6BAA6B,GAAG,EAAE;IAC3C;AACA,IAAA,iBAAiB,CAAC,EAAc,EAAA;AAC5B,QAAA,IAAI,CAAC,SAAS,GAAG,EAAE;IACvB;AACA,IAAA,gBAAgB,CAAC,UAAmB,EAAA;AAChC,QAAA,IAAI,CAAC,QAAQ,GAAG,UAAU;IAC9B;IAEA,QAAQ,GAAA;QACJ,MAAM,UAAU,GAAG,CAAC,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,QAAQ;QACjD,QACI,UAAU,IAAI;AACV,YAAA,OAAO,EAAE,IAAI;AAChB,SAAA;IAET;AAEA,IAAA,yBAAyB,CAAC,KAAiB,EAAA;AACvC,QAAA,IAAI,CAAC,CAAC,KAAK,CAAC,MAAM,IAAI,IAAI,CAAC,YAAY,CAAC,aAAa,CAAC,QAAQ,CAAC,KAAK,CAAC,MAAqB,CAAC,EAAE;YACzF,KAAK,CAAC,eAAe,EAAE;QAC3B;IACJ;uGAjKS,iBAAiB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;2FAAjB,iBAAiB,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,aAAA,EAAA,MAAA,EAAA,EAAA,SAAA,EAAA,CAAA,YAAA,EAAA,WAAA,CAAA,EAAA,cAAA,EAAA,CAAA,iBAAA,EAAA,gBAAA,CAAA,EAAA,eAAA,EAAA,CAAA,kBAAA,EAAA,iBAAA,CAAA,EAAA,QAAA,EAAA,CAAA,UAAA,EAAA,UAAA,EAQX,gBAAgB,CAAA,EAAA,aAAA,EAAA,CAAA,eAAA,EAAA,eAAA,EAIhB,gBAAgB,CAAA,EAAA,OAAA,EAAA,SAAA,EAAA,eAAA,EAAA,CAAA,iBAAA,EAAA,iBAAA,EAoBhB,gBAAgB,CAAA,EAAA,cAAA,EAAA,CAAA,gBAAA,EAAA,gBAAA,EAShB,gBAAgB,CAAA,EAAA,QAAA,EAAA,CAAA,UAAA,EAAA,UAAA,EAKhB,gBAAgB,CAAA,EAAA,IAAA,EAAA,MAAA,EAAA,EAAA,OAAA,EAAA,EAAA,MAAA,EAAA,QAAA,EAAA,EAAA,SAAA,EAzDpB;YACP,kCAAkC;AAClC,YAAA;AACI,gBAAA,OAAO,EAAE,aAAa;AACtB,gBAAA,WAAW,EAAE,iBAAiB;AAC9B,gBAAA,KAAK,EAAE,IAAI;AACd,aAAA;SACJ,EAAA,WAAA,EAAA,CAAA,EAAA,YAAA,EAAA,cAAA,EAAA,KAAA,EAAA,IAAA,EAAA,SAAA,EAAA,CAAA,OAAA,CAAA,EAAA,WAAA,EAAA,IAAA,EAAA,MAAA,EAAA,IAAA,EAAA,EAAA,EAAA,YAAA,EAAA,cAAA,EAAA,KAAA,EAAA,IAAA,EAAA,SAAA,EAAA,CAAA,OAAA,CAAA,EAAA,WAAA,EAAA,IAAA,EAAA,MAAA,EAAA,IAAA,EAAA,CAAA,EAAA,aAAA,EAAA,IAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,ECrCL,szDAqDA,m7IDxBc,eAAe,EAAA,QAAA,EAAA,WAAA,EAAA,MAAA,EAAA,CAAA,UAAA,EAAA,OAAA,EAAA,MAAA,CAAA,EAAA,OAAA,EAAA,CAAA,YAAA,CAAA,EAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,aAAA,EAAA,EAAA,CAAA,iBAAA,CAAA,IAAA,EAAA,CAAA;;2FAYhB,iBAAiB,EAAA,UAAA,EAAA,CAAA;kBAhB7B,SAAS;sCACW,uBAAuB,CAAC,MAAM,EAAA,QAAA,EACrC,aAAa,WAEd,CAAC,eAAe,CAAC,EAAA,SAAA,EACf;wBACP,kCAAkC;AAClC,wBAAA;AACI,4BAAA,OAAO,EAAE,aAAa;AACtB,4BAAA,WAAW,EAAA,iBAAmB;AAC9B,4BAAA,KAAK,EAAE,IAAI;AACd,yBAAA;qBACJ,EAAA,aAAA,EAEc,iBAAiB,CAAC,IAAI,EAAA,QAAA,EAAA,szDAAA,EAAA,MAAA,EAAA,CAAA,23IAAA,CAAA,EAAA;;sBAIpC,SAAS;AAAC,gBAAA,IAAA,EAAA,CAAA,OAAO,EAAE,EAAE,MAAM,EAAE,IAAI,EAAE;;sBACnC,SAAS;AAAC,gBAAA,IAAA,EAAA,CAAA,OAAO,EAAE,EAAE,MAAM,EAAE,IAAI,EAAE;;sBACnC,KAAK;uBAAC,YAAY;;sBAClB,KAAK;uBAAC,iBAAiB;;sBACvB,KAAK;uBAAC,kBAAkB;;sBACxB,KAAK;AAAC,gBAAA,IAAA,EAAA,CAAA;AACH,wBAAA,SAAS,EAAE,gBAAgB;AAC9B,qBAAA;;sBAEA,KAAK;AAAC,gBAAA,IAAA,EAAA,CAAA;AACH,wBAAA,SAAS,EAAE,gBAAgB;AAC9B,qBAAA;;sBAYA;;sBAMA,KAAK;AAAC,gBAAA,IAAA,EAAA,CAAA;AACH,wBAAA,SAAS,EAAE,gBAAgB;AAC9B,qBAAA;;sBAOA,KAAK;AAAC,gBAAA,IAAA,EAAA,CAAA;AACH,wBAAA,SAAS,EAAE,gBAAgB;AAC9B,qBAAA;;sBAGA,KAAK;AAAC,gBAAA,IAAA,EAAA,CAAA;AACH,wBAAA,SAAS,EAAE,gBAAgB;AAC9B,qBAAA;;sBAGA,KAAK;AAAC,gBAAA,IAAA,EAAA,CAAA;AACH,wBAAA,QAAQ,EAAE,IAAI;AACjB,qBAAA;;sBAQA;;;AErGL;;AAEG;;;;"}
|
|
1
|
+
{"version":3,"file":"agorapulse-ui-components-checkbox.mjs","sources":["../../../libs/ui-components/checkbox/src/checkbox.component.ts","../../../libs/ui-components/checkbox/src/checkbox.component.html","../../../libs/ui-components/checkbox/src/agorapulse-ui-components-checkbox.ts"],"sourcesContent":["import { apCheck, SymbolComponent, SymbolRegistry } from '@agorapulse/ui-symbol';\nimport {\n AfterContentInit,\n booleanAttribute,\n ChangeDetectionStrategy,\n Component,\n ElementRef,\n EventEmitter,\n forwardRef,\n inject,\n Input,\n OnChanges,\n OnInit,\n Output,\n ViewChild,\n ViewEncapsulation,\n} from '@angular/core';\nimport { ControlValueAccessor, NG_VALIDATORS, NG_VALUE_ACCESSOR } from '@angular/forms';\n\nexport const AP_CHECKBOX_CONTROL_VALUE_ACCESSOR = {\n provide: NG_VALUE_ACCESSOR,\n useExisting: forwardRef(() => CheckboxComponent),\n multi: true,\n};\n\n@Component({\n changeDetection: ChangeDetectionStrategy.OnPush,\n selector: 'ap-checkbox',\n styleUrls: ['./checkbox.component.scss'],\n imports: [SymbolComponent],\n providers: [\n AP_CHECKBOX_CONTROL_VALUE_ACCESSOR,\n {\n provide: NG_VALIDATORS,\n useExisting: CheckboxComponent,\n multi: true,\n },\n ],\n templateUrl: './checkbox.component.html',\n encapsulation: ViewEncapsulation.None,\n})\nexport class CheckboxComponent implements ControlValueAccessor, AfterContentInit, OnChanges, OnInit {\n private readonly symbolRegistry = inject(SymbolRegistry);\n @ViewChild('input', { static: true }) inputElement!: ElementRef<HTMLInputElement>;\n @ViewChild('label', { static: true }) labelElement!: ElementRef<HTMLInputElement>;\n @Input('aria-label') ariaLabel?: string;\n @Input('aria-labelledby') ariaLabelledby?: string;\n @Input('aria-describedby') ariaDescribedby?: string;\n @Input({\n transform: booleanAttribute,\n })\n disabled = false;\n @Input({\n transform: booleanAttribute,\n })\n set indeterminate(indeterminate: boolean) {\n if (indeterminate) {\n this.checked = false;\n }\n this._indeterminate = indeterminate;\n }\n\n get indeterminate(): boolean {\n return this._indeterminate;\n }\n\n @Input() checked = false;\n\n /**\n * Swallows clicks so the box only mirrors the `checked` it is given — set it where the\n * surrounding element handles the click. Left off, the box owns its value, as `ngModel` needs.\n */\n @Input({\n transform: booleanAttribute,\n })\n fullyControlled = false;\n\n /**\n * Hides the box from assistive tech and from the tab order: decoration for a control that\n * carries the state itself, such as an `option` in a multi-select listbox.\n */\n @Input({\n transform: booleanAttribute,\n })\n presentational = false;\n\n @Input({\n transform: booleanAttribute,\n })\n required = false;\n\n @Input({\n required: true,\n })\n set name(name: string) {\n this._name = name;\n }\n get name(): string {\n return this._name;\n }\n // eslint-disable-next-line\n @Output() readonly change: EventEmitter<boolean> = new EventEmitter<boolean>();\n\n ariaChecked: 'true' | 'false' | 'mixed' = 'false';\n hasLabel = false;\n hovered = false;\n\n private _indeterminate = false;\n private _name = '';\n private _controlValueAccessorChangeFn!: (value: boolean) => void;\n onTouched!: () => void;\n\n ngOnChanges(): void {\n if (this.labelElement) {\n this.hasLabel = !!this.labelElement.nativeElement.textContent?.trim();\n }\n }\n\n ngOnInit() {\n this.symbolRegistry.registerSymbols([apCheck]);\n }\n\n ngAfterContentInit(): void {\n if (this.labelElement) {\n this.hasLabel = !!this.labelElement.nativeElement.textContent?.trim();\n }\n }\n\n onMouseEnter(): void {\n if (!this.disabled) {\n this.hovered = true;\n }\n }\n\n onMouseLeave(): void {\n if (!this.disabled) {\n this.hovered = false;\n }\n }\n\n onValueChange(event?: MouseEvent) {\n if (this.fullyControlled) {\n // The browser flips a native checkbox before any binding can correct it, so block that here.\n event?.preventDefault();\n return;\n }\n if (this.onTouched) {\n this.onTouched();\n }\n if (!this.disabled) {\n if (this.indeterminate) {\n // Activating a partly selected group completes it. Emptying it is the other reading,\n // and it reads as nothing happening: the box was unchecked and stays unchecked.\n this.checked = true;\n this.indeterminate = false;\n } else {\n this.checked = !this.checked;\n this.focus();\n }\n this.change.emit(this.checked);\n if (this._controlValueAccessorChangeFn) {\n this._controlValueAccessorChangeFn(this.checked);\n }\n\n // Assigning the value again here is redundant, but we have to do it in case it was\n // changed inside the `change` listener which will cause the input to be out of sync.\n if (this.inputElement) {\n this.inputElement.nativeElement.checked = this.checked;\n }\n }\n }\n\n focus() {\n this.inputElement.nativeElement.focus();\n }\n\n writeValue(value: boolean): void {\n this.checked = value;\n }\n registerOnChange(fn: (value: boolean) => void): void {\n this._controlValueAccessorChangeFn = fn;\n }\n registerOnTouched(fn: () => void): void {\n this.onTouched = fn;\n }\n setDisabledState(isDisabled: boolean): void {\n this.disabled = isDisabled;\n }\n\n validate() {\n const isNotValid = !this.checked && this.required;\n return (\n isNotValid && {\n invalid: true,\n }\n );\n }\n\n _preventBubblingFromLabel(event: MouseEvent) {\n if (!!event.target && this.labelElement.nativeElement.contains(event.target as HTMLElement)) {\n event.stopPropagation();\n }\n }\n}\n","<div\n class=\"checkbox\"\n (click)=\"_preventBubblingFromLabel($event)\">\n <div\n class=\"checkbox-container\"\n [class.hover]=\"hovered\"\n [class.checked]=\"checked\"\n [class.indeterminate]=\"indeterminate && !checked\"\n [class.disabled]=\"disabled\"\n [class.has-label]=\"hasLabel\"\n [class.required]=\"required\">\n <input\n #input\n type=\"checkbox\"\n [id]=\"name\"\n [attr.aria-hidden]=\"presentational || null\"\n [attr.tabindex]=\"presentational ? -1 : null\"\n [class.disabled]=\"disabled\"\n [disabled]=\"disabled\"\n [checked]=\"checked\"\n [indeterminate]=\"indeterminate && !checked\"\n [required]=\"required\"\n [attr.aria-label]=\"ariaLabel\"\n [attr.aria-labelledby]=\"ariaLabelledby\"\n [attr.aria-describedby]=\"ariaDescribedby\"\n [attr.data-test]=\"name\"\n (click)=\"onValueChange($event)\" />\n <span\n class=\"checkbox\"\n (mouseenter)=\"onMouseEnter()\"\n (mouseleave)=\"onMouseLeave()\"\n (click)=\"onValueChange($event)\">\n @if (checked) {\n <span class=\"checkmark\">\n <ap-symbol\n symbolId=\"check\"\n color=\"white\"\n [size]=\"10\" />\n </span>\n }\n @if (indeterminate && !checked) {\n <span class=\"indeterminate\"></span>\n }\n </span>\n </div>\n <label\n #label\n [class.disabled]=\"disabled\"\n [for]=\"name\">\n <ng-content />\n </label>\n</div>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public_api';\n"],"names":[],"mappings":"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"}
|
|
@@ -759,8 +759,12 @@ class DatepickerSelectComponent {
|
|
|
759
759
|
ariaLabel = input(undefined, /* @ts-ignore */
|
|
760
760
|
...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
|
|
761
761
|
/**
|
|
762
|
-
*
|
|
763
|
-
*
|
|
762
|
+
* How the field writes its dates, in every mode: a dayjs pattern, or `Intl.DateTimeFormat` options
|
|
763
|
+
* for the locale's own wording — with options, a period is written by `formatRange`, which writes
|
|
764
|
+
* what both ends share once ("Mar 2 – 15").
|
|
765
|
+
*
|
|
766
|
+
* Defaults to `'MM/DD/YYYY'`, which needs no plugin: the localized dayjs tokens (`ll`, `LL`) assume
|
|
767
|
+
* the host application loaded `dayjs/plugin/localizedFormat`.
|
|
764
768
|
*/
|
|
765
769
|
dateFormat = input('MM/DD/YYYY', /* @ts-ignore */
|
|
766
770
|
...(ngDevMode ? [{ debugName: "dateFormat" }] : /* istanbul ignore next */ []));
|
|
@@ -854,29 +858,44 @@ class DatepickerSelectComponent {
|
|
|
854
858
|
return startDate !== undefined || endDate !== undefined;
|
|
855
859
|
}, /* @ts-ignore */
|
|
856
860
|
...(ngDevMode ? [{ debugName: "hasValue" }] : /* istanbul ignore next */ []));
|
|
861
|
+
/** `dateFormat` applied, built once per format and locale rather than per date written. */
|
|
862
|
+
writer = computed(() => {
|
|
863
|
+
const format = this.dateFormat();
|
|
864
|
+
const locale = this.locale();
|
|
865
|
+
if (typeof format === 'string') {
|
|
866
|
+
const writeDate = (date) => date.locale(locale).format(format);
|
|
867
|
+
return { date: writeDate, period: (startDate, endDate) => `${writeDate(startDate)} - ${writeDate(endDate)}` };
|
|
868
|
+
}
|
|
869
|
+
const intl = new Intl.DateTimeFormat(locale, format);
|
|
870
|
+
return {
|
|
871
|
+
date: date => intl.format(date.toDate()),
|
|
872
|
+
period: (startDate, endDate) => intl.formatRange(startDate.toDate(), endDate.toDate()),
|
|
873
|
+
};
|
|
874
|
+
}, /* @ts-ignore */
|
|
875
|
+
...(ngDevMode ? [{ debugName: "writer" }] : /* istanbul ignore next */ []));
|
|
857
876
|
/** The field's text: a one-day period reads as that day. Empty in Multiple, where the field shows chips instead. */
|
|
858
877
|
displayed = computed(() => {
|
|
859
|
-
const
|
|
878
|
+
const writer = this.writer();
|
|
860
879
|
const mode = this.mode();
|
|
861
880
|
if (mode === DatepickerMode.Single) {
|
|
862
881
|
const date = this.selectedDate();
|
|
863
|
-
return date ?
|
|
882
|
+
return date ? writer.date(date) : '';
|
|
864
883
|
}
|
|
865
884
|
if (mode === DatepickerMode.Range) {
|
|
866
885
|
const { startDate, endDate } = this.selectedPeriod();
|
|
867
886
|
if (!startDate || !endDate) {
|
|
868
887
|
return '';
|
|
869
888
|
}
|
|
870
|
-
return startDate.isSame(endDate, 'day') ?
|
|
889
|
+
return startDate.isSame(endDate, 'day') ? writer.date(startDate) : writer.period(startDate, endDate);
|
|
871
890
|
}
|
|
872
891
|
return '';
|
|
873
892
|
}, /* @ts-ignore */
|
|
874
893
|
...(ngDevMode ? [{ debugName: "displayed" }] : /* istanbul ignore next */ []));
|
|
875
894
|
/** The chips shown in Multiple mode, one per selected date. */
|
|
876
|
-
chips = computed(() =>
|
|
877
|
-
|
|
878
|
-
date,
|
|
879
|
-
}
|
|
895
|
+
chips = computed(() => {
|
|
896
|
+
const writer = this.writer();
|
|
897
|
+
return this.selectedDates().map(date => ({ label: writer.date(date), date }));
|
|
898
|
+
}, /* @ts-ignore */
|
|
880
899
|
...(ngDevMode ? [{ debugName: "chips" }] : /* istanbul ignore next */ []));
|
|
881
900
|
/** The zone abbreviation ("EST", "CEST"…), computed without touching dayjs globally. */
|
|
882
901
|
timeZoneOffset = computed(() => {
|