@anglr/select 16.0.0 → 16.0.1-beta.20260423124827

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.
Files changed (24) hide show
  1. package/changelog.md +13 -0
  2. package/es2022/src/pipes/displayValue/displayValue.pipe.js +7 -1
  3. package/es2022/src/pipes/displayValue/displayValue.pipe.js.map +1 -1
  4. package/es2022/src/plugins/normalState/editNormalState/editNormalState.component.js +3 -2
  5. package/es2022/src/plugins/normalState/editNormalState/editNormalState.component.js.map +1 -1
  6. package/es2022/src/plugins/normalState/simpleNormalState/simpleNormalState.component.js +3 -2
  7. package/es2022/src/plugins/normalState/simpleNormalState/simpleNormalState.component.js.map +1 -1
  8. package/es2022/src/plugins/valueHandler/staticValueHandler/staticValueHandler.component.js +1 -0
  9. package/es2022/src/plugins/valueHandler/staticValueHandler/staticValueHandler.component.js.map +1 -1
  10. package/package.json +1 -1
  11. package/src/pipes/displayValue/displayValue.pipe.d.ts +6 -1
  12. package/src/pipes/displayValue/displayValue.pipe.d.ts.map +1 -1
  13. package/src/plugins/normalState/editNormalState/editNormalState.component.d.ts.map +1 -1
  14. package/src/plugins/normalState/editNormalState/editNormalState.component.html +3 -2
  15. package/src/plugins/normalState/simpleNormalState/simpleNormalState.component.d.ts.map +1 -1
  16. package/src/plugins/normalState/simpleNormalState/simpleNormalState.component.html +2 -1
  17. package/src/plugins/valueHandler/staticValueHandler/staticValueHandler.component.d.ts.map +1 -1
  18. package/styles/components/_liveSearch.scss +3 -1
  19. package/styles/components/_normalState.scss +32 -3
  20. package/styles/components/_popup.scss +9 -2
  21. package/styles/core/_defaultTheme.scss +24 -2
  22. package/styles/themes/dark.scss +11 -1
  23. package/styles/themes/light.scss +12 -1
  24. package/version.bak +1 -1
package/changelog.md CHANGED
@@ -1,5 +1,18 @@
1
1
  # Changelog
2
2
 
3
+ ## Version 16.0.1 (2026-04-22)
4
+
5
+ ### Bug Fixes
6
+
7
+ - fixed `StaticValueHandler` plugin component
8
+ - fixed postponing value twice during options gathering
9
+ - fixed missing styles for styling *normal state* and corresponding css variables
10
+ - fixed missing styles for styling *popup* and corresponding css variables
11
+ - fixed `SimpleNormalState` plugin component
12
+ - fixed disabled state visually and functionally
13
+ - fixed `EditNormalState` plugin component
14
+ - fixed disabled state visually and functionally
15
+
3
16
  ## Version 16.0.0 (2026-04-15)
4
17
 
5
18
  ### Features
package/es2022/src/pipes/displayValue/displayValue.pipe.js CHANGED
@@ -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
  }
package/es2022/src/pipes/displayValue/displayValue.pipe.js.map CHANGED
@@ -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;KAuBnF;IArBG,sGAAsG;IAEtG;;;;OAIG;IACI,SAAS,CAAC,MAAuE,EAAE,sBAA6C,SAAS;QAE5I,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;8GA7BQ,YAAY;4GAAZ,YAAY;;2FAAZ,YAAY;kBADxB,IAAI;mBAAC,EAAC,IAAI,EAAE,cAAc,EAAC","sourcesContent":["import {inject, Pipe, PipeTransform} from '@angular/core';\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\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 //######################### 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 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"]}
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"]}
package/es2022/src/plugins/normalState/editNormalState/editNormalState.component.js CHANGED
@@ -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\" \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}", 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 }); }
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\" \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}" }]
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]
package/es2022/src/plugins/normalState/editNormalState/editNormalState.component.js.map CHANGED
@@ -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}"]}
package/es2022/src/plugins/normalState/simpleNormalState/simpleNormalState.component.js CHANGED
@@ -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]
package/es2022/src/plugins/normalState/simpleNormalState/simpleNormalState.component.js.map CHANGED
@@ -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":";AAAA,OAAO,EAAC,uBAAuB,EAAE,SAAS,EAAE,QAAQ,EAAE,UAAU,EAAE,MAAM,EAAE,MAAM,EAAE,QAAQ,EAAU,SAAS,EAAC,MAAM,eAAe,CAAC;AACpI,OAAO,EAAC,gBAAgB,EAAC,MAAM,iBAAiB,CAAC;AACjD,OAAO,EAAC,YAAY,EAAE,gBAAgB,EAAC,MAAM,eAAe,CAAC;AAE7D,OAAO,EAAC,yBAAyB,EAAC,MAAM,uBAAuB,CAAC;AAGhE,OAAO,EAAC,qBAAqB,EAAE,SAAS,EAAC,MAAM,uBAAuB,CAAC;AACvE,OAAO,EAAC,mBAAmB,EAAC,MAAM,qBAAqB,CAAC;AACxD,OAAO,EAAC,oBAAoB,EAAC,MAAM,sBAAsB,CAAC;AAC1D,OAAO,EAAC,YAAY,EAAE,QAAQ,EAAC,MAAM,gBAAgB,CAAC;;AAEtD,qCAAqC;AAErC,MAAM,cAAc,GACpB;IACI,WAAW,EAAE,KAAK;IAClB,KAAK,EACL;QACI,WAAW,EAAE,wBAAwB;KACxC;IACD,UAAU,EACV;QACI,gBAAgB,EAAE,wBAAwB;QAC1C,OAAO,EAAE,sBAAsB;QAC/B,KAAK,EAAE,0BAA0B;QACjC,MAAM,EAAE,qBAAqB;QAC7B,UAAU,EAAE,4CAA4C;QACxD,MAAM,EAAE,qBAAqB;QAC7B,UAAU,EAAE,uCAAuC;KACtD;CACJ,CAAC;AAEF;;GAEG;AAmBH,MAAM,OAAO,iBAAiB;IAuC1B,iEAAiE;IACjE,YAAsD,OAAgF;QA9BtI;;WAEG;QACI,kBAAa,GAAgD,MAAM,CAAC,qBAAqB,CAAC,CAAC;QAElG;;WAEG;QACI,kBAAa,GAA4B,MAAM,CAAC,UAAU,CAAC,CAAC;QAEnE;;WAEG;QACI,cAAS,GAAoC,MAAM,CAAC,SAAS,CAAC,CAAC;QAStE,qFAAqF;QAErF;;WAEG;QACO,eAAU,GAA0C,SAAS,CAAC,QAAQ,CAAC,YAAY,EAAE,EAAC,IAAI,EAAE,UAAU,EAAC,CAAC,CAAC;QAK/G,IAAI,CAAC,OAAO,GAAG,yBAAyB,CAAC,cAAiE,EACjE,OAAO,CAAC,CAAC;QAElD,IAAI,CAAC,gBAAgB,GAAG,QAAQ,CAAC,GAAG,EAAE,CAAC,GAAG,IAAI,CAAC,SAAS,CAAC,EAAE,IAAI,IAAI,CAAC,aAAa,CAAC,cAAc,EAAE,EAAE,WAAW,EAAE,EAAE,IAAI,CAAC,MAAM,CAAC,EAAE,CAAC,MAAM,CAAC,MAAM,EAAE,CAAC,EAAE,KAAK,EAAE,4DAAC,CAAC;IACjK,CAAC;IAED,mGAAmG;IAEnG;;OAEG;IACI,KAAK;QAER,IAAI,CAAC,UAAU,EAAE,EAAE,aAAa,CAAC,KAAK,EAAE,CAAC;IAC7C,CAAC;IAED,2FAA2F;IAE3F;;OAEG;IACO,KAAK;QAEX,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,IAAI,CACzB;YACI,MAAM,EAAE,IAAoB;YAC5B,aAAa,EAAE,IAAI,CAAC,aAAa,CAAC,aAAa;YAC/C,IAAI,EAAE,IAAI;SACb,CAAC,CAAC;IACP,CAAC;IAED;;OAEG;IACO,WAAW;QAEjB,IAAI,CAAC,SAAS,CAAC,cAAc,CAAC,IAAI,CAClC;YACI,MAAM,EAAE,IAAoB;YAC5B,aAAa,EAAE,IAAI,CAAC,aAAa,CAAC,aAAa;YAC/C,IAAI,EAAE,IAAI;SACb,CAAC,CAAC;IACP,CAAC;IAED;;OAEG;IACO,IAAI;QAEV,IAAI,CAAC,SAAS,CAAC,aAAa,CAAC,IAAI,CACjC;YACI,MAAM,EAAE,IAAoB;YAC5B,aAAa,EAAE,IAAI,CAAC,aAAa,CAAC,aAAa;YAC/C,IAAI,EAAE,IAAI;SACb,CAAC,CAAC;IACP,CAAC;IAED;;OAEG;IACO,MAAM;QAEZ,IAAI,CAAC,SAAS,CAAC,cAAc,CAAC,IAAI,CAClC;YACI,MAAM,EAAE,IAAoB;YAC5B,aAAa,EAAE,IAAI,CAAC,aAAa,CAAC,aAAa;YAC/C,IAAI,EAAE,IAAI;SACb,CAAC,CAAC;IACP,CAAC;8GA9GQ,iBAAiB,kBAwCN,oBAAoB;kGAxC/B,iBAAiB,8OAqC4E,UAAU,6CC3FpH,itDAmCS,4CDcD,gBAAgB,4JAChB,gBAAgB,+IAJhB,QAAQ,4CACR,YAAY,gDACZ,YAAY;;AAcT;IADN,mBAAmB,EAAE;;kDAC0C;2FARvD,iBAAiB;kBAlB7B,SAAS;+BAEI,qBAAqB,QAG/B;wBACI,SAAS,EAAE,qCAAqC;qBACnD,WAED;wBACI,QAAQ;wBACR,YAAY;wBACZ,YAAY;wBACZ,gBAAgB;wBAChB,gBAAgB;qBACnB,mBACgB,uBAAuB,CAAC,MAAM;;0BA0ClC,MAAM;2BAAC,oBAAoB;;0BAAG,QAAQ;gGAH8B,YAAY,OAAE,EAAC,IAAI,EAAE,UAAU,EAAC","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/es2022/src/plugins/valueHandler/staticValueHandler/staticValueHandler.component.js CHANGED
@@ -64,6 +64,7 @@ export class StaticValueHandler {
64
64
  this.postponedValue = value;
65
65
  return;
66
66
  }
67
+ this.postponedValue = null;
67
68
  this.setValueInternal(value, availableOptions);
68
69
  }
69
70
  //######################### protected methods #########################
package/es2022/src/plugins/valueHandler/staticValueHandler/staticValueHandler.component.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"staticValueHandler.component.js","sourceRoot":"","sources":["../../../../../src/plugins/valueHandler/staticValueHandler/staticValueHandler.component.ts"],"names":[],"mappings":"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","sourcesContent":["import {ChangeDetectionStrategy, Component, computed, effect, ElementRef, Inject, inject, Optional, Signal, untracked} from '@angular/core';\nimport {LOGGER, Logger} from '@anglr/common';\nimport {isBlank, isPresent, RecursivePartial} from '@jscrpt/common';\nimport {deepCopyWithArrayOverride} from '@jscrpt/common/lodash';\n\nimport {SelectOptionState, ValueHandler, ValueHandlerOptions} from '../../../interfaces';\nimport {SelectPluginInstances, SelectBus} from '../../../misc/classes';\nimport {CopyOptionsAsSignal} from '../../../decorators';\nimport {VALUE_HANDLER_OPTIONS} from '../../../misc/tokens';\nimport {compareValueAndOption, computedValue} from '../../../misc/utils';\nimport {ValueComputedFunc} from '../../../misc/types';\n\nconst defaultOptions: ValueHandlerOptions =\n{\n};\n\n/**\n * Value handler for static values. That means all values are available right away statically.\n */\n@Component(\n{\n selector: 'static-value-handler',\n template: '',\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class StaticValueHandler<TValue = unknown, TPublicValue = TValue> implements ValueHandler<TValue, TPublicValue, ValueHandlerOptions>\n{\n //######################### protected fields #########################\n\n /**\n * Postponed value that will be set when options are loaded. This is needed for case when value is set before options are loaded, so we cannot set value right away, but we will handle setting value when options are loaded\n */\n protected postponedValue: TPublicValue|TPublicValue[]|undefined|null = null;\n\n //######################### public properties - implementation of SelectPlugin #########################\n\n /**\n * @inheritdoc\n */\n @CopyOptionsAsSignal()\n public options: ValueHandlerOptions;\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 /**\n * Instance of logger for logging purposes\n */\n protected logger: Logger = inject(LOGGER);\n\n //######################### public properties - implementation of ValueHandler #########################\n\n /**\n * @inheritdoc\n */\n public readonly value: Signal<TPublicValue|TPublicValue[]|undefined|null> = computed((computedValue as ValueComputedFunc<TPublicValue>).bind(this));\n\n //######################### constructor #########################\n constructor(@Inject(VALUE_HANDLER_OPTIONS) @Optional() options?: RecursivePartial<ValueHandlerOptions>|null,)\n {\n this.options = deepCopyWithArrayOverride(defaultOptions as ValueHandlerOptions,\n options);\n\n effect(() =>\n {\n const availableOptions = this.selectPlugins.OptionsHandler.availableOptions();\n\n if(isPresent(availableOptions) && isPresent(this.postponedValue))\n {\n this.logger.verbose('Select: Value handler: setting postponed value \"{{@(4)value}}\"', {value: this.postponedValue});\n\n this.setValueInternal(this.postponedValue, availableOptions);\n this.postponedValue = null;\n }\n });\n }\n\n //######################### public methods - implementation of ValueHandler #########################\n\n /**\n * @inheritdoc\n */\n public setValue(value: TPublicValue|TPublicValue[]|undefined|null): void\n {\n this.logger.verbose('Select: Value handler: setting value \"{{@(4)value}}\"', {value});\n const availableOptions = untracked(() => this.selectPlugins.OptionsHandler.availableOptions());\n\n //Options are not loaded yet, so we cannot set value, but we will handle setting value when options are loaded\n if(isBlank(availableOptions))\n {\n this.logger.verbose('Select: Value handler: options not loaded yet, postponing value \"{{@(4)value}}\"', {value});\n this.postponedValue = value;\n\n return;\n }\n\n this.setValueInternal(value, availableOptions);\n }\n\n //######################### protected methods #########################\n\n /**\n * Handles setting value when options are loaded\n * @param value - Value to be set\n * @param availableOptions - Available options that are checked whether they contain value that is being set, so we can set value only if it is available in options\n */\n protected setValueInternal(value: TPublicValue|TPublicValue[]|undefined|null, availableOptions: readonly SelectOptionState<TValue>[]): void\n {\n //this keeps only values that are available in options\n untracked(() =>\n {\n if(this.selectBus.selectOptions().multiple)\n {\n if(isBlank(value))\n {\n this.logger.verbose('Select: Value handler: value is blank, clearing selected options');\n\n this.selectBus.selectedOptions.set([]);\n\n return;\n }\n\n if(!Array.isArray(value))\n {\n throw new Error('Value must be an array when multiple is set');\n }\n\n const selectedOptions: SelectOptionState<TValue>[] = [];\n\n for(const val of value)\n {\n const option = availableOptions.find(opt => compareValueAndOption(val, opt, this.selectBus));\n\n if(option)\n {\n option.selected.set(true);\n selectedOptions.push(option);\n }\n }\n\n this.logger.verbose('Select: Value handler: selecting multiple options value \"{{@(4)value}}\"', {value: selectedOptions});\n this.selectBus.selectedOptions.set(selectedOptions);\n }\n else\n {\n const selectedOption = availableOptions.find(opt => compareValueAndOption(value as TPublicValue, opt, this.selectBus));\n selectedOption?.selected.set(true);\n this.logger.verbose('Select: Value handler: selecting single option value \"{{@(4)value}}\"', {value: selectedOption?.value()});\n\n this.selectBus.selectedOptions.set(selectedOption ?? null);\n }\n });\n }\n}\n"]}
1
+ {"version":3,"file":"staticValueHandler.component.js","sourceRoot":"","sources":["../../../../../src/plugins/valueHandler/staticValueHandler/staticValueHandler.component.ts"],"names":[],"mappings":"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","sourcesContent":["import {ChangeDetectionStrategy, Component, computed, effect, ElementRef, Inject, inject, Optional, Signal, untracked} from '@angular/core';\nimport {LOGGER, Logger} from '@anglr/common';\nimport {isBlank, isPresent, RecursivePartial} from '@jscrpt/common';\nimport {deepCopyWithArrayOverride} from '@jscrpt/common/lodash';\n\nimport {SelectOptionState, ValueHandler, ValueHandlerOptions} from '../../../interfaces';\nimport {SelectPluginInstances, SelectBus} from '../../../misc/classes';\nimport {CopyOptionsAsSignal} from '../../../decorators';\nimport {VALUE_HANDLER_OPTIONS} from '../../../misc/tokens';\nimport {compareValueAndOption, computedValue} from '../../../misc/utils';\nimport {ValueComputedFunc} from '../../../misc/types';\n\nconst defaultOptions: ValueHandlerOptions =\n{\n};\n\n/**\n * Value handler for static values. That means all values are available right away statically.\n */\n@Component(\n{\n selector: 'static-value-handler',\n template: '',\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class StaticValueHandler<TValue = unknown, TPublicValue = TValue> implements ValueHandler<TValue, TPublicValue, ValueHandlerOptions>\n{\n //######################### protected fields #########################\n\n /**\n * Postponed value that will be set when options are loaded. This is needed for case when value is set before options are loaded, so we cannot set value right away, but we will handle setting value when options are loaded\n */\n protected postponedValue: TPublicValue|TPublicValue[]|undefined|null = null;\n\n //######################### public properties - implementation of SelectPlugin #########################\n\n /**\n * @inheritdoc\n */\n @CopyOptionsAsSignal()\n public options: ValueHandlerOptions;\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 /**\n * Instance of logger for logging purposes\n */\n protected logger: Logger = inject(LOGGER);\n\n //######################### public properties - implementation of ValueHandler #########################\n\n /**\n * @inheritdoc\n */\n public readonly value: Signal<TPublicValue|TPublicValue[]|undefined|null> = computed((computedValue as ValueComputedFunc<TPublicValue>).bind(this));\n\n //######################### constructor #########################\n constructor(@Inject(VALUE_HANDLER_OPTIONS) @Optional() options?: RecursivePartial<ValueHandlerOptions>|null,)\n {\n this.options = deepCopyWithArrayOverride(defaultOptions as ValueHandlerOptions,\n options);\n\n effect(() =>\n {\n const availableOptions = this.selectPlugins.OptionsHandler.availableOptions();\n\n if(isPresent(availableOptions) && isPresent(this.postponedValue))\n {\n this.logger.verbose('Select: Value handler: setting postponed value \"{{@(4)value}}\"', {value: this.postponedValue});\n\n this.setValueInternal(this.postponedValue, availableOptions);\n this.postponedValue = null;\n }\n });\n }\n\n //######################### public methods - implementation of ValueHandler #########################\n\n /**\n * @inheritdoc\n */\n public setValue(value: TPublicValue|TPublicValue[]|undefined|null): void\n {\n this.logger.verbose('Select: Value handler: setting value \"{{@(4)value}}\"', {value});\n const availableOptions = untracked(() => this.selectPlugins.OptionsHandler.availableOptions());\n\n //Options are not loaded yet, so we cannot set value, but we will handle setting value when options are loaded\n if(isBlank(availableOptions))\n {\n this.logger.verbose('Select: Value handler: options not loaded yet, postponing value \"{{@(4)value}}\"', {value});\n this.postponedValue = value;\n\n return;\n }\n\n this.postponedValue = null;\n this.setValueInternal(value, availableOptions);\n }\n\n //######################### protected methods #########################\n\n /**\n * Handles setting value when options are loaded\n * @param value - Value to be set\n * @param availableOptions - Available options that are checked whether they contain value that is being set, so we can set value only if it is available in options\n */\n protected setValueInternal(value: TPublicValue|TPublicValue[]|undefined|null, availableOptions: readonly SelectOptionState<TValue>[]): void\n {\n //this keeps only values that are available in options\n untracked(() =>\n {\n if(this.selectBus.selectOptions().multiple)\n {\n if(isBlank(value))\n {\n this.logger.verbose('Select: Value handler: value is blank, clearing selected options');\n\n this.selectBus.selectedOptions.set([]);\n\n return;\n }\n\n if(!Array.isArray(value))\n {\n throw new Error('Value must be an array when multiple is set');\n }\n\n const selectedOptions: SelectOptionState<TValue>[] = [];\n\n for(const val of value)\n {\n const option = availableOptions.find(opt => compareValueAndOption(val, opt, this.selectBus));\n\n if(option)\n {\n option.selected.set(true);\n selectedOptions.push(option);\n }\n }\n\n this.logger.verbose('Select: Value handler: selecting multiple options value \"{{@(4)value}}\"', {value: selectedOptions});\n this.selectBus.selectedOptions.set(selectedOptions);\n }\n else\n {\n const selectedOption = availableOptions.find(opt => compareValueAndOption(value as TPublicValue, opt, this.selectBus));\n selectedOption?.selected.set(true);\n this.logger.verbose('Select: Value handler: selecting single option value \"{{@(4)value}}\"', {value: selectedOption?.value()});\n\n this.selectBus.selectedOptions.set(selectedOption ?? null);\n }\n });\n }\n}\n"]}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@anglr/select",
3
- "version": "16.0.0",
3
+ "version": "16.0.1-beta.20260423124827",
4
4
  "description": "Angular component representing html select",
5
5
  "type": "module",
6
6
  "sideEffects": false,
package/src/pipes/displayValue/displayValue.pipe.d.ts 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
package/src/pipes/displayValue/displayValue.pipe.d.ts.map CHANGED
@@ -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;AAG1D,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;IAIhF;;;;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;yCAhBhJ,YAAY;uCAAZ,YAAY;CA8BxB"}
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"}
package/src/plugins/normalState/editNormalState/editNormalState.component.d.ts.map CHANGED
@@ -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,qBAoBa,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"}
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"}
package/src/plugins/normalState/editNormalState/editNormalState.component.html CHANGED
@@ -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
  }
package/src/plugins/normalState/simpleNormalState/simpleNormalState.component.d.ts.map CHANGED
@@ -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,qBAkBa,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"}
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"}
package/src/plugins/normalState/simpleNormalState/simpleNormalState.component.html CHANGED
@@ -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>
package/src/plugins/valueHandler/staticValueHandler/staticValueHandler.component.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"staticValueHandler.component.d.ts","sourceRoot":"","sources":["staticValueHandler.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAAuD,UAAU,EAA4B,MAAM,EAAY,MAAM,eAAe,CAAC;AAC5I,OAAO,EAAS,MAAM,EAAC,MAAM,eAAe,CAAC;AAC7C,OAAO,EAAqB,gBAAgB,EAAC,MAAM,gBAAgB,CAAC;AAGpE,OAAO,EAAC,iBAAiB,EAAE,YAAY,EAAE,mBAAmB,EAAC,MAAM,qBAAqB,CAAC;AACzF,OAAO,EAAC,qBAAqB,EAAE,SAAS,EAAC,MAAM,uBAAuB,CAAC;;AAUvE;;GAEG;AACH,qBAMa,kBAAkB,CAAC,MAAM,GAAG,OAAO,EAAE,YAAY,GAAG,MAAM,CAAE,YAAW,YAAY,CAAC,MAAM,EAAE,YAAY,EAAE,mBAAmB,CAAC;IAIvI;;OAEG;IACH,SAAS,CAAC,cAAc,EAAE,YAAY,GAAC,YAAY,EAAE,GAAC,SAAS,GAAC,IAAI,CAAQ;IAI5E;;OAEG;IAEI,OAAO,EAAE,mBAAmB,CAAC;IAEpC;;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;IAEtE;;OAEG;IACH,SAAS,CAAC,MAAM,EAAE,MAAM,CAAkB;IAI1C;;OAEG;IACH,SAAgB,KAAK,EAAE,MAAM,CAAC,YAAY,GAAC,YAAY,EAAE,GAAC,SAAS,GAAC,IAAI,CAAC,CAA2E;gBAG7F,OAAO,CAAC,EAAE,gBAAgB,CAAC,mBAAmB,CAAC,GAAC,IAAI;IAqB3G;;OAEG;IACI,QAAQ,CAAC,KAAK,EAAE,YAAY,GAAC,YAAY,EAAE,GAAC,SAAS,GAAC,IAAI,GAAG,IAAI;IAmBxE;;;;OAIG;IACH,SAAS,CAAC,gBAAgB,CAAC,KAAK,EAAE,YAAY,GAAC,YAAY,EAAE,GAAC,SAAS,GAAC,IAAI,EAAE,gBAAgB,EAAE,SAAS,iBAAiB,CAAC,MAAM,CAAC,EAAE,GAAG,IAAI;yCA7FlI,kBAAkB;2CAAlB,kBAAkB;CA4I9B"}
1
+ {"version":3,"file":"staticValueHandler.component.d.ts","sourceRoot":"","sources":["staticValueHandler.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAAuD,UAAU,EAA4B,MAAM,EAAY,MAAM,eAAe,CAAC;AAC5I,OAAO,EAAS,MAAM,EAAC,MAAM,eAAe,CAAC;AAC7C,OAAO,EAAqB,gBAAgB,EAAC,MAAM,gBAAgB,CAAC;AAGpE,OAAO,EAAC,iBAAiB,EAAE,YAAY,EAAE,mBAAmB,EAAC,MAAM,qBAAqB,CAAC;AACzF,OAAO,EAAC,qBAAqB,EAAE,SAAS,EAAC,MAAM,uBAAuB,CAAC;;AAUvE;;GAEG;AACH,qBAMa,kBAAkB,CAAC,MAAM,GAAG,OAAO,EAAE,YAAY,GAAG,MAAM,CAAE,YAAW,YAAY,CAAC,MAAM,EAAE,YAAY,EAAE,mBAAmB,CAAC;IAIvI;;OAEG;IACH,SAAS,CAAC,cAAc,EAAE,YAAY,GAAC,YAAY,EAAE,GAAC,SAAS,GAAC,IAAI,CAAQ;IAI5E;;OAEG;IAEI,OAAO,EAAE,mBAAmB,CAAC;IAEpC;;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;IAEtE;;OAEG;IACH,SAAS,CAAC,MAAM,EAAE,MAAM,CAAkB;IAI1C;;OAEG;IACH,SAAgB,KAAK,EAAE,MAAM,CAAC,YAAY,GAAC,YAAY,EAAE,GAAC,SAAS,GAAC,IAAI,CAAC,CAA2E;gBAG7F,OAAO,CAAC,EAAE,gBAAgB,CAAC,mBAAmB,CAAC,GAAC,IAAI;IAqB3G;;OAEG;IACI,QAAQ,CAAC,KAAK,EAAE,YAAY,GAAC,YAAY,EAAE,GAAC,SAAS,GAAC,IAAI,GAAG,IAAI;IAoBxE;;;;OAIG;IACH,SAAS,CAAC,gBAAgB,CAAC,KAAK,EAAE,YAAY,GAAC,YAAY,EAAE,GAAC,SAAS,GAAC,IAAI,EAAE,gBAAgB,EAAE,SAAS,iBAAiB,CAAC,MAAM,CAAC,EAAE,GAAG,IAAI;yCA9FlI,kBAAkB;2CAAlB,kBAAkB;CA6I9B"}
package/styles/components/_liveSearch.scss CHANGED
@@ -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
  }
package/styles/components/_normalState.scss CHANGED
@@ -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: solid;
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
- border-radius: var(--select-normalState-borderRadius);
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
- border: none;
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
package/styles/components/_popup.scss CHANGED
@@ -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
package/styles/core/_defaultTheme.scss CHANGED
@@ -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
- borderWidth: var(--size-2px-fixed),
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: unset,
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: $_white,
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: $_black,
48
+ placeholder:
49
+ (
50
+ foreground: $_black,
51
+ ),
41
52
  ),
42
53
  ),
43
54
  );
package/version.bak CHANGED
@@ -1 +1 @@
1
- 16.0.0
1
+ 16.0.1-beta.20260423124827