@anglr/select 16.0.0 → 16.0.1-beta.20260422124048
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/changelog.md +11 -0
- package/es2022/src/pipes/displayValue/displayValue.pipe.js +7 -1
- package/es2022/src/pipes/displayValue/displayValue.pipe.js.map +1 -1
- package/es2022/src/plugins/normalState/editNormalState/editNormalState.component.js +3 -2
- package/es2022/src/plugins/normalState/editNormalState/editNormalState.component.js.map +1 -1
- package/es2022/src/plugins/normalState/simpleNormalState/simpleNormalState.component.js +3 -2
- package/es2022/src/plugins/normalState/simpleNormalState/simpleNormalState.component.js.map +1 -1
- package/package.json +1 -1
- package/src/pipes/displayValue/displayValue.pipe.d.ts +6 -1
- package/src/pipes/displayValue/displayValue.pipe.d.ts.map +1 -1
- package/src/plugins/normalState/editNormalState/editNormalState.component.d.ts.map +1 -1
- package/src/plugins/normalState/editNormalState/editNormalState.component.html +3 -2
- package/src/plugins/normalState/simpleNormalState/simpleNormalState.component.d.ts.map +1 -1
- package/src/plugins/normalState/simpleNormalState/simpleNormalState.component.html +2 -1
- package/styles/components/_liveSearch.scss +3 -1
- package/styles/components/_normalState.scss +32 -3
- package/styles/components/_popup.scss +9 -2
- package/styles/core/_defaultTheme.scss +24 -2
- package/styles/themes/dark.scss +11 -1
- package/styles/themes/light.scss +12 -1
- package/version.bak +1 -1
package/changelog.md
CHANGED
|
@@ -1,5 +1,16 @@
|
|
|
1
1
|
# Changelog
|
|
2
2
|
|
|
3
|
+
## Version 16.0.1 (2026-04-22)
|
|
4
|
+
|
|
5
|
+
### Bug Fixes
|
|
6
|
+
|
|
7
|
+
- fixed missing styles for styling *normal state* and corresponding css variables
|
|
8
|
+
- fixed missing styles for styling *popup* and corresponding css variables
|
|
9
|
+
- fixed `SimpleNormalState` plugin component
|
|
10
|
+
- fixed disabled state visually and functionally
|
|
11
|
+
- fixed `EditNormalState` plugin component
|
|
12
|
+
- fixed disabled state visually and functionally
|
|
13
|
+
|
|
3
14
|
## Version 16.0.0 (2026-04-15)
|
|
4
15
|
|
|
5
16
|
### Features
|
|
@@ -1,9 +1,10 @@
|
|
|
1
1
|
import { inject, Pipe } from '@angular/core';
|
|
2
|
+
import { LOGGER } from '@anglr/common';
|
|
2
3
|
import { isBlank } from '@jscrpt/common';
|
|
3
4
|
import { SelectBus } from '../../misc/classes';
|
|
4
5
|
import * as i0 from "@angular/core";
|
|
5
6
|
/**
|
|
6
|
-
* Pipe to transform select selected option into
|
|
7
|
+
* Pipe to transform select selected option into string
|
|
7
8
|
*/
|
|
8
9
|
export class DisplayValue {
|
|
9
10
|
constructor() {
|
|
@@ -12,6 +13,10 @@ export class DisplayValue {
|
|
|
12
13
|
* Select bus used in Select for comunication between plugins and Select
|
|
13
14
|
*/
|
|
14
15
|
this.selectBus = inject(SelectBus);
|
|
16
|
+
/**
|
|
17
|
+
* Logger used for logging in this pipe
|
|
18
|
+
*/
|
|
19
|
+
this.logger = inject(LOGGER);
|
|
15
20
|
}
|
|
16
21
|
//######################### public methods - implementation of PipeTransform #########################
|
|
17
22
|
/**
|
|
@@ -20,6 +25,7 @@ export class DisplayValue {
|
|
|
20
25
|
* @param placeholderOverride - Placeholder override to be used instead of default placeholder
|
|
21
26
|
*/
|
|
22
27
|
transform(option, placeholderOverride = undefined) {
|
|
28
|
+
this.logger.verbose('Select: DisplayValue: transforming selected options {{@(4)options}}', { options: option });
|
|
23
29
|
if (isBlank(option) || (Array.isArray(option) && !option.length)) {
|
|
24
30
|
return placeholderOverride ?? this.selectBus.selectOptions().placeholder;
|
|
25
31
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"displayValue.pipe.js","sourceRoot":"","sources":["../../../../src/pipes/displayValue/displayValue.pipe.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,MAAM,EAAE,IAAI,EAAgB,MAAM,eAAe,CAAC;AAC1D,OAAO,EAAC,OAAO,EAAC,MAAM,gBAAgB,CAAC;AAGvC,OAAO,EAAC,SAAS,EAAC,MAAM,oBAAoB,CAAC;;AAE7C;;GAEG;AAEH,MAAM,OAAO,YAAY;IADzB;QAGI,sEAAsE;QAEtE;;WAEG;QACO,cAAS,GAAsB,MAAM,CAAC,SAAS,CAAsB,CAAC;
|
|
1
|
+
{"version":3,"file":"displayValue.pipe.js","sourceRoot":"","sources":["../../../../src/pipes/displayValue/displayValue.pipe.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,MAAM,EAAE,IAAI,EAAgB,MAAM,eAAe,CAAC;AAC1D,OAAO,EAAC,MAAM,EAAS,MAAM,eAAe,CAAC;AAC7C,OAAO,EAAC,OAAO,EAAC,MAAM,gBAAgB,CAAC;AAGvC,OAAO,EAAC,SAAS,EAAC,MAAM,oBAAoB,CAAC;;AAE7C;;GAEG;AAEH,MAAM,OAAO,YAAY;IADzB;QAGI,sEAAsE;QAEtE;;WAEG;QACO,cAAS,GAAsB,MAAM,CAAC,SAAS,CAAsB,CAAC;QAEhF;;WAEG;QACO,WAAM,GAAW,MAAM,CAAC,MAAM,CAAC,CAAC;KAyB7C;IAvBG,sGAAsG;IAEtG;;;;OAIG;IACI,SAAS,CAAC,MAAuE,EAAE,sBAA6C,SAAS;QAE5I,IAAI,CAAC,MAAM,CAAC,OAAO,CAAC,qEAAqE,EAAE,EAAC,OAAO,EAAE,MAAM,EAAC,CAAC,CAAC;QAE9G,IAAG,OAAO,CAAC,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,MAAM,CAAC,IAAI,CAAC,MAAM,CAAC,MAAM,CAAC,EAC/D,CAAC;YACG,OAAO,mBAAmB,IAAI,IAAI,CAAC,SAAS,CAAC,aAAa,EAAE,CAAC,WAAW,CAAC;QAC7E,CAAC;QAED,IAAG,KAAK,CAAC,OAAO,CAAC,MAAM,CAAC,EACxB,CAAC;YACG,OAAO,MAAM,CAAC,GAAG,CAAC,IAAI,CAAC,SAAS,CAAC,aAAa,EAAE,CAAC,oBAAoB,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QACtF,CAAC;QAED,OAAO,IAAI,CAAC,SAAS,CAAC,aAAa,EAAE,CAAC,oBAAoB,CAAC,MAAM,CAAC,CAAC;IACvE,CAAC;8GApCQ,YAAY;4GAAZ,YAAY;;2FAAZ,YAAY;kBADxB,IAAI;mBAAC,EAAC,IAAI,EAAE,cAAc,EAAC","sourcesContent":["import {inject, Pipe, PipeTransform} from '@angular/core';\nimport {LOGGER, Logger} from '@anglr/common';\nimport {isBlank} from '@jscrpt/common';\n\nimport {SelectOption} from '../../interfaces';\nimport {SelectBus} from '../../misc/classes';\n\n/**\n * Pipe to transform select selected option into string\n */\n@Pipe({name: 'displayValue'})\nexport class DisplayValue<TValue = unknown> implements PipeTransform\n{\n //######################### protected fields #########################\n\n /**\n * Select bus used in Select for comunication between plugins and Select\n */\n protected selectBus: SelectBus<TValue> = inject(SelectBus) as SelectBus<TValue>;\n\n /**\n * Logger used for logging in this pipe\n */\n protected logger: Logger = inject(LOGGER);\n\n //######################### public methods - implementation of PipeTransform #########################\n\n /**\n * Transforms selected option into string\n * @param option - Selected options to be transformed into text\n * @param placeholderOverride - Placeholder override to be used instead of default placeholder\n */\n public transform(option: SelectOption<TValue>|Array<SelectOption<TValue>>|undefined|null, placeholderOverride: string|undefined|null = undefined): string\n {\n this.logger.verbose('Select: DisplayValue: transforming selected options {{@(4)options}}', {options: option});\n\n if(isBlank(option) || (Array.isArray(option) && !option.length))\n {\n return placeholderOverride ?? this.selectBus.selectOptions().placeholder;\n }\n\n if(Array.isArray(option))\n {\n return option.map(this.selectBus.selectOptions().displaySelectedValue).join(', ');\n }\n\n return this.selectBus.selectOptions().displaySelectedValue(option);\n }\n}\n"]}
|
|
@@ -126,7 +126,7 @@ export class EditNormalState {
|
|
|
126
126
|
});
|
|
127
127
|
}
|
|
128
128
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: EditNormalState, deps: [{ token: NORMAL_STATE_OPTIONS, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
129
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.5", type: EditNormalState, isStandalone: true, selector: "edit-normal-state", host: { properties: { "class": "options.cssClasses.componentElement" } }, viewQueries: [{ propertyName: "liveSearchPlaceholder", first: true, predicate: ["liveSearchPlaceholder"], descendants: true, read: ElementRef, isSignal: true }], ngImport: i0, template: "<ng-template #defaultSingleLook=\"normalStateTemplate\" normalStateTemplate>{{selectBus.selectedOptions() | displayValue: '' | localize}}</ng-template>\n<ng-template #defaultMultipleLook=\"normalStateTagTemplate\" normalStateTagTemplate let-option let-normalState=\"normalState\">\n <div [class]=\"options.cssClasses.tag\">\n <span>{{option | displayValue | localize}}</span>\n <button type=\"button\" (click)=\"optionClick(option)\" tabindex=\"-1\" aria-hidden=\"true\">\n <span>x</span>\n </button>\n </div>\n</ng-template>\n\n<div [class]=\"options.cssClasses.valueWrapper\">\n @if(showValue())\n {\n <div [class]=\"cssClasses()\">\n @if(!selectBus.selectOptions().multiple)\n {\n <ng-container *ngTemplateOutlet=\"selectBus.selectOptions().templateGatherer.normalStateTemplate() || defaultSingleLook.template; context: {$implicit: $any(this)}\"/>\n }\n @else\n {\n @for(option of selectedOptionsMultiple(); track option)\n {\n <ng-container *ngTemplateOutlet=\"selectBus.selectOptions().templateGatherer.normalStateTagTemplate() || defaultMultipleLook.template; context: {$implicit: option, normalState: this}\"/>\n }\n }\n </div>\n }\n\n <ng-container #liveSearchPlaceholder/>\n</div>\n\n@if(options.cancelValue && (selectBus.selectedOptions() | hasValue))\n{\n <button type=\"button\"
|
|
129
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.5", type: EditNormalState, isStandalone: true, selector: "edit-normal-state", host: { properties: { "class": "options.cssClasses.componentElement", "class.disabled": "!!selectBus.selectOptions().readonly" } }, viewQueries: [{ propertyName: "liveSearchPlaceholder", first: true, predicate: ["liveSearchPlaceholder"], descendants: true, read: ElementRef, isSignal: true }], ngImport: i0, template: "<ng-template #defaultSingleLook=\"normalStateTemplate\" normalStateTemplate>{{selectBus.selectedOptions() | displayValue: '' | localize}}</ng-template>\n<ng-template #defaultMultipleLook=\"normalStateTagTemplate\" normalStateTagTemplate let-option let-normalState=\"normalState\">\n <div [class]=\"options.cssClasses.tag\">\n <span>{{option | displayValue | localize}}</span>\n <button type=\"button\" (click)=\"optionClick(option)\" tabindex=\"-1\" aria-hidden=\"true\">\n <span>x</span>\n </button>\n </div>\n</ng-template>\n\n<div [class]=\"options.cssClasses.valueWrapper\">\n @if(showValue())\n {\n <div [class]=\"cssClasses()\">\n @if(!selectBus.selectOptions().multiple)\n {\n <ng-container *ngTemplateOutlet=\"selectBus.selectOptions().templateGatherer.normalStateTemplate() || defaultSingleLook.template; context: {$implicit: $any(this)}\"/>\n }\n @else\n {\n @for(option of selectedOptionsMultiple(); track option)\n {\n <ng-container *ngTemplateOutlet=\"selectBus.selectOptions().templateGatherer.normalStateTagTemplate() || defaultMultipleLook.template; context: {$implicit: option, normalState: this}\"/>\n }\n }\n </div>\n }\n\n <ng-container #liveSearchPlaceholder/>\n</div>\n\n@if(options.cancelValue && (selectBus.selectedOptions() | hasValue))\n{\n <button type=\"button\"\n [disabled]=\"!!selectBus.selectOptions().readonly\"\n [class]=\"options.cssClasses.cancel\" \n [tooltip]=\"options.texts.cancelTitle | localize\" \n [attr.aria-label]=\"options.texts.cancelTitle | localize\"\n (focus)=\"handleFocus()\" \n (blur)=\"blur()\" \n (click)=\"cancel()\">\n <span [class]=\"options.cssClasses.cancelIcon\"></span>\n </button>\n}\n\n@if(options.carret)\n{\n <button type=\"button\" [disabled]=\"!!selectBus.selectOptions().readonly\" (click)=\"click(); selectBus.setFocus()\" (focus)=\"handleFocus()\" (blur)=\"blur()\" tabindex=\"-1\" aria-hidden=\"true\">\n <span [class]=\"options.cssClasses.carret\"></span>\n </button>\n}", dependencies: [{ kind: "directive", type: TooltipDirective, selector: "[tooltip]", inputs: ["tooltip", "allowHtml", "template", "tooltipOptions", "tooltipVisible", "containerElement"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: NormalStateTemplate, selector: "[normalStateTemplate]", exportAs: ["normalStateTemplate", ""] }, { kind: "directive", type: NormalStateTagTemplate, selector: "[normalStateTagTemplate]", exportAs: ["normalStateTagTemplate", ""] }, { kind: "pipe", type: HasValue, name: "hasValue" }, { kind: "pipe", type: DisplayValue, name: "displayValue" }, { kind: "pipe", type: LocalizePipe, name: "localize" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
130
130
|
}
|
|
131
131
|
__decorate([
|
|
132
132
|
CopyOptionsAsSignal(),
|
|
@@ -136,6 +136,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImpor
|
|
|
136
136
|
type: Component,
|
|
137
137
|
args: [{ selector: 'edit-normal-state', host: {
|
|
138
138
|
'[class]': 'options.cssClasses.componentElement',
|
|
139
|
+
'[class.disabled]': '!!selectBus.selectOptions().readonly',
|
|
139
140
|
}, imports: [
|
|
140
141
|
HasValue,
|
|
141
142
|
DisplayValue,
|
|
@@ -144,7 +145,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImpor
|
|
|
144
145
|
NgTemplateOutlet,
|
|
145
146
|
NormalStateTemplate,
|
|
146
147
|
NormalStateTagTemplate,
|
|
147
|
-
], changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-template #defaultSingleLook=\"normalStateTemplate\" normalStateTemplate>{{selectBus.selectedOptions() | displayValue: '' | localize}}</ng-template>\n<ng-template #defaultMultipleLook=\"normalStateTagTemplate\" normalStateTagTemplate let-option let-normalState=\"normalState\">\n <div [class]=\"options.cssClasses.tag\">\n <span>{{option | displayValue | localize}}</span>\n <button type=\"button\" (click)=\"optionClick(option)\" tabindex=\"-1\" aria-hidden=\"true\">\n <span>x</span>\n </button>\n </div>\n</ng-template>\n\n<div [class]=\"options.cssClasses.valueWrapper\">\n @if(showValue())\n {\n <div [class]=\"cssClasses()\">\n @if(!selectBus.selectOptions().multiple)\n {\n <ng-container *ngTemplateOutlet=\"selectBus.selectOptions().templateGatherer.normalStateTemplate() || defaultSingleLook.template; context: {$implicit: $any(this)}\"/>\n }\n @else\n {\n @for(option of selectedOptionsMultiple(); track option)\n {\n <ng-container *ngTemplateOutlet=\"selectBus.selectOptions().templateGatherer.normalStateTagTemplate() || defaultMultipleLook.template; context: {$implicit: option, normalState: this}\"/>\n }\n }\n </div>\n }\n\n <ng-container #liveSearchPlaceholder/>\n</div>\n\n@if(options.cancelValue && (selectBus.selectedOptions() | hasValue))\n{\n <button type=\"button\"
|
|
148
|
+
], changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-template #defaultSingleLook=\"normalStateTemplate\" normalStateTemplate>{{selectBus.selectedOptions() | displayValue: '' | localize}}</ng-template>\n<ng-template #defaultMultipleLook=\"normalStateTagTemplate\" normalStateTagTemplate let-option let-normalState=\"normalState\">\n <div [class]=\"options.cssClasses.tag\">\n <span>{{option | displayValue | localize}}</span>\n <button type=\"button\" (click)=\"optionClick(option)\" tabindex=\"-1\" aria-hidden=\"true\">\n <span>x</span>\n </button>\n </div>\n</ng-template>\n\n<div [class]=\"options.cssClasses.valueWrapper\">\n @if(showValue())\n {\n <div [class]=\"cssClasses()\">\n @if(!selectBus.selectOptions().multiple)\n {\n <ng-container *ngTemplateOutlet=\"selectBus.selectOptions().templateGatherer.normalStateTemplate() || defaultSingleLook.template; context: {$implicit: $any(this)}\"/>\n }\n @else\n {\n @for(option of selectedOptionsMultiple(); track option)\n {\n <ng-container *ngTemplateOutlet=\"selectBus.selectOptions().templateGatherer.normalStateTagTemplate() || defaultMultipleLook.template; context: {$implicit: option, normalState: this}\"/>\n }\n }\n </div>\n }\n\n <ng-container #liveSearchPlaceholder/>\n</div>\n\n@if(options.cancelValue && (selectBus.selectedOptions() | hasValue))\n{\n <button type=\"button\"\n [disabled]=\"!!selectBus.selectOptions().readonly\"\n [class]=\"options.cssClasses.cancel\" \n [tooltip]=\"options.texts.cancelTitle | localize\" \n [attr.aria-label]=\"options.texts.cancelTitle | localize\"\n (focus)=\"handleFocus()\" \n (blur)=\"blur()\" \n (click)=\"cancel()\">\n <span [class]=\"options.cssClasses.cancelIcon\"></span>\n </button>\n}\n\n@if(options.carret)\n{\n <button type=\"button\" [disabled]=\"!!selectBus.selectOptions().readonly\" (click)=\"click(); selectBus.setFocus()\" (focus)=\"handleFocus()\" (blur)=\"blur()\" tabindex=\"-1\" aria-hidden=\"true\">\n <span [class]=\"options.cssClasses.carret\"></span>\n </button>\n}" }]
|
|
148
149
|
}], ctorParameters: () => [{ type: undefined, decorators: [{
|
|
149
150
|
type: Inject,
|
|
150
151
|
args: [NORMAL_STATE_OPTIONS]
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"editNormalState.component.js","sourceRoot":"","sources":["../../../../../src/plugins/normalState/editNormalState/editNormalState.component.ts","../../../../../src/plugins/normalState/editNormalState/editNormalState.component.html"],"names":[],"mappings":"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","sourcesContent":["import {ChangeDetectionStrategy, Component, computed, effect, ElementRef, Inject, inject, Optional, Signal, viewChild} from '@angular/core';\nimport {NgTemplateOutlet} from '@angular/common';\nimport {LocalizePipe, TooltipDirective} from '@anglr/common';\nimport {RecursivePartial} from '@jscrpt/common';\nimport {deepCopyWithArrayOverride} from '@jscrpt/common/lodash';\n\nimport {NormalState, EditNormalStateOptions, SelectPlugin, EditNormalStateCssClasses, SelectOptionState} from '../../../interfaces';\nimport {SelectPluginInstances, SelectBus} from '../../../misc/classes';\nimport {CopyOptionsAsSignal} from '../../../decorators';\nimport {NORMAL_STATE_OPTIONS} from '../../../misc/tokens';\nimport {DisplayValue, HasValue} from '../../../pipes';\nimport {NormalStateTagTemplate, NormalStateTemplate} from '../../../directives';\nimport {hasValue} from '../../../misc/utils';\n\n//TODO: improvement, carret direction\n\nconst defaultOptions: EditNormalStateOptions<EditNormalStateCssClasses> =\n{\n cancelValue: true,\n carret: true,\n texts:\n {\n cancelTitle: 'cancel selected values',\n },\n cssClasses:\n {\n componentElement: 'normal-state-component',\n value: 'normal-state-value',\n tag: 'select-tag',\n carret: 'fas fa-caret-down select-align-self-center',\n cancel: 'normal-state-cancel',\n cancelIcon: 'fas fa-times select-align-self-center',\n valueWrapper: 'select-relative select-flex-1 select-flex-row select-normal-state-gap',\n valueMultiple: 'select-normal-state-gap select-flex-row',\n valueSingle: 'select-flex-1',\n },\n};\n\n/**\n * Simple normal state displaying value as 'button' that opens popup with options when clicked.\n */\n@Component(\n{\n selector: 'edit-normal-state',\n templateUrl: 'editNormalState.component.html',\n host:\n {\n '[class]': 'options.cssClasses.componentElement',\n },\n imports:\n [\n HasValue,\n DisplayValue,\n LocalizePipe,\n TooltipDirective,\n NgTemplateOutlet,\n NormalStateTemplate,\n NormalStateTagTemplate,\n ],\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class EditNormalState<TValue = unknown, TPublicValue = TValue> implements NormalState<TValue, TPublicValue, EditNormalStateOptions<EditNormalStateCssClasses>>\n{\n //######################### public properties - implementation of SelectPlugin #########################\n\n /**\n * @inheritdoc\n */\n @CopyOptionsAsSignal()\n public options: EditNormalStateOptions<EditNormalStateCssClasses>;\n\n /**\n * @inheritdoc\n */\n public selectPlugins: SelectPluginInstances<TValue, TPublicValue> = inject(SelectPluginInstances);\n\n /**\n * @inheritdoc\n */\n public pluginElement: ElementRef<HTMLElement> = inject(ElementRef);\n\n /**\n * @inheritdoc\n */\n public selectBus: SelectBus<TValue, TPublicValue> = inject(SelectBus);\n\n //######################### protected properties - template bindings #########################\n\n /**\n * Instance of selected options for multiple select\n */\n protected selectedOptionsMultiple: Signal<SelectOptionState<TValue>[]>;\n\n /**\n * Indication whether show value\n */\n protected showValue: Signal<boolean>;\n\n /**\n * Css classes applied to value element\n */\n protected cssClasses: Signal<string[]>;\n\n //######################### protected properties - children #########################\n\n /**\n * Instance of element that is used as placeholder for live search\n */\n protected liveSearchPlaceholder: Signal<ElementRef<HTMLElement>> = viewChild.required('liveSearchPlaceholder', {read: ElementRef});\n\n //######################### constructor #########################\n constructor(@Inject(NORMAL_STATE_OPTIONS) @Optional() options?: RecursivePartial<EditNormalStateOptions<EditNormalStateCssClasses>>|null,)\n {\n this.options = deepCopyWithArrayOverride(defaultOptions as EditNormalStateOptions<EditNormalStateCssClasses>,\n options);\n\n effect(() => this.liveSearchPlaceholder().nativeElement.after(this.selectPlugins.LiveSearch.pluginElement.nativeElement));\n\n this.selectedOptionsMultiple = computed(() =>\n {\n const selectedOptions = this.selectBus.selectedOptions();\n\n if(!this.selectBus.selectOptions().multiple || !Array.isArray(selectedOptions))\n {\n return [];\n }\n\n return selectedOptions;\n });\n\n this.showValue = computed(() => ((hasValue(this.selectBus.selectedOptions()) || !this.selectBus.selectOptions().multiple) &&\n (this.selectPlugins.liveSearch()?.emptyInput() || this.selectBus.selectOptions().multiple)) ||\n (!this.selectBus.selectOptions().multiple && !hasValue(this.selectBus.selectedOptions()) && !this.selectPlugins.liveSearch()?.emptyInput()));\n\n this.cssClasses = computed(() => [this.options.cssClasses.value,\n ...(this.selectBus.selectOptions().multiple ? [...this.options.cssClasses.valueMultiple.split(' ')] : [...this.options.cssClasses.valueSingle.split(' ')])]);\n }\n\n //######################### public methods - implementation of LiveSearch #########################\n\n /**\n * @inheritdoc\n */\n public focus(): void\n {\n }\n\n //######################### protected methods - template bindings #########################\n\n /**\n * Handles click event\n */\n protected click(): void\n {\n this.selectBus.click.next(\n {\n source: this as SelectPlugin,\n sourceElement: this.pluginElement.nativeElement,\n data: null,\n });\n }\n\n /**\n * Handles focus event\n */\n protected handleFocus(): void\n {\n this.selectBus.internalsFocus.next(\n {\n source: this as SelectPlugin,\n sourceElement: this.pluginElement.nativeElement,\n data: null,\n });\n }\n\n /**\n * Handles blur event\n */\n protected blur(): void\n {\n this.selectBus.internalsBlur.next(\n {\n source: this as SelectPlugin,\n sourceElement: this.pluginElement.nativeElement,\n data: null,\n });\n }\n\n /**\n * Handles cancel value\n */\n protected cancel(): void\n {\n this.selectBus.optionActivate.next(\n {\n source: this as SelectPlugin,\n sourceElement: this.pluginElement.nativeElement,\n data: null,\n });\n }\n\n /**\n * Handles option click\n * @param option - Option that was clicked\n */\n protected optionClick(option: SelectOptionState<TValue>): void\n {\n this.selectBus.optionActivate.next(\n {\n source: this as SelectPlugin,\n sourceElement: this.pluginElement.nativeElement,\n data: option,\n });\n }\n}\n","<ng-template #defaultSingleLook=\"normalStateTemplate\" normalStateTemplate>{{selectBus.selectedOptions() | displayValue: '' | localize}}</ng-template>\n<ng-template #defaultMultipleLook=\"normalStateTagTemplate\" normalStateTagTemplate let-option let-normalState=\"normalState\">\n <div [class]=\"options.cssClasses.tag\">\n <span>{{option | displayValue | localize}}</span>\n <button type=\"button\" (click)=\"optionClick(option)\" tabindex=\"-1\" aria-hidden=\"true\">\n <span>x</span>\n </button>\n </div>\n</ng-template>\n\n<div [class]=\"options.cssClasses.valueWrapper\">\n @if(showValue())\n {\n <div [class]=\"cssClasses()\">\n @if(!selectBus.selectOptions().multiple)\n {\n <ng-container *ngTemplateOutlet=\"selectBus.selectOptions().templateGatherer.normalStateTemplate() || defaultSingleLook.template; context: {$implicit: $any(this)}\"/>\n }\n @else\n {\n @for(option of selectedOptionsMultiple(); track option)\n {\n <ng-container *ngTemplateOutlet=\"selectBus.selectOptions().templateGatherer.normalStateTagTemplate() || defaultMultipleLook.template; context: {$implicit: option, normalState: this}\"/>\n }\n }\n </div>\n }\n\n <ng-container #liveSearchPlaceholder/>\n</div>\n\n@if(options.cancelValue && (selectBus.selectedOptions() | hasValue))\n{\n <button type=\"button\" \n [class]=\"options.cssClasses.cancel\" \n [tooltip]=\"options.texts.cancelTitle | localize\" \n [attr.aria-label]=\"options.texts.cancelTitle | localize\"\n (focus)=\"handleFocus()\" \n (blur)=\"blur()\" \n (click)=\"cancel()\">\n <span [class]=\"options.cssClasses.cancelIcon\"></span>\n </button>\n}\n\n@if(options.carret)\n{\n <button type=\"button\" (click)=\"click(); selectBus.setFocus()\" (focus)=\"handleFocus()\" (blur)=\"blur()\" tabindex=\"-1\" aria-hidden=\"true\">\n <span [class]=\"options.cssClasses.carret\"></span>\n </button>\n}"]}
|
|
1
|
+
{"version":3,"file":"editNormalState.component.js","sourceRoot":"","sources":["../../../../../src/plugins/normalState/editNormalState/editNormalState.component.ts","../../../../../src/plugins/normalState/editNormalState/editNormalState.component.html"],"names":[],"mappings":"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","sourcesContent":["import {ChangeDetectionStrategy, Component, computed, effect, ElementRef, Inject, inject, Optional, Signal, viewChild} from '@angular/core';\nimport {NgTemplateOutlet} from '@angular/common';\nimport {LocalizePipe, TooltipDirective} from '@anglr/common';\nimport {RecursivePartial} from '@jscrpt/common';\nimport {deepCopyWithArrayOverride} from '@jscrpt/common/lodash';\n\nimport {NormalState, EditNormalStateOptions, SelectPlugin, EditNormalStateCssClasses, SelectOptionState} from '../../../interfaces';\nimport {SelectPluginInstances, SelectBus} from '../../../misc/classes';\nimport {CopyOptionsAsSignal} from '../../../decorators';\nimport {NORMAL_STATE_OPTIONS} from '../../../misc/tokens';\nimport {DisplayValue, HasValue} from '../../../pipes';\nimport {NormalStateTagTemplate, NormalStateTemplate} from '../../../directives';\nimport {hasValue} from '../../../misc/utils';\n\n//TODO: improvement, carret direction\n\nconst defaultOptions: EditNormalStateOptions<EditNormalStateCssClasses> =\n{\n cancelValue: true,\n carret: true,\n texts:\n {\n cancelTitle: 'cancel selected values',\n },\n cssClasses:\n {\n componentElement: 'normal-state-component',\n value: 'normal-state-value',\n tag: 'select-tag',\n carret: 'fas fa-caret-down select-align-self-center',\n cancel: 'normal-state-cancel',\n cancelIcon: 'fas fa-times select-align-self-center',\n valueWrapper: 'select-relative select-flex-1 select-flex-row select-normal-state-gap',\n valueMultiple: 'select-normal-state-gap select-flex-row',\n valueSingle: 'select-flex-1',\n },\n};\n\n/**\n * Simple normal state displaying value as 'button' that opens popup with options when clicked.\n */\n@Component(\n{\n selector: 'edit-normal-state',\n templateUrl: 'editNormalState.component.html',\n host:\n {\n '[class]': 'options.cssClasses.componentElement',\n '[class.disabled]': '!!selectBus.selectOptions().readonly',\n },\n imports:\n [\n HasValue,\n DisplayValue,\n LocalizePipe,\n TooltipDirective,\n NgTemplateOutlet,\n NormalStateTemplate,\n NormalStateTagTemplate,\n ],\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class EditNormalState<TValue = unknown, TPublicValue = TValue> implements NormalState<TValue, TPublicValue, EditNormalStateOptions<EditNormalStateCssClasses>>\n{\n //######################### public properties - implementation of SelectPlugin #########################\n\n /**\n * @inheritdoc\n */\n @CopyOptionsAsSignal()\n public options: EditNormalStateOptions<EditNormalStateCssClasses>;\n\n /**\n * @inheritdoc\n */\n public selectPlugins: SelectPluginInstances<TValue, TPublicValue> = inject(SelectPluginInstances);\n\n /**\n * @inheritdoc\n */\n public pluginElement: ElementRef<HTMLElement> = inject(ElementRef);\n\n /**\n * @inheritdoc\n */\n public selectBus: SelectBus<TValue, TPublicValue> = inject(SelectBus);\n\n //######################### protected properties - template bindings #########################\n\n /**\n * Instance of selected options for multiple select\n */\n protected selectedOptionsMultiple: Signal<SelectOptionState<TValue>[]>;\n\n /**\n * Indication whether show value\n */\n protected showValue: Signal<boolean>;\n\n /**\n * Css classes applied to value element\n */\n protected cssClasses: Signal<string[]>;\n\n //######################### protected properties - children #########################\n\n /**\n * Instance of element that is used as placeholder for live search\n */\n protected liveSearchPlaceholder: Signal<ElementRef<HTMLElement>> = viewChild.required('liveSearchPlaceholder', {read: ElementRef});\n\n //######################### constructor #########################\n constructor(@Inject(NORMAL_STATE_OPTIONS) @Optional() options?: RecursivePartial<EditNormalStateOptions<EditNormalStateCssClasses>>|null,)\n {\n this.options = deepCopyWithArrayOverride(defaultOptions as EditNormalStateOptions<EditNormalStateCssClasses>,\n options);\n\n effect(() => this.liveSearchPlaceholder().nativeElement.after(this.selectPlugins.LiveSearch.pluginElement.nativeElement));\n\n this.selectedOptionsMultiple = computed(() =>\n {\n const selectedOptions = this.selectBus.selectedOptions();\n\n if(!this.selectBus.selectOptions().multiple || !Array.isArray(selectedOptions))\n {\n return [];\n }\n\n return selectedOptions;\n });\n\n this.showValue = computed(() => ((hasValue(this.selectBus.selectedOptions()) || !this.selectBus.selectOptions().multiple) &&\n (this.selectPlugins.liveSearch()?.emptyInput() || this.selectBus.selectOptions().multiple)) ||\n (!this.selectBus.selectOptions().multiple && !hasValue(this.selectBus.selectedOptions()) && !this.selectPlugins.liveSearch()?.emptyInput()));\n\n this.cssClasses = computed(() => [this.options.cssClasses.value,\n ...(this.selectBus.selectOptions().multiple ? [...this.options.cssClasses.valueMultiple.split(' ')] : [...this.options.cssClasses.valueSingle.split(' ')])]);\n }\n\n //######################### public methods - implementation of LiveSearch #########################\n\n /**\n * @inheritdoc\n */\n public focus(): void\n {\n }\n\n //######################### protected methods - template bindings #########################\n\n /**\n * Handles click event\n */\n protected click(): void\n {\n this.selectBus.click.next(\n {\n source: this as SelectPlugin,\n sourceElement: this.pluginElement.nativeElement,\n data: null,\n });\n }\n\n /**\n * Handles focus event\n */\n protected handleFocus(): void\n {\n this.selectBus.internalsFocus.next(\n {\n source: this as SelectPlugin,\n sourceElement: this.pluginElement.nativeElement,\n data: null,\n });\n }\n\n /**\n * Handles blur event\n */\n protected blur(): void\n {\n this.selectBus.internalsBlur.next(\n {\n source: this as SelectPlugin,\n sourceElement: this.pluginElement.nativeElement,\n data: null,\n });\n }\n\n /**\n * Handles cancel value\n */\n protected cancel(): void\n {\n this.selectBus.optionActivate.next(\n {\n source: this as SelectPlugin,\n sourceElement: this.pluginElement.nativeElement,\n data: null,\n });\n }\n\n /**\n * Handles option click\n * @param option - Option that was clicked\n */\n protected optionClick(option: SelectOptionState<TValue>): void\n {\n this.selectBus.optionActivate.next(\n {\n source: this as SelectPlugin,\n sourceElement: this.pluginElement.nativeElement,\n data: option,\n });\n }\n}\n","<ng-template #defaultSingleLook=\"normalStateTemplate\" normalStateTemplate>{{selectBus.selectedOptions() | displayValue: '' | localize}}</ng-template>\n<ng-template #defaultMultipleLook=\"normalStateTagTemplate\" normalStateTagTemplate let-option let-normalState=\"normalState\">\n <div [class]=\"options.cssClasses.tag\">\n <span>{{option | displayValue | localize}}</span>\n <button type=\"button\" (click)=\"optionClick(option)\" tabindex=\"-1\" aria-hidden=\"true\">\n <span>x</span>\n </button>\n </div>\n</ng-template>\n\n<div [class]=\"options.cssClasses.valueWrapper\">\n @if(showValue())\n {\n <div [class]=\"cssClasses()\">\n @if(!selectBus.selectOptions().multiple)\n {\n <ng-container *ngTemplateOutlet=\"selectBus.selectOptions().templateGatherer.normalStateTemplate() || defaultSingleLook.template; context: {$implicit: $any(this)}\"/>\n }\n @else\n {\n @for(option of selectedOptionsMultiple(); track option)\n {\n <ng-container *ngTemplateOutlet=\"selectBus.selectOptions().templateGatherer.normalStateTagTemplate() || defaultMultipleLook.template; context: {$implicit: option, normalState: this}\"/>\n }\n }\n </div>\n }\n\n <ng-container #liveSearchPlaceholder/>\n</div>\n\n@if(options.cancelValue && (selectBus.selectedOptions() | hasValue))\n{\n <button type=\"button\"\n [disabled]=\"!!selectBus.selectOptions().readonly\"\n [class]=\"options.cssClasses.cancel\" \n [tooltip]=\"options.texts.cancelTitle | localize\" \n [attr.aria-label]=\"options.texts.cancelTitle | localize\"\n (focus)=\"handleFocus()\" \n (blur)=\"blur()\" \n (click)=\"cancel()\">\n <span [class]=\"options.cssClasses.cancelIcon\"></span>\n </button>\n}\n\n@if(options.carret)\n{\n <button type=\"button\" [disabled]=\"!!selectBus.selectOptions().readonly\" (click)=\"click(); selectBus.setFocus()\" (focus)=\"handleFocus()\" (blur)=\"blur()\" tabindex=\"-1\" aria-hidden=\"true\">\n <span [class]=\"options.cssClasses.carret\"></span>\n </button>\n}"]}
|
|
@@ -99,7 +99,7 @@ export class SimpleNormalState {
|
|
|
99
99
|
});
|
|
100
100
|
}
|
|
101
101
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: SimpleNormalState, deps: [{ token: NORMAL_STATE_OPTIONS, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
102
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.5", type: SimpleNormalState, isStandalone: true, selector: "simple-normal-state", host: { properties: { "class": "options.cssClasses.componentElement" } }, viewQueries: [{ propertyName: "htmlButton", first: true, predicate: ["htmlButton"], descendants: true, read: ElementRef, isSignal: true }], ngImport: i0, template: "<ng-template #defaultLook>{{selectBus.selectedOptions() | displayValue | localize}}</ng-template>\n\n<button #htmlButton\n type=\"button\"\n role=\"combobox\"\n [class]=\"options.cssClasses.element\"\n [disabled]=\"!!selectBus.selectOptions().readonly\"\n [attr.aria-expanded]=\"selectBus.popupVisible()\"\n [attr.aria-controls]=\"selectBus.popupVisible() ? selectBus.id : null\"\n [attr.aria-activedescendant]=\"selectBus.popupVisible() ? activeDescendant() : null\"\n [attr.aria-label]=\"selectBus.selectedOptions() | displayValue | localize\"\n [tooltip]=\"selectBus.selectedOptions() | displayValue | localize\"\n (click)=\"click()\"\n (blur)=\"blur()\"\n (focus)=\"handleFocus()\">\n <span [class]=\"options.cssClasses.value\">\n <ng-container *ngTemplateOutlet=\"selectBus.selectOptions().templateGatherer.normalStateTemplate() || defaultLook; context: {$implicit: this}\"/>\n </span>\n</button>\n\n@if(options.cancelValue && (selectBus.selectedOptions() | hasValue))\n{\n <button type=\"button\" \n [class]=\"options.cssClasses.cancel\" \n [tooltip]=\"options.texts.cancelTitle | localize\" \n [attr.aria-label]=\"options.texts.cancelTitle | localize\"\n (click)=\"cancel()\" \n (blur)=\"blur()\" \n (focus)=\"handleFocus()\">\n <span [class]=\"options.cssClasses.cancelIcon\"></span>\n </button>\n}\n\n<button type=\"button\" [class]=\"options.cssClasses.carret\" (click)=\"click(); selectBus.setFocus()\" (focus)=\"handleFocus()\" (blur)=\"blur()\" tabindex=\"-1\" aria-hidden=\"true\">\n <span [class]=\"options.cssClasses.carretIcon\"></span>\n</button>", dependencies: [{ kind: "directive", type: TooltipDirective, selector: "[tooltip]", inputs: ["tooltip", "allowHtml", "template", "tooltipOptions", "tooltipVisible", "containerElement"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: HasValue, name: "hasValue" }, { kind: "pipe", type: DisplayValue, name: "displayValue" }, { kind: "pipe", type: LocalizePipe, name: "localize" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
102
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.5", type: SimpleNormalState, isStandalone: true, selector: "simple-normal-state", host: { properties: { "class": "options.cssClasses.componentElement", "class.disabled": "!!selectBus.selectOptions().readonly" } }, viewQueries: [{ propertyName: "htmlButton", first: true, predicate: ["htmlButton"], descendants: true, read: ElementRef, isSignal: true }], ngImport: i0, template: "<ng-template #defaultLook>{{selectBus.selectedOptions() | displayValue | localize}}</ng-template>\n\n<button #htmlButton\n type=\"button\"\n role=\"combobox\"\n [class]=\"options.cssClasses.element\"\n [disabled]=\"!!selectBus.selectOptions().readonly\"\n [attr.aria-expanded]=\"selectBus.popupVisible()\"\n [attr.aria-controls]=\"selectBus.popupVisible() ? selectBus.id : null\"\n [attr.aria-activedescendant]=\"selectBus.popupVisible() ? activeDescendant() : null\"\n [attr.aria-label]=\"selectBus.selectedOptions() | displayValue | localize\"\n [tooltip]=\"selectBus.selectedOptions() | displayValue | localize\"\n (click)=\"click()\"\n (blur)=\"blur()\"\n (focus)=\"handleFocus()\">\n <span [class]=\"options.cssClasses.value\">\n <ng-container *ngTemplateOutlet=\"selectBus.selectOptions().templateGatherer.normalStateTemplate() || defaultLook; context: {$implicit: this}\"/>\n </span>\n</button>\n\n@if(options.cancelValue && (selectBus.selectedOptions() | hasValue))\n{\n <button type=\"button\" \n [disabled]=\"!!selectBus.selectOptions().readonly\"\n [class]=\"options.cssClasses.cancel\" \n [tooltip]=\"options.texts.cancelTitle | localize\" \n [attr.aria-label]=\"options.texts.cancelTitle | localize\"\n (click)=\"cancel()\" \n (blur)=\"blur()\" \n (focus)=\"handleFocus()\">\n <span [class]=\"options.cssClasses.cancelIcon\"></span>\n </button>\n}\n\n<button type=\"button\" [class]=\"options.cssClasses.carret\" [disabled]=\"!!selectBus.selectOptions().readonly\" (click)=\"click(); selectBus.setFocus()\" (focus)=\"handleFocus()\" (blur)=\"blur()\" tabindex=\"-1\" aria-hidden=\"true\">\n <span [class]=\"options.cssClasses.carretIcon\"></span>\n</button>", dependencies: [{ kind: "directive", type: TooltipDirective, selector: "[tooltip]", inputs: ["tooltip", "allowHtml", "template", "tooltipOptions", "tooltipVisible", "containerElement"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: HasValue, name: "hasValue" }, { kind: "pipe", type: DisplayValue, name: "displayValue" }, { kind: "pipe", type: LocalizePipe, name: "localize" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
103
103
|
}
|
|
104
104
|
__decorate([
|
|
105
105
|
CopyOptionsAsSignal(),
|
|
@@ -109,13 +109,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImpor
|
|
|
109
109
|
type: Component,
|
|
110
110
|
args: [{ selector: 'simple-normal-state', host: {
|
|
111
111
|
'[class]': 'options.cssClasses.componentElement',
|
|
112
|
+
'[class.disabled]': '!!selectBus.selectOptions().readonly',
|
|
112
113
|
}, imports: [
|
|
113
114
|
HasValue,
|
|
114
115
|
DisplayValue,
|
|
115
116
|
LocalizePipe,
|
|
116
117
|
TooltipDirective,
|
|
117
118
|
NgTemplateOutlet,
|
|
118
|
-
], changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-template #defaultLook>{{selectBus.selectedOptions() | displayValue | localize}}</ng-template>\n\n<button #htmlButton\n type=\"button\"\n role=\"combobox\"\n [class]=\"options.cssClasses.element\"\n [disabled]=\"!!selectBus.selectOptions().readonly\"\n [attr.aria-expanded]=\"selectBus.popupVisible()\"\n [attr.aria-controls]=\"selectBus.popupVisible() ? selectBus.id : null\"\n [attr.aria-activedescendant]=\"selectBus.popupVisible() ? activeDescendant() : null\"\n [attr.aria-label]=\"selectBus.selectedOptions() | displayValue | localize\"\n [tooltip]=\"selectBus.selectedOptions() | displayValue | localize\"\n (click)=\"click()\"\n (blur)=\"blur()\"\n (focus)=\"handleFocus()\">\n <span [class]=\"options.cssClasses.value\">\n <ng-container *ngTemplateOutlet=\"selectBus.selectOptions().templateGatherer.normalStateTemplate() || defaultLook; context: {$implicit: this}\"/>\n </span>\n</button>\n\n@if(options.cancelValue && (selectBus.selectedOptions() | hasValue))\n{\n <button type=\"button\" \n [class]=\"options.cssClasses.cancel\" \n [tooltip]=\"options.texts.cancelTitle | localize\" \n [attr.aria-label]=\"options.texts.cancelTitle | localize\"\n (click)=\"cancel()\" \n (blur)=\"blur()\" \n (focus)=\"handleFocus()\">\n <span [class]=\"options.cssClasses.cancelIcon\"></span>\n </button>\n}\n\n<button type=\"button\" [class]=\"options.cssClasses.carret\" (click)=\"click(); selectBus.setFocus()\" (focus)=\"handleFocus()\" (blur)=\"blur()\" tabindex=\"-1\" aria-hidden=\"true\">\n <span [class]=\"options.cssClasses.carretIcon\"></span>\n</button>" }]
|
|
119
|
+
], changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-template #defaultLook>{{selectBus.selectedOptions() | displayValue | localize}}</ng-template>\n\n<button #htmlButton\n type=\"button\"\n role=\"combobox\"\n [class]=\"options.cssClasses.element\"\n [disabled]=\"!!selectBus.selectOptions().readonly\"\n [attr.aria-expanded]=\"selectBus.popupVisible()\"\n [attr.aria-controls]=\"selectBus.popupVisible() ? selectBus.id : null\"\n [attr.aria-activedescendant]=\"selectBus.popupVisible() ? activeDescendant() : null\"\n [attr.aria-label]=\"selectBus.selectedOptions() | displayValue | localize\"\n [tooltip]=\"selectBus.selectedOptions() | displayValue | localize\"\n (click)=\"click()\"\n (blur)=\"blur()\"\n (focus)=\"handleFocus()\">\n <span [class]=\"options.cssClasses.value\">\n <ng-container *ngTemplateOutlet=\"selectBus.selectOptions().templateGatherer.normalStateTemplate() || defaultLook; context: {$implicit: this}\"/>\n </span>\n</button>\n\n@if(options.cancelValue && (selectBus.selectedOptions() | hasValue))\n{\n <button type=\"button\" \n [disabled]=\"!!selectBus.selectOptions().readonly\"\n [class]=\"options.cssClasses.cancel\" \n [tooltip]=\"options.texts.cancelTitle | localize\" \n [attr.aria-label]=\"options.texts.cancelTitle | localize\"\n (click)=\"cancel()\" \n (blur)=\"blur()\" \n (focus)=\"handleFocus()\">\n <span [class]=\"options.cssClasses.cancelIcon\"></span>\n </button>\n}\n\n<button type=\"button\" [class]=\"options.cssClasses.carret\" [disabled]=\"!!selectBus.selectOptions().readonly\" (click)=\"click(); selectBus.setFocus()\" (focus)=\"handleFocus()\" (blur)=\"blur()\" tabindex=\"-1\" aria-hidden=\"true\">\n <span [class]=\"options.cssClasses.carretIcon\"></span>\n</button>" }]
|
|
119
120
|
}], ctorParameters: () => [{ type: undefined, decorators: [{
|
|
120
121
|
type: Inject,
|
|
121
122
|
args: [NORMAL_STATE_OPTIONS]
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"simpleNormalState.component.js","sourceRoot":"","sources":["../../../../../src/plugins/normalState/simpleNormalState/simpleNormalState.component.ts","../../../../../src/plugins/normalState/simpleNormalState/simpleNormalState.component.html"],"names":[],"mappings":"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","sourcesContent":["import {ChangeDetectionStrategy, Component, computed, ElementRef, Inject, inject, Optional, Signal, viewChild} from '@angular/core';\nimport {NgTemplateOutlet} from '@angular/common';\nimport {LocalizePipe, TooltipDirective} from '@anglr/common';\nimport {RecursivePartial} from '@jscrpt/common';\nimport {deepCopyWithArrayOverride} from '@jscrpt/common/lodash';\n\nimport {NormalState, NormalStateOptions, SelectPlugin, SimpleNormalStateCssClasses} from '../../../interfaces';\nimport {SelectPluginInstances, SelectBus} from '../../../misc/classes';\nimport {CopyOptionsAsSignal} from '../../../decorators';\nimport {NORMAL_STATE_OPTIONS} from '../../../misc/tokens';\nimport {DisplayValue, HasValue} from '../../../pipes';\n\n//TODO: improvement, carret direction\n\nconst defaultOptions: NormalStateOptions<SimpleNormalStateCssClasses> =\n{\n cancelValue: false,\n texts:\n {\n cancelTitle: 'cancel selected values',\n },\n cssClasses:\n {\n componentElement: 'normal-state-component',\n element: 'normal-state-element',\n value: 'select-align-self-center',\n carret: 'normal-state-carret',\n carretIcon: 'fas fa-caret-down select-align-self-center',\n cancel: 'normal-state-cancel',\n cancelIcon: 'fas fa-times select-align-self-center',\n },\n};\n\n/**\n * Simple normal state displaying value as 'button' that opens popup with options when clicked.\n */\n@Component(\n{\n selector: 'simple-normal-state',\n templateUrl: 'simpleNormalState.component.html',\n host:\n {\n '[class]': 'options.cssClasses.componentElement',\n },\n imports:\n [\n HasValue,\n DisplayValue,\n LocalizePipe,\n TooltipDirective,\n NgTemplateOutlet,\n ],\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class SimpleNormalState<TValue = unknown, TPublicValue = TValue> implements NormalState<TValue, TPublicValue, NormalStateOptions<SimpleNormalStateCssClasses>>\n{\n //######################### public properties - implementation of SelectPlugin #########################\n\n /**\n * @inheritdoc\n */\n @CopyOptionsAsSignal()\n public options: NormalStateOptions<SimpleNormalStateCssClasses>;\n\n /**\n * @inheritdoc\n */\n public selectPlugins: SelectPluginInstances<TValue, TPublicValue> = inject(SelectPluginInstances);\n\n /**\n * @inheritdoc\n */\n public pluginElement: ElementRef<HTMLElement> = inject(ElementRef);\n\n /**\n * @inheritdoc\n */\n public selectBus: SelectBus<TValue, TPublicValue> = inject(SelectBus);\n\n //######################### protected properties - template bindings #########################\n\n /**\n * Active descendant for aria-activedescendant attribute\n */\n protected activeDescendant: Signal<string>;\n\n //######################### protected properties - children #########################\n\n /**\n * Reference to button element in template\n */\n protected htmlButton: Signal<ElementRef<HTMLButtonElement>> = viewChild.required('htmlButton', {read: ElementRef});\n\n //######################### constructor #########################\n constructor(@Inject(NORMAL_STATE_OPTIONS) @Optional() options?: RecursivePartial<NormalStateOptions<SimpleNormalStateCssClasses>>|null,)\n {\n this.options = deepCopyWithArrayOverride(defaultOptions as NormalStateOptions<SimpleNormalStateCssClasses>,\n options);\n\n this.activeDescendant = computed(() => `${this.selectBus.id}-${this.selectPlugins.optionsHandler()?.listOptions()?.find(option => option.active())?.index}`);\n }\n\n //######################### public methods - implementation of LiveSearch #########################\n\n /**\n * @inheritdoc\n */\n public focus(): void\n {\n this.htmlButton()?.nativeElement.focus();\n }\n\n //######################### protected methods - template bindings #########################\n\n /**\n * Handles click event\n */\n protected click(): void\n {\n this.selectBus.click.next(\n {\n source: this as SelectPlugin,\n sourceElement: this.pluginElement.nativeElement,\n data: null,\n });\n }\n\n /**\n * Handles focus event\n */\n protected handleFocus(): void\n {\n this.selectBus.internalsFocus.next(\n {\n source: this as SelectPlugin,\n sourceElement: this.pluginElement.nativeElement,\n data: null,\n });\n }\n\n /**\n * Handles blur event\n */\n protected blur(): void\n {\n this.selectBus.internalsBlur.next(\n {\n source: this as SelectPlugin,\n sourceElement: this.pluginElement.nativeElement,\n data: null,\n });\n }\n\n /**\n * Handles cancel value\n */\n protected cancel(): void\n {\n this.selectBus.optionActivate.next(\n {\n source: this as SelectPlugin,\n sourceElement: this.pluginElement.nativeElement,\n data: null,\n });\n }\n}\n","<ng-template #defaultLook>{{selectBus.selectedOptions() | displayValue | localize}}</ng-template>\n\n<button #htmlButton\n type=\"button\"\n role=\"combobox\"\n [class]=\"options.cssClasses.element\"\n [disabled]=\"!!selectBus.selectOptions().readonly\"\n [attr.aria-expanded]=\"selectBus.popupVisible()\"\n [attr.aria-controls]=\"selectBus.popupVisible() ? selectBus.id : null\"\n [attr.aria-activedescendant]=\"selectBus.popupVisible() ? activeDescendant() : null\"\n [attr.aria-label]=\"selectBus.selectedOptions() | displayValue | localize\"\n [tooltip]=\"selectBus.selectedOptions() | displayValue | localize\"\n (click)=\"click()\"\n (blur)=\"blur()\"\n (focus)=\"handleFocus()\">\n <span [class]=\"options.cssClasses.value\">\n <ng-container *ngTemplateOutlet=\"selectBus.selectOptions().templateGatherer.normalStateTemplate() || defaultLook; context: {$implicit: this}\"/>\n </span>\n</button>\n\n@if(options.cancelValue && (selectBus.selectedOptions() | hasValue))\n{\n <button type=\"button\" \n [class]=\"options.cssClasses.cancel\" \n [tooltip]=\"options.texts.cancelTitle | localize\" \n [attr.aria-label]=\"options.texts.cancelTitle | localize\"\n (click)=\"cancel()\" \n (blur)=\"blur()\" \n (focus)=\"handleFocus()\">\n <span [class]=\"options.cssClasses.cancelIcon\"></span>\n </button>\n}\n\n<button type=\"button\" [class]=\"options.cssClasses.carret\" (click)=\"click(); selectBus.setFocus()\" (focus)=\"handleFocus()\" (blur)=\"blur()\" tabindex=\"-1\" aria-hidden=\"true\">\n <span [class]=\"options.cssClasses.carretIcon\"></span>\n</button>"]}
|
|
1
|
+
{"version":3,"file":"simpleNormalState.component.js","sourceRoot":"","sources":["../../../../../src/plugins/normalState/simpleNormalState/simpleNormalState.component.ts","../../../../../src/plugins/normalState/simpleNormalState/simpleNormalState.component.html"],"names":[],"mappings":"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","sourcesContent":["import {ChangeDetectionStrategy, Component, computed, ElementRef, Inject, inject, Optional, Signal, viewChild} from '@angular/core';\nimport {NgTemplateOutlet} from '@angular/common';\nimport {LocalizePipe, TooltipDirective} from '@anglr/common';\nimport {RecursivePartial} from '@jscrpt/common';\nimport {deepCopyWithArrayOverride} from '@jscrpt/common/lodash';\n\nimport {NormalState, NormalStateOptions, SelectPlugin, SimpleNormalStateCssClasses} from '../../../interfaces';\nimport {SelectPluginInstances, SelectBus} from '../../../misc/classes';\nimport {CopyOptionsAsSignal} from '../../../decorators';\nimport {NORMAL_STATE_OPTIONS} from '../../../misc/tokens';\nimport {DisplayValue, HasValue} from '../../../pipes';\n\n//TODO: improvement, carret direction\n\nconst defaultOptions: NormalStateOptions<SimpleNormalStateCssClasses> =\n{\n cancelValue: false,\n texts:\n {\n cancelTitle: 'cancel selected values',\n },\n cssClasses:\n {\n componentElement: 'normal-state-component',\n element: 'normal-state-element',\n value: 'select-align-self-center',\n carret: 'normal-state-carret',\n carretIcon: 'fas fa-caret-down select-align-self-center',\n cancel: 'normal-state-cancel',\n cancelIcon: 'fas fa-times select-align-self-center',\n },\n};\n\n/**\n * Simple normal state displaying value as 'button' that opens popup with options when clicked.\n */\n@Component(\n{\n selector: 'simple-normal-state',\n templateUrl: 'simpleNormalState.component.html',\n host:\n {\n '[class]': 'options.cssClasses.componentElement',\n '[class.disabled]': '!!selectBus.selectOptions().readonly',\n },\n imports:\n [\n HasValue,\n DisplayValue,\n LocalizePipe,\n TooltipDirective,\n NgTemplateOutlet,\n ],\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class SimpleNormalState<TValue = unknown, TPublicValue = TValue> implements NormalState<TValue, TPublicValue, NormalStateOptions<SimpleNormalStateCssClasses>>\n{\n //######################### public properties - implementation of SelectPlugin #########################\n\n /**\n * @inheritdoc\n */\n @CopyOptionsAsSignal()\n public options: NormalStateOptions<SimpleNormalStateCssClasses>;\n\n /**\n * @inheritdoc\n */\n public selectPlugins: SelectPluginInstances<TValue, TPublicValue> = inject(SelectPluginInstances);\n\n /**\n * @inheritdoc\n */\n public pluginElement: ElementRef<HTMLElement> = inject(ElementRef);\n\n /**\n * @inheritdoc\n */\n public selectBus: SelectBus<TValue, TPublicValue> = inject(SelectBus);\n\n //######################### protected properties - template bindings #########################\n\n /**\n * Active descendant for aria-activedescendant attribute\n */\n protected activeDescendant: Signal<string>;\n\n //######################### protected properties - children #########################\n\n /**\n * Reference to button element in template\n */\n protected htmlButton: Signal<ElementRef<HTMLButtonElement>> = viewChild.required('htmlButton', {read: ElementRef});\n\n //######################### constructor #########################\n constructor(@Inject(NORMAL_STATE_OPTIONS) @Optional() options?: RecursivePartial<NormalStateOptions<SimpleNormalStateCssClasses>>|null,)\n {\n this.options = deepCopyWithArrayOverride(defaultOptions as NormalStateOptions<SimpleNormalStateCssClasses>,\n options);\n\n this.activeDescendant = computed(() => `${this.selectBus.id}-${this.selectPlugins.optionsHandler()?.listOptions()?.find(option => option.active())?.index}`);\n }\n\n //######################### public methods - implementation of LiveSearch #########################\n\n /**\n * @inheritdoc\n */\n public focus(): void\n {\n this.htmlButton()?.nativeElement.focus();\n }\n\n //######################### protected methods - template bindings #########################\n\n /**\n * Handles click event\n */\n protected click(): void\n {\n this.selectBus.click.next(\n {\n source: this as SelectPlugin,\n sourceElement: this.pluginElement.nativeElement,\n data: null,\n });\n }\n\n /**\n * Handles focus event\n */\n protected handleFocus(): void\n {\n this.selectBus.internalsFocus.next(\n {\n source: this as SelectPlugin,\n sourceElement: this.pluginElement.nativeElement,\n data: null,\n });\n }\n\n /**\n * Handles blur event\n */\n protected blur(): void\n {\n this.selectBus.internalsBlur.next(\n {\n source: this as SelectPlugin,\n sourceElement: this.pluginElement.nativeElement,\n data: null,\n });\n }\n\n /**\n * Handles cancel value\n */\n protected cancel(): void\n {\n this.selectBus.optionActivate.next(\n {\n source: this as SelectPlugin,\n sourceElement: this.pluginElement.nativeElement,\n data: null,\n });\n }\n}\n","<ng-template #defaultLook>{{selectBus.selectedOptions() | displayValue | localize}}</ng-template>\n\n<button #htmlButton\n type=\"button\"\n role=\"combobox\"\n [class]=\"options.cssClasses.element\"\n [disabled]=\"!!selectBus.selectOptions().readonly\"\n [attr.aria-expanded]=\"selectBus.popupVisible()\"\n [attr.aria-controls]=\"selectBus.popupVisible() ? selectBus.id : null\"\n [attr.aria-activedescendant]=\"selectBus.popupVisible() ? activeDescendant() : null\"\n [attr.aria-label]=\"selectBus.selectedOptions() | displayValue | localize\"\n [tooltip]=\"selectBus.selectedOptions() | displayValue | localize\"\n (click)=\"click()\"\n (blur)=\"blur()\"\n (focus)=\"handleFocus()\">\n <span [class]=\"options.cssClasses.value\">\n <ng-container *ngTemplateOutlet=\"selectBus.selectOptions().templateGatherer.normalStateTemplate() || defaultLook; context: {$implicit: this}\"/>\n </span>\n</button>\n\n@if(options.cancelValue && (selectBus.selectedOptions() | hasValue))\n{\n <button type=\"button\" \n [disabled]=\"!!selectBus.selectOptions().readonly\"\n [class]=\"options.cssClasses.cancel\" \n [tooltip]=\"options.texts.cancelTitle | localize\" \n [attr.aria-label]=\"options.texts.cancelTitle | localize\"\n (click)=\"cancel()\" \n (blur)=\"blur()\" \n (focus)=\"handleFocus()\">\n <span [class]=\"options.cssClasses.cancelIcon\"></span>\n </button>\n}\n\n<button type=\"button\" [class]=\"options.cssClasses.carret\" [disabled]=\"!!selectBus.selectOptions().readonly\" (click)=\"click(); selectBus.setFocus()\" (focus)=\"handleFocus()\" (blur)=\"blur()\" tabindex=\"-1\" aria-hidden=\"true\">\n <span [class]=\"options.cssClasses.carretIcon\"></span>\n</button>"]}
|
package/package.json
CHANGED
|
@@ -1,15 +1,20 @@
|
|
|
1
1
|
import { PipeTransform } from '@angular/core';
|
|
2
|
+
import { Logger } from '@anglr/common';
|
|
2
3
|
import { SelectOption } from '../../interfaces';
|
|
3
4
|
import { SelectBus } from '../../misc/classes';
|
|
4
5
|
import * as i0 from "@angular/core";
|
|
5
6
|
/**
|
|
6
|
-
* Pipe to transform select selected option into
|
|
7
|
+
* Pipe to transform select selected option into string
|
|
7
8
|
*/
|
|
8
9
|
export declare class DisplayValue<TValue = unknown> implements PipeTransform {
|
|
9
10
|
/**
|
|
10
11
|
* Select bus used in Select for comunication between plugins and Select
|
|
11
12
|
*/
|
|
12
13
|
protected selectBus: SelectBus<TValue>;
|
|
14
|
+
/**
|
|
15
|
+
* Logger used for logging in this pipe
|
|
16
|
+
*/
|
|
17
|
+
protected logger: Logger;
|
|
13
18
|
/**
|
|
14
19
|
* Transforms selected option into string
|
|
15
20
|
* @param option - Selected options to be transformed into text
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"displayValue.pipe.d.ts","sourceRoot":"","sources":["displayValue.pipe.ts"],"names":[],"mappings":"AAAA,OAAO,EAAe,aAAa,EAAC,MAAM,eAAe,CAAC;
|
|
1
|
+
{"version":3,"file":"displayValue.pipe.d.ts","sourceRoot":"","sources":["displayValue.pipe.ts"],"names":[],"mappings":"AAAA,OAAO,EAAe,aAAa,EAAC,MAAM,eAAe,CAAC;AAC1D,OAAO,EAAS,MAAM,EAAC,MAAM,eAAe,CAAC;AAG7C,OAAO,EAAC,YAAY,EAAC,MAAM,kBAAkB,CAAC;AAC9C,OAAO,EAAC,SAAS,EAAC,MAAM,oBAAoB,CAAC;;AAE7C;;GAEG;AACH,qBACa,YAAY,CAAC,MAAM,GAAG,OAAO,CAAE,YAAW,aAAa;IAIhE;;OAEG;IACH,SAAS,CAAC,SAAS,EAAE,SAAS,CAAC,MAAM,CAAC,CAA0C;IAEhF;;OAEG;IACH,SAAS,CAAC,MAAM,EAAE,MAAM,CAAkB;IAI1C;;;;OAIG;IACI,SAAS,CAAC,MAAM,EAAE,YAAY,CAAC,MAAM,CAAC,GAAC,KAAK,CAAC,YAAY,CAAC,MAAM,CAAC,CAAC,GAAC,SAAS,GAAC,IAAI,EAAE,mBAAmB,GAAE,MAAM,GAAC,SAAS,GAAC,IAAgB,GAAG,MAAM;yCArBhJ,YAAY;uCAAZ,YAAY;CAqCxB"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"editNormalState.component.d.ts","sourceRoot":"","sources":["editNormalState.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAAuD,UAAU,EAA4B,MAAM,EAAY,MAAM,eAAe,CAAC;AAG5I,OAAO,EAAC,gBAAgB,EAAC,MAAM,gBAAgB,CAAC;AAGhD,OAAO,EAAC,WAAW,EAAE,sBAAsB,EAAgB,yBAAyB,EAAE,iBAAiB,EAAC,MAAM,qBAAqB,CAAC;AACpI,OAAO,EAAC,qBAAqB,EAAE,SAAS,EAAC,MAAM,uBAAuB,CAAC;;AA+BvE;;GAEG;AACH,
|
|
1
|
+
{"version":3,"file":"editNormalState.component.d.ts","sourceRoot":"","sources":["editNormalState.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAAuD,UAAU,EAA4B,MAAM,EAAY,MAAM,eAAe,CAAC;AAG5I,OAAO,EAAC,gBAAgB,EAAC,MAAM,gBAAgB,CAAC;AAGhD,OAAO,EAAC,WAAW,EAAE,sBAAsB,EAAgB,yBAAyB,EAAE,iBAAiB,EAAC,MAAM,qBAAqB,CAAC;AACpI,OAAO,EAAC,qBAAqB,EAAE,SAAS,EAAC,MAAM,uBAAuB,CAAC;;AA+BvE;;GAEG;AACH,qBAqBa,eAAe,CAAC,MAAM,GAAG,OAAO,EAAE,YAAY,GAAG,MAAM,CAAE,YAAW,WAAW,CAAC,MAAM,EAAE,YAAY,EAAE,sBAAsB,CAAC,yBAAyB,CAAC,CAAC;IAIjK;;OAEG;IAEI,OAAO,EAAE,sBAAsB,CAAC,yBAAyB,CAAC,CAAC;IAElE;;OAEG;IACI,aAAa,EAAE,qBAAqB,CAAC,MAAM,EAAE,YAAY,CAAC,CAAiC;IAElG;;OAEG;IACI,aAAa,EAAE,UAAU,CAAC,WAAW,CAAC,CAAsB;IAEnE;;OAEG;IACI,SAAS,EAAE,SAAS,CAAC,MAAM,EAAE,YAAY,CAAC,CAAqB;IAItE;;OAEG;IACH,SAAS,CAAC,uBAAuB,EAAE,MAAM,CAAC,iBAAiB,CAAC,MAAM,CAAC,EAAE,CAAC,CAAC;IAEvE;;OAEG;IACH,SAAS,CAAC,SAAS,EAAE,MAAM,CAAC,OAAO,CAAC,CAAC;IAErC;;OAEG;IACH,SAAS,CAAC,UAAU,EAAE,MAAM,CAAC,MAAM,EAAE,CAAC,CAAC;IAIvC;;OAEG;IACH,SAAS,CAAC,qBAAqB,EAAE,MAAM,CAAC,UAAU,CAAC,WAAW,CAAC,CAAC,CAAmE;gBAG7E,OAAO,CAAC,EAAE,gBAAgB,CAAC,sBAAsB,CAAC,yBAAyB,CAAC,CAAC,GAAC,IAAI;IA6BxI;;OAEG;IACI,KAAK,IAAI,IAAI;IAMpB;;OAEG;IACH,SAAS,CAAC,KAAK,IAAI,IAAI;IAUvB;;OAEG;IACH,SAAS,CAAC,WAAW,IAAI,IAAI;IAU7B;;OAEG;IACH,SAAS,CAAC,IAAI,IAAI,IAAI;IAUtB;;OAEG;IACH,SAAS,CAAC,MAAM,IAAI,IAAI;IAUxB;;;OAGG;IACH,SAAS,CAAC,WAAW,CAAC,MAAM,EAAE,iBAAiB,CAAC,MAAM,CAAC,GAAG,IAAI;yCAhJrD,eAAe;2CAAf,eAAe;CAyJ3B"}
|
|
@@ -31,7 +31,8 @@
|
|
|
31
31
|
|
|
32
32
|
@if(options.cancelValue && (selectBus.selectedOptions() | hasValue))
|
|
33
33
|
{
|
|
34
|
-
<button type="button"
|
|
34
|
+
<button type="button"
|
|
35
|
+
[disabled]="!!selectBus.selectOptions().readonly"
|
|
35
36
|
[class]="options.cssClasses.cancel"
|
|
36
37
|
[tooltip]="options.texts.cancelTitle | localize"
|
|
37
38
|
[attr.aria-label]="options.texts.cancelTitle | localize"
|
|
@@ -44,7 +45,7 @@
|
|
|
44
45
|
|
|
45
46
|
@if(options.carret)
|
|
46
47
|
{
|
|
47
|
-
<button type="button" (click)="click(); selectBus.setFocus()" (focus)="handleFocus()" (blur)="blur()" tabindex="-1" aria-hidden="true">
|
|
48
|
+
<button type="button" [disabled]="!!selectBus.selectOptions().readonly" (click)="click(); selectBus.setFocus()" (focus)="handleFocus()" (blur)="blur()" tabindex="-1" aria-hidden="true">
|
|
48
49
|
<span [class]="options.cssClasses.carret"></span>
|
|
49
50
|
</button>
|
|
50
51
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"simpleNormalState.component.d.ts","sourceRoot":"","sources":["simpleNormalState.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAA+C,UAAU,EAA4B,MAAM,EAAY,MAAM,eAAe,CAAC;AAGpI,OAAO,EAAC,gBAAgB,EAAC,MAAM,gBAAgB,CAAC;AAGhD,OAAO,EAAC,WAAW,EAAE,kBAAkB,EAAgB,2BAA2B,EAAC,MAAM,qBAAqB,CAAC;AAC/G,OAAO,EAAC,qBAAqB,EAAE,SAAS,EAAC,MAAM,uBAAuB,CAAC;;AA0BvE;;GAEG;AACH,
|
|
1
|
+
{"version":3,"file":"simpleNormalState.component.d.ts","sourceRoot":"","sources":["simpleNormalState.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAA+C,UAAU,EAA4B,MAAM,EAAY,MAAM,eAAe,CAAC;AAGpI,OAAO,EAAC,gBAAgB,EAAC,MAAM,gBAAgB,CAAC;AAGhD,OAAO,EAAC,WAAW,EAAE,kBAAkB,EAAgB,2BAA2B,EAAC,MAAM,qBAAqB,CAAC;AAC/G,OAAO,EAAC,qBAAqB,EAAE,SAAS,EAAC,MAAM,uBAAuB,CAAC;;AA0BvE;;GAEG;AACH,qBAmBa,iBAAiB,CAAC,MAAM,GAAG,OAAO,EAAE,YAAY,GAAG,MAAM,CAAE,YAAW,WAAW,CAAC,MAAM,EAAE,YAAY,EAAE,kBAAkB,CAAC,2BAA2B,CAAC,CAAC;IAIjK;;OAEG;IAEI,OAAO,EAAE,kBAAkB,CAAC,2BAA2B,CAAC,CAAC;IAEhE;;OAEG;IACI,aAAa,EAAE,qBAAqB,CAAC,MAAM,EAAE,YAAY,CAAC,CAAiC;IAElG;;OAEG;IACI,aAAa,EAAE,UAAU,CAAC,WAAW,CAAC,CAAsB;IAEnE;;OAEG;IACI,SAAS,EAAE,SAAS,CAAC,MAAM,EAAE,YAAY,CAAC,CAAqB;IAItE;;OAEG;IACH,SAAS,CAAC,gBAAgB,EAAE,MAAM,CAAC,MAAM,CAAC,CAAC;IAI3C;;OAEG;IACH,SAAS,CAAC,UAAU,EAAE,MAAM,CAAC,UAAU,CAAC,iBAAiB,CAAC,CAAC,CAAwD;gBAG7D,OAAO,CAAC,EAAE,gBAAgB,CAAC,kBAAkB,CAAC,2BAA2B,CAAC,CAAC,GAAC,IAAI;IAUtI;;OAEG;IACI,KAAK,IAAI,IAAI;IAOpB;;OAEG;IACH,SAAS,CAAC,KAAK,IAAI,IAAI;IAUvB;;OAEG;IACH,SAAS,CAAC,WAAW,IAAI,IAAI;IAU7B;;OAEG;IACH,SAAS,CAAC,IAAI,IAAI,IAAI;IAUtB;;OAEG;IACH,SAAS,CAAC,MAAM,IAAI,IAAI;yCAtGf,iBAAiB;2CAAjB,iBAAiB;CA+G7B"}
|
|
@@ -21,6 +21,7 @@
|
|
|
21
21
|
@if(options.cancelValue && (selectBus.selectedOptions() | hasValue))
|
|
22
22
|
{
|
|
23
23
|
<button type="button"
|
|
24
|
+
[disabled]="!!selectBus.selectOptions().readonly"
|
|
24
25
|
[class]="options.cssClasses.cancel"
|
|
25
26
|
[tooltip]="options.texts.cancelTitle | localize"
|
|
26
27
|
[attr.aria-label]="options.texts.cancelTitle | localize"
|
|
@@ -31,6 +32,6 @@
|
|
|
31
32
|
</button>
|
|
32
33
|
}
|
|
33
34
|
|
|
34
|
-
<button type="button" [class]="options.cssClasses.carret" (click)="click(); selectBus.setFocus()" (focus)="handleFocus()" (blur)="blur()" tabindex="-1" aria-hidden="true">
|
|
35
|
+
<button type="button" [class]="options.cssClasses.carret" [disabled]="!!selectBus.selectOptions().readonly" (click)="click(); selectBus.setFocus()" (focus)="handleFocus()" (blur)="blur()" tabindex="-1" aria-hidden="true">
|
|
35
36
|
<span [class]="options.cssClasses.carretIcon"></span>
|
|
36
37
|
</button>
|
|
@@ -24,7 +24,9 @@
|
|
|
24
24
|
|
|
25
25
|
*::placeholder
|
|
26
26
|
{
|
|
27
|
-
color: var(--select-liveSearch-placeholder);
|
|
27
|
+
color: var(--select-liveSearch-placeholder-foreground);
|
|
28
|
+
opacity: var(--select-liveSearch-placeholder-opacity);
|
|
29
|
+
letter-spacing: var(--select-liveSearch-placeholder-letterSpacing);
|
|
28
30
|
}
|
|
29
31
|
}
|
|
30
32
|
}
|
|
@@ -7,13 +7,31 @@
|
|
|
7
7
|
{
|
|
8
8
|
display: flex;
|
|
9
9
|
flex-direction: row;
|
|
10
|
+
cursor: pointer;
|
|
10
11
|
border-width: var(--select-normalState-borderWidth);
|
|
11
|
-
border-style:
|
|
12
|
+
border-style: var(--select-normalState-borderStyle);
|
|
12
13
|
border-color: var(--select-normalState-borderColor);
|
|
14
|
+
border-radius: var(--select-normalState-borderRadius);
|
|
15
|
+
box-shadow: var(--select-normalState-boxShadow);
|
|
13
16
|
background: var(--select-normalState-background);
|
|
14
17
|
color: var(--select-normalState-foreground);
|
|
15
18
|
padding: var(--select-normalState-padding);
|
|
16
|
-
|
|
19
|
+
font-family: var(--select-normalState-fontFamily);
|
|
20
|
+
font-size: var(--select-normalState-fontSize);
|
|
21
|
+
letter-spacing: var(--select-normalState-letterSpacing);
|
|
22
|
+
|
|
23
|
+
&.disabled
|
|
24
|
+
{
|
|
25
|
+
background-color: var(--select-normalState-disabled-background);
|
|
26
|
+
color: var(--select-normalState-disabled-foreground);
|
|
27
|
+
border-color: var(--select-normalState-disabled-borderColor);
|
|
28
|
+
cursor: not-allowed;
|
|
29
|
+
|
|
30
|
+
button
|
|
31
|
+
{
|
|
32
|
+
cursor: not-allowed;
|
|
33
|
+
}
|
|
34
|
+
}
|
|
17
35
|
|
|
18
36
|
&:focus-within
|
|
19
37
|
{
|
|
@@ -28,6 +46,13 @@
|
|
|
28
46
|
gap: var(--select-normalState-gap);
|
|
29
47
|
}
|
|
30
48
|
|
|
49
|
+
.normal-state-value,
|
|
50
|
+
.normal-state-element
|
|
51
|
+
{
|
|
52
|
+
overflow: hidden;
|
|
53
|
+
white-space: nowrap;
|
|
54
|
+
}
|
|
55
|
+
|
|
31
56
|
.normal-state-element
|
|
32
57
|
{
|
|
33
58
|
display: flex;
|
|
@@ -60,6 +85,7 @@
|
|
|
60
85
|
flex-direction: row;
|
|
61
86
|
align-items: center;
|
|
62
87
|
align-self: center;
|
|
88
|
+
white-space: nowrap;
|
|
63
89
|
gap: var(--select-normalState-tag-gap);
|
|
64
90
|
padding: var(--select-normalState-tag-padding);
|
|
65
91
|
border-radius: var(--select-normalState-tag-borderRadius);
|
|
@@ -71,9 +97,12 @@
|
|
|
71
97
|
button
|
|
72
98
|
{
|
|
73
99
|
background-color: transparent;
|
|
74
|
-
|
|
100
|
+
padding: 0;
|
|
75
101
|
cursor: pointer;
|
|
102
|
+
border: none;
|
|
76
103
|
color: inherit;
|
|
104
|
+
font-size: inherit;
|
|
105
|
+
font-family: inherit;
|
|
77
106
|
}
|
|
78
107
|
|
|
79
108
|
.normal-state-cancel
|
|
@@ -6,8 +6,6 @@
|
|
|
6
6
|
.popup-component
|
|
7
7
|
{
|
|
8
8
|
display: block;
|
|
9
|
-
max-height: 50dvh;
|
|
10
|
-
overflow: auto;
|
|
11
9
|
|
|
12
10
|
&[popover]:not(:popover-open):not(dialog[open])
|
|
13
11
|
{
|
|
@@ -40,6 +38,13 @@
|
|
|
40
38
|
background-color: var(--select-popup-container-background);
|
|
41
39
|
color: var(--select-popup-container-foreground);
|
|
42
40
|
border-radius: var(--select-popup-container-borderRadius);
|
|
41
|
+
border-color: var(--select-popup-container-borderColor);
|
|
42
|
+
border-width: var(--select-popup-container-borderWidth);
|
|
43
|
+
border-style: var(--select-popup-container-borderStyle);
|
|
44
|
+
max-height: 48dvh;
|
|
45
|
+
overflow: auto;
|
|
46
|
+
box-shadow: var(--select-popup-container-boxShadow);
|
|
47
|
+
scrollbar-width: thin;
|
|
43
48
|
}
|
|
44
49
|
|
|
45
50
|
.option
|
|
@@ -52,11 +57,13 @@
|
|
|
52
57
|
&.selected
|
|
53
58
|
{
|
|
54
59
|
background-color: var(--select-popup-option-selected-background);
|
|
60
|
+
background-image: var(--select-popup-option-selected-backgroundImage);
|
|
55
61
|
}
|
|
56
62
|
|
|
57
63
|
&.active
|
|
58
64
|
{
|
|
59
65
|
background-color: var(--select-popup-option-active-background);
|
|
66
|
+
background-image: var(--select-popup-option-active-backgroundImage);
|
|
60
67
|
}
|
|
61
68
|
|
|
62
69
|
&.in-group
|
|
@@ -11,11 +11,16 @@
|
|
|
11
11
|
normalState:
|
|
12
12
|
(
|
|
13
13
|
borderColor: unset,
|
|
14
|
+
borderStyle: solid,
|
|
15
|
+
borderWidth: var(--size-2px-fixed),
|
|
14
16
|
background: unset,
|
|
15
17
|
foreground: unset,
|
|
16
|
-
|
|
18
|
+
boxShadow: unset,
|
|
17
19
|
padding: var(--size-1px) var(--size-2px),
|
|
18
20
|
borderRadius: var(--size-4px-fixed),
|
|
21
|
+
fontFamily: inherit,
|
|
22
|
+
fontSize: inherit,
|
|
23
|
+
letterSpacing: normal,
|
|
19
24
|
gap: var(--size-xs),
|
|
20
25
|
focus:
|
|
21
26
|
(
|
|
@@ -32,6 +37,12 @@
|
|
|
32
37
|
borderRadius: var(--size-4px),
|
|
33
38
|
fontSize: .9em,
|
|
34
39
|
),
|
|
40
|
+
disabled:
|
|
41
|
+
(
|
|
42
|
+
background: unset,
|
|
43
|
+
foreground: unset,
|
|
44
|
+
borderColor: unset,
|
|
45
|
+
),
|
|
35
46
|
),
|
|
36
47
|
popup:
|
|
37
48
|
(
|
|
@@ -41,16 +52,22 @@
|
|
|
41
52
|
foreground: unset,
|
|
42
53
|
padding: mixins.getSize($fontSize, 4),
|
|
43
54
|
borderRadius: mixins.getSize($fontSize, 4),
|
|
55
|
+
borderColor: unset,
|
|
56
|
+
borderWidth: var(--size-1px-fixed),
|
|
57
|
+
borderStyle: solid,
|
|
58
|
+
boxShadow: unset,
|
|
44
59
|
),
|
|
45
60
|
option:
|
|
46
61
|
(
|
|
47
62
|
selected:
|
|
48
63
|
(
|
|
49
64
|
background: hsl(from var(--select-popup-container-background) h s 82%),
|
|
65
|
+
backgroundImage: none,
|
|
50
66
|
),
|
|
51
67
|
active:
|
|
52
68
|
(
|
|
53
69
|
background: hsl(from var(--select-popup-container-background) h s 90%),
|
|
70
|
+
backgroundImage: none,
|
|
54
71
|
),
|
|
55
72
|
inGroup:
|
|
56
73
|
(
|
|
@@ -68,7 +85,12 @@
|
|
|
68
85
|
),
|
|
69
86
|
liveSearch:
|
|
70
87
|
(
|
|
71
|
-
placeholder:
|
|
88
|
+
placeholder:
|
|
89
|
+
(
|
|
90
|
+
foreground: unset,
|
|
91
|
+
opacity: 1,
|
|
92
|
+
letterSpacing: normal,
|
|
93
|
+
),
|
|
72
94
|
),
|
|
73
95
|
),
|
|
74
96
|
);
|
package/styles/themes/dark.scss
CHANGED
|
@@ -26,6 +26,12 @@ $_white: #f0f0f0;
|
|
|
26
26
|
background: #666,
|
|
27
27
|
foreground: $_white,
|
|
28
28
|
),
|
|
29
|
+
disabled:
|
|
30
|
+
(
|
|
31
|
+
background: unset,
|
|
32
|
+
foreground: unset,
|
|
33
|
+
borderColor: unset,
|
|
34
|
+
),
|
|
29
35
|
),
|
|
30
36
|
popup:
|
|
31
37
|
(
|
|
@@ -33,11 +39,15 @@ $_white: #f0f0f0;
|
|
|
33
39
|
(
|
|
34
40
|
background: #3A3A3A,
|
|
35
41
|
foreground: $_white,
|
|
42
|
+
borderColor: #4e4e4e,
|
|
36
43
|
),
|
|
37
44
|
),
|
|
38
45
|
liveSearch:
|
|
39
46
|
(
|
|
40
|
-
placeholder:
|
|
47
|
+
placeholder:
|
|
48
|
+
(
|
|
49
|
+
foreground: $_white,
|
|
50
|
+
),
|
|
41
51
|
),
|
|
42
52
|
),
|
|
43
53
|
);
|
package/styles/themes/light.scss
CHANGED
|
@@ -26,6 +26,12 @@ $_black: #000;
|
|
|
26
26
|
background: #ccc,
|
|
27
27
|
foreground: $_black,
|
|
28
28
|
),
|
|
29
|
+
disabled:
|
|
30
|
+
(
|
|
31
|
+
background: hsl(from var(--select-normalState-background) h s 95%),
|
|
32
|
+
foreground: hsl(from var(--select-normalState-foreground) h s 50%),
|
|
33
|
+
borderColor: hsl(from var(--select-normalState-borderColor) h s 75%),
|
|
34
|
+
),
|
|
29
35
|
),
|
|
30
36
|
popup:
|
|
31
37
|
(
|
|
@@ -33,11 +39,16 @@ $_black: #000;
|
|
|
33
39
|
(
|
|
34
40
|
background: #F0F0F0,
|
|
35
41
|
foreground: $_black,
|
|
42
|
+
borderColor: #acacac,
|
|
43
|
+
boxShadow: 0 6px 12px rgba(0,0,0,.175),
|
|
36
44
|
),
|
|
37
45
|
),
|
|
38
46
|
liveSearch:
|
|
39
47
|
(
|
|
40
|
-
placeholder:
|
|
48
|
+
placeholder:
|
|
49
|
+
(
|
|
50
|
+
foreground: $_black,
|
|
51
|
+
),
|
|
41
52
|
),
|
|
42
53
|
),
|
|
43
54
|
);
|
package/version.bak
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
16.0.
|
|
1
|
+
16.0.1-beta.20260422124048
|