@anglr/select 18.0.0-beta.20260805050455 → 18.0.0-beta.20260805064441
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/es2022/src/interfaces/plugins/normalState/editNormalState.interface.js.map +1 -1
- package/es2022/src/interfaces/plugins/normalState/simpleNormalState.interface.js.map +1 -1
- package/es2022/src/plugins/normalState/editNormalState/editNormalState.component.js +3 -3
- package/es2022/src/plugins/normalState/editNormalState/editNormalState.component.js.map +1 -1
- package/es2022/src/plugins/normalState/simpleNormalState/simpleNormalState.component.js +3 -3
- package/es2022/src/plugins/normalState/simpleNormalState/simpleNormalState.component.js.map +1 -1
- package/package.json +1 -1
- package/src/interfaces/plugins/normalState/editNormalState.interface.d.ts +2 -2
- package/src/interfaces/plugins/normalState/editNormalState.interface.d.ts.map +1 -1
- package/src/interfaces/plugins/normalState/simpleNormalState.interface.d.ts +2 -2
- package/src/interfaces/plugins/normalState/simpleNormalState.interface.d.ts.map +1 -1
- package/src/plugins/normalState/editNormalState/editNormalState.component.html +12 -6
- package/src/plugins/normalState/simpleNormalState/simpleNormalState.component.html +16 -16
- package/styles/components/_liveSearch.scss +2 -0
- package/styles/components/_normalState.scss +0 -5
- package/styles/core/_defaultTheme.scss +1 -1
- package/version.bak +1 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"editNormalState.interface.js","sourceRoot":"","sources":["../../../../../src/interfaces/plugins/normalState/editNormalState.interface.ts"],"names":[],"mappings":"","sourcesContent":["import {NormalStateCssClasses, NormalStateOptions} from './normalState.interface';\n\n/**\n * Css classes for edit normal state plugin.\n */\nexport interface EditNormalStateCssClasses extends NormalStateCssClasses\n{\n /**\n * Applied to currently selected value, which is visible to user (default template)\n */\n value: string;\n\n /**\n * Applied to \"carret\", indicating that it is select and there is more options available\n */\n carret: string;\n\n /**\n * Applied to tag that represents selected value\n */\n tag: string;\n\n /**\n * Applied to HTML element that represents whole component\n */\n componentElement: string;\n\n /**\n * Applied to cancel button that allows clearing selected value\n */\n cancel: string;\n\n /**\n * Applied to cancel button icon\n */\n cancelIcon: string;\n\n /**\n * Applied to HTML element that wraps selected value\n */\n valueWrapper: string;\n\n /**\n * Applied to HTML element that represents value and holds multiple selected values\n */\n valueMultiple: string;\n\n /**\n * Applied to HTML element that represents value and holds single selected value\n */\n valueSingle: string;\n\n /**\n * Applied to HTML element that
|
|
1
|
+
{"version":3,"file":"editNormalState.interface.js","sourceRoot":"","sources":["../../../../../src/interfaces/plugins/normalState/editNormalState.interface.ts"],"names":[],"mappings":"","sourcesContent":["import {NormalStateCssClasses, NormalStateOptions} from './normalState.interface';\n\n/**\n * Css classes for edit normal state plugin.\n */\nexport interface EditNormalStateCssClasses extends NormalStateCssClasses\n{\n /**\n * Applied to currently selected value, which is visible to user (default template)\n */\n value: string;\n\n /**\n * Applied to \"carret\", indicating that it is select and there is more options available\n */\n carret: string;\n\n /**\n * Applied to tag that represents selected value\n */\n tag: string;\n\n /**\n * Applied to HTML element that represents whole component\n */\n componentElement: string;\n\n /**\n * Applied to cancel button that allows clearing selected value\n */\n cancel: string;\n\n /**\n * Applied to cancel button icon\n */\n cancelIcon: string;\n\n /**\n * Applied to HTML element that wraps selected value\n */\n valueWrapper: string;\n\n /**\n * Applied to HTML element that represents value and holds multiple selected values\n */\n valueMultiple: string;\n\n /**\n * Applied to HTML element that represents value and holds single selected value\n */\n valueSingle: string;\n\n /**\n * Applied to HTML element that handles user click and focuses on live search input\n */\n interactiveElement: string;\n}\n\n/**\n * Options for edit normal state plugin\n */\nexport interface EditNormalStateOptions<TCssClasses extends EditNormalStateCssClasses = EditNormalStateCssClasses> extends NormalStateOptions<TCssClasses>\n{\n //######################### properties #########################\n\n /**\n * Indication whether show carret icon\n */\n carret: boolean;\n}\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"simpleNormalState.interface.js","sourceRoot":"","sources":["../../../../../src/interfaces/plugins/normalState/simpleNormalState.interface.ts"],"names":[],"mappings":"","sourcesContent":["import {NormalStateCssClasses} from './normalState.interface';\n\n/**\n * Css classes for simple normal state plugin\n */\nexport interface SimpleNormalStateCssClasses extends NormalStateCssClasses\n{\n /**\n * Applied to currently selected value, which is visible to user (default template)\n */\n value: string;\n\n /**\n * Applied to \"carret\"
|
|
1
|
+
{"version":3,"file":"simpleNormalState.interface.js","sourceRoot":"","sources":["../../../../../src/interfaces/plugins/normalState/simpleNormalState.interface.ts"],"names":[],"mappings":"","sourcesContent":["import {NormalStateCssClasses} from './normalState.interface';\n\n/**\n * Css classes for simple normal state plugin\n */\nexport interface SimpleNormalStateCssClasses extends NormalStateCssClasses\n{\n /**\n * Applied to currently selected value, which is visible to user (default template)\n */\n value: string;\n\n /**\n * Applied to \"carret\" element\n */\n carret: string;\n\n /**\n * Applied to HTML element that represents normal state main element visible to user\n */\n interactiveElement: string;\n\n /**\n * Applied to HTML element that represents whole component\n */\n componentElement: string;\n\n /**\n * Applied to cancel button that allows clearing selected value\n */\n cancel: string;\n\n /**\n * Applied to cancel button icon\n */\n cancelIcon: string;\n}\n"]}
|
|
@@ -27,7 +27,7 @@ const defaultOptions = {
|
|
|
27
27
|
valueWrapper: 'select-relative select-flex-1 select-flex-row select-normal-state-gap',
|
|
28
28
|
valueMultiple: 'select-normal-state-gap select-flex-row',
|
|
29
29
|
valueSingle: 'select-flex-1',
|
|
30
|
-
|
|
30
|
+
interactiveElement: 'normal-state-interactive-element',
|
|
31
31
|
},
|
|
32
32
|
};
|
|
33
33
|
/**
|
|
@@ -130,7 +130,7 @@ export class EditNormalState {
|
|
|
130
130
|
});
|
|
131
131
|
}
|
|
132
132
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: EditNormalState, deps: [{ token: NORMAL_STATE_OPTIONS, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
133
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.4", 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>\r\n<ng-template #defaultMultipleLook=\"normalStateTagTemplate\" normalStateTagTemplate let-option let-normalState=\"normalState\">\r\n <div [class]=\"options.cssClasses.tag\">\r\n <span>{{option | displayValue | localize}}</span>\r\n <button type=\"button\" (click)=\"optionClick(option)\" tabindex=\"-1\" aria-hidden=\"true\">\r\n <span>x</span>\r\n </button>\r\n </div>\r\n</ng-template>\r\n\r\n<div [class]=\"options.cssClasses.valueWrapper\">\r\n @if(showValue())\r\n {\r\n <div [class]=\"cssClasses()\">\r\n @if(!selectBus.selectOptions().multiple)\r\n {\r\n <ng-container *ngTemplateOutlet=\"selectBus.selectOptions().templateGatherer.normalStateTemplate() || defaultSingleLook.template; context: {$implicit: $any(this)}\"/>\r\n }\r\n @else\r\n {\r\n @for(option of selectedOptionsMultiple(); track option)\r\n {\r\n <ng-container *ngTemplateOutlet=\"selectBus.selectOptions().templateGatherer.normalStateTagTemplate() || defaultMultipleLook.template; context: {$implicit: option, normalState: this}\"/>\r\n }\r\n }\r\n </div>\r\n }\r\n
|
|
133
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.4", 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>\r\n<ng-template #defaultMultipleLook=\"normalStateTagTemplate\" normalStateTagTemplate let-option let-normalState=\"normalState\">\r\n <div [class]=\"options.cssClasses.tag\">\r\n <span>{{option | displayValue | localize}}</span>\r\n <button type=\"button\" (click)=\"optionClick(option)\" tabindex=\"-1\" aria-hidden=\"true\">\r\n <span>x</span>\r\n </button>\r\n </div>\r\n</ng-template>\r\n\r\n<div [class]=\"options.cssClasses.valueWrapper\">\r\n @if(showValue())\r\n {\r\n <div [class]=\"cssClasses()\">\r\n @if(!selectBus.selectOptions().multiple)\r\n {\r\n <ng-container *ngTemplateOutlet=\"selectBus.selectOptions().templateGatherer.normalStateTemplate() || defaultSingleLook.template; context: {$implicit: $any(this)}\"/>\r\n }\r\n @else\r\n {\r\n @for(option of selectedOptionsMultiple(); track option)\r\n {\r\n <ng-container *ngTemplateOutlet=\"selectBus.selectOptions().templateGatherer.normalStateTagTemplate() || defaultMultipleLook.template; context: {$implicit: option, normalState: this}\"/>\r\n }\r\n }\r\n </div>\r\n }\r\n\r\n <ng-container #liveSearchPlaceholder/>\r\n</div>\r\n\r\n@if(options.cancelValue && (selectBus.selectedOptions() | hasValue))\r\n{\r\n <button type=\"button\"\r\n [disabled]=\"!!selectBus.selectOptions().readonly\"\r\n [class]=\"options.cssClasses.cancel\" \r\n [tooltip]=\"options.texts.cancelTitle | localize\" \r\n [attr.aria-label]=\"options.texts.cancelTitle | localize\"\r\n (focus)=\"handleFocus()\" \r\n (blur)=\"blur()\" \r\n (click)=\"cancel()\">\r\n <span [class]=\"options.cssClasses.cancelIcon\"></span>\r\n </button>\r\n}\r\n\r\n@if(options.carret)\r\n{\r\n <span aria-hidden=\"true\" role=\"presentation\" [class]=\"options.cssClasses.carret\"></span>\r\n}\r\n\r\n<button type=\"button\"\r\n [disabled]=\"!!selectBus.selectOptions().readonly\"\r\n [class]=\"options.cssClasses.interactiveElement\"\r\n (click)=\"click(); selectBus.setFocus()\"\r\n (focus)=\"handleFocus()\"\r\n (blur)=\"blur()\"\r\n tabindex=\"-1\"\r\n aria-hidden=\"true\">\r\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: "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 }); }
|
|
134
134
|
}
|
|
135
135
|
__decorate([
|
|
136
136
|
CopyOptionsAsSignal(),
|
|
@@ -149,7 +149,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImpor
|
|
|
149
149
|
NgTemplateOutlet,
|
|
150
150
|
NormalStateTemplate,
|
|
151
151
|
NormalStateTagTemplate,
|
|
152
|
-
], changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-template #defaultSingleLook=\"normalStateTemplate\" normalStateTemplate>{{selectBus.selectedOptions() | displayValue: '' | localize}}</ng-template>\r\n<ng-template #defaultMultipleLook=\"normalStateTagTemplate\" normalStateTagTemplate let-option let-normalState=\"normalState\">\r\n <div [class]=\"options.cssClasses.tag\">\r\n <span>{{option | displayValue | localize}}</span>\r\n <button type=\"button\" (click)=\"optionClick(option)\" tabindex=\"-1\" aria-hidden=\"true\">\r\n <span>x</span>\r\n </button>\r\n </div>\r\n</ng-template>\r\n\r\n<div [class]=\"options.cssClasses.valueWrapper\">\r\n @if(showValue())\r\n {\r\n <div [class]=\"cssClasses()\">\r\n @if(!selectBus.selectOptions().multiple)\r\n {\r\n <ng-container *ngTemplateOutlet=\"selectBus.selectOptions().templateGatherer.normalStateTemplate() || defaultSingleLook.template; context: {$implicit: $any(this)}\"/>\r\n }\r\n @else\r\n {\r\n @for(option of selectedOptionsMultiple(); track option)\r\n {\r\n <ng-container *ngTemplateOutlet=\"selectBus.selectOptions().templateGatherer.normalStateTagTemplate() || defaultMultipleLook.template; context: {$implicit: option, normalState: this}\"/>\r\n }\r\n }\r\n </div>\r\n }\r\n
|
|
152
|
+
], changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-template #defaultSingleLook=\"normalStateTemplate\" normalStateTemplate>{{selectBus.selectedOptions() | displayValue: '' | localize}}</ng-template>\r\n<ng-template #defaultMultipleLook=\"normalStateTagTemplate\" normalStateTagTemplate let-option let-normalState=\"normalState\">\r\n <div [class]=\"options.cssClasses.tag\">\r\n <span>{{option | displayValue | localize}}</span>\r\n <button type=\"button\" (click)=\"optionClick(option)\" tabindex=\"-1\" aria-hidden=\"true\">\r\n <span>x</span>\r\n </button>\r\n </div>\r\n</ng-template>\r\n\r\n<div [class]=\"options.cssClasses.valueWrapper\">\r\n @if(showValue())\r\n {\r\n <div [class]=\"cssClasses()\">\r\n @if(!selectBus.selectOptions().multiple)\r\n {\r\n <ng-container *ngTemplateOutlet=\"selectBus.selectOptions().templateGatherer.normalStateTemplate() || defaultSingleLook.template; context: {$implicit: $any(this)}\"/>\r\n }\r\n @else\r\n {\r\n @for(option of selectedOptionsMultiple(); track option)\r\n {\r\n <ng-container *ngTemplateOutlet=\"selectBus.selectOptions().templateGatherer.normalStateTagTemplate() || defaultMultipleLook.template; context: {$implicit: option, normalState: this}\"/>\r\n }\r\n }\r\n </div>\r\n }\r\n\r\n <ng-container #liveSearchPlaceholder/>\r\n</div>\r\n\r\n@if(options.cancelValue && (selectBus.selectedOptions() | hasValue))\r\n{\r\n <button type=\"button\"\r\n [disabled]=\"!!selectBus.selectOptions().readonly\"\r\n [class]=\"options.cssClasses.cancel\" \r\n [tooltip]=\"options.texts.cancelTitle | localize\" \r\n [attr.aria-label]=\"options.texts.cancelTitle | localize\"\r\n (focus)=\"handleFocus()\" \r\n (blur)=\"blur()\" \r\n (click)=\"cancel()\">\r\n <span [class]=\"options.cssClasses.cancelIcon\"></span>\r\n </button>\r\n}\r\n\r\n@if(options.carret)\r\n{\r\n <span aria-hidden=\"true\" role=\"presentation\" [class]=\"options.cssClasses.carret\"></span>\r\n}\r\n\r\n<button type=\"button\"\r\n [disabled]=\"!!selectBus.selectOptions().readonly\"\r\n [class]=\"options.cssClasses.interactiveElement\"\r\n (click)=\"click(); selectBus.setFocus()\"\r\n (focus)=\"handleFocus()\"\r\n (blur)=\"blur()\"\r\n tabindex=\"-1\"\r\n aria-hidden=\"true\">\r\n</button>" }]
|
|
153
153
|
}], ctorParameters: () => [{ type: undefined, decorators: [{
|
|
154
154
|
type: Inject,
|
|
155
155
|
args: [NORMAL_STATE_OPTIONS]
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"editNormalState.component.js","sourceRoot":"","sources":["../../../../../src/plugins/normalState/editNormalState/editNormalState.component.ts","../../../../../src/plugins/normalState/editNormalState/editNormalState.component.html"],"names":[],"mappings":"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","sourcesContent":["import {ChangeDetectionStrategy, Component, computed, effect, ElementRef, Inject, inject, Optional, Signal, viewChild} from '@angular/core';\nimport {NgTemplateOutlet} from '@angular/common';\nimport {LocalizePipe, TooltipDirective} from '@anglr/common';\nimport {RecursivePartial} from '@jscrpt/common';\nimport {deepCopyWithArrayOverride} from '@jscrpt/common/lodash';\n\nimport {NormalState, EditNormalStateOptions, SelectPlugin, EditNormalStateCssClasses, SelectOptionState} from '../../../interfaces';\nimport {SelectPluginInstances, SelectBus} from '../../../misc/classes';\nimport {CopyOptionsAsSignal} from '../../../decorators';\nimport {NORMAL_STATE_OPTIONS} from '../../../misc/tokens';\nimport {DisplayValue, HasValue} from '../../../pipes';\nimport {NormalStateTagTemplate, NormalStateTemplate} from '../../../directives';\nimport {hasValue} from '../../../misc/utils';\n\n//TODO: improvement, carret direction\n\nconst defaultOptions: EditNormalStateOptions<EditNormalStateCssClasses> =\n{\n cancelValue: true,\n carret: true,\n texts:\n {\n cancelTitle: 'cancel selected values',\n },\n cssClasses:\n {\n componentElement: 'normal-state-component',\n value: 'normal-state-value',\n tag: 'select-tag',\n carret: 'fas fa-caret-down select-align-self-center',\n cancel: 'normal-state-cancel',\n cancelIcon: 'fas fa-times select-align-self-center',\n valueWrapper: 'select-relative select-flex-1 select-flex-row select-normal-state-gap',\n valueMultiple: 'select-normal-state-gap select-flex-row',\n valueSingle: 'select-flex-1',\n liveSearchWrapper: 'normal-state-live-search-wrapper',\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>\r\n<ng-template #defaultMultipleLook=\"normalStateTagTemplate\" normalStateTagTemplate let-option let-normalState=\"normalState\">\r\n <div [class]=\"options.cssClasses.tag\">\r\n <span>{{option | displayValue | localize}}</span>\r\n <button type=\"button\" (click)=\"optionClick(option)\" tabindex=\"-1\" aria-hidden=\"true\">\r\n <span>x</span>\r\n </button>\r\n </div>\r\n</ng-template>\r\n\r\n<div [class]=\"options.cssClasses.valueWrapper\">\r\n @if(showValue())\r\n {\r\n <div [class]=\"cssClasses()\">\r\n @if(!selectBus.selectOptions().multiple)\r\n {\r\n <ng-container *ngTemplateOutlet=\"selectBus.selectOptions().templateGatherer.normalStateTemplate() || defaultSingleLook.template; context: {$implicit: $any(this)}\"/>\r\n }\r\n @else\r\n {\r\n @for(option of selectedOptionsMultiple(); track option)\r\n {\r\n <ng-container *ngTemplateOutlet=\"selectBus.selectOptions().templateGatherer.normalStateTagTemplate() || defaultMultipleLook.template; context: {$implicit: option, normalState: this}\"/>\r\n }\r\n }\r\n </div>\r\n }\r\n</div>\r\n\r\n<div [class]=\"options.cssClasses.liveSearchWrapper\">\r\n <ng-container #liveSearchPlaceholder/>\r\n</div>\r\n\r\n@if(options.cancelValue && (selectBus.selectedOptions() | hasValue))\r\n{\r\n <button type=\"button\"\r\n [disabled]=\"!!selectBus.selectOptions().readonly\"\r\n [class]=\"options.cssClasses.cancel\" \r\n [tooltip]=\"options.texts.cancelTitle | localize\" \r\n [attr.aria-label]=\"options.texts.cancelTitle | localize\"\r\n (focus)=\"handleFocus()\" \r\n (blur)=\"blur()\" \r\n (click)=\"cancel()\">\r\n <span [class]=\"options.cssClasses.cancelIcon\"></span>\r\n </button>\r\n}\r\n\r\n@if(options.carret)\r\n{\r\n <button type=\"button\" [disabled]=\"!!selectBus.selectOptions().readonly\" (click)=\"click(); selectBus.setFocus()\" (focus)=\"handleFocus()\" (blur)=\"blur()\" tabindex=\"-1\" aria-hidden=\"true\">\r\n <span [class]=\"options.cssClasses.carret\"></span>\r\n </button>\r\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 interactiveElement: 'normal-state-interactive-element',\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>\r\n<ng-template #defaultMultipleLook=\"normalStateTagTemplate\" normalStateTagTemplate let-option let-normalState=\"normalState\">\r\n <div [class]=\"options.cssClasses.tag\">\r\n <span>{{option | displayValue | localize}}</span>\r\n <button type=\"button\" (click)=\"optionClick(option)\" tabindex=\"-1\" aria-hidden=\"true\">\r\n <span>x</span>\r\n </button>\r\n </div>\r\n</ng-template>\r\n\r\n<div [class]=\"options.cssClasses.valueWrapper\">\r\n @if(showValue())\r\n {\r\n <div [class]=\"cssClasses()\">\r\n @if(!selectBus.selectOptions().multiple)\r\n {\r\n <ng-container *ngTemplateOutlet=\"selectBus.selectOptions().templateGatherer.normalStateTemplate() || defaultSingleLook.template; context: {$implicit: $any(this)}\"/>\r\n }\r\n @else\r\n {\r\n @for(option of selectedOptionsMultiple(); track option)\r\n {\r\n <ng-container *ngTemplateOutlet=\"selectBus.selectOptions().templateGatherer.normalStateTagTemplate() || defaultMultipleLook.template; context: {$implicit: option, normalState: this}\"/>\r\n }\r\n }\r\n </div>\r\n }\r\n\r\n <ng-container #liveSearchPlaceholder/>\r\n</div>\r\n\r\n@if(options.cancelValue && (selectBus.selectedOptions() | hasValue))\r\n{\r\n <button type=\"button\"\r\n [disabled]=\"!!selectBus.selectOptions().readonly\"\r\n [class]=\"options.cssClasses.cancel\" \r\n [tooltip]=\"options.texts.cancelTitle | localize\" \r\n [attr.aria-label]=\"options.texts.cancelTitle | localize\"\r\n (focus)=\"handleFocus()\" \r\n (blur)=\"blur()\" \r\n (click)=\"cancel()\">\r\n <span [class]=\"options.cssClasses.cancelIcon\"></span>\r\n </button>\r\n}\r\n\r\n@if(options.carret)\r\n{\r\n <span aria-hidden=\"true\" role=\"presentation\" [class]=\"options.cssClasses.carret\"></span>\r\n}\r\n\r\n<button type=\"button\"\r\n [disabled]=\"!!selectBus.selectOptions().readonly\"\r\n [class]=\"options.cssClasses.interactiveElement\"\r\n (click)=\"click(); selectBus.setFocus()\"\r\n (focus)=\"handleFocus()\"\r\n (blur)=\"blur()\"\r\n tabindex=\"-1\"\r\n aria-hidden=\"true\">\r\n</button>"]}
|
|
@@ -18,7 +18,7 @@ const defaultOptions = {
|
|
|
18
18
|
componentElement: 'normal-state-component',
|
|
19
19
|
interactiveElement: 'normal-state-interactive-element',
|
|
20
20
|
value: 'normal-state-value select-align-self-center',
|
|
21
|
-
|
|
21
|
+
carret: 'normal-state-carret fas fa-caret-down select-align-self-center',
|
|
22
22
|
cancel: 'normal-state-cancel',
|
|
23
23
|
cancelIcon: 'fas fa-times select-align-self-center',
|
|
24
24
|
},
|
|
@@ -99,7 +99,7 @@ export class SimpleNormalState {
|
|
|
99
99
|
});
|
|
100
100
|
}
|
|
101
101
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", 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: "22.0.4", 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>\r\n\r\n<
|
|
102
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.4", 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>\r\n\r\n<span [class]=\"options.cssClasses.value\" aria-hidden=\"true\" role=\"presentation\">\r\n <ng-container *ngTemplateOutlet=\"selectBus.selectOptions().templateGatherer.normalStateTemplate() || defaultLook; context: {$implicit: this}\"/>\r\n</span>\r\n\r\n@if(options.cancelValue && (selectBus.selectedOptions() | hasValue))\r\n{\r\n <button type=\"button\" \r\n [disabled]=\"!!selectBus.selectOptions().readonly\"\r\n [class]=\"options.cssClasses.cancel\" \r\n [tooltip]=\"options.texts.cancelTitle | localize\" \r\n [attr.aria-label]=\"options.texts.cancelTitle | localize\"\r\n (click)=\"cancel()\" \r\n (blur)=\"blur()\" \r\n (focus)=\"handleFocus()\">\r\n <span [class]=\"options.cssClasses.cancelIcon\"></span>\r\n </button>\r\n}\r\n\r\n<span aria-hidden=\"true\" role=\"presentation\" [class]=\"options.cssClasses.carret\"></span>\r\n\r\n<button #htmlButton\r\n type=\"button\"\r\n role=\"combobox\"\r\n [class]=\"options.cssClasses.interactiveElement\"\r\n [disabled]=\"!!selectBus.selectOptions().readonly\"\r\n [attr.aria-expanded]=\"selectBus.popupVisible()\"\r\n [attr.aria-controls]=\"selectBus.popupVisible() ? selectBus.id : null\"\r\n [attr.aria-activedescendant]=\"selectBus.popupVisible() ? activeDescendant() : null\"\r\n [attr.aria-label]=\"selectBus.selectedOptions() | displayValue | localize\"\r\n [tooltip]=\"selectBus.selectedOptions() | displayValue | localize\"\r\n (click)=\"click()\"\r\n (blur)=\"blur()\"\r\n (focus)=\"handleFocus()\">\r\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(),
|
|
@@ -116,7 +116,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImpor
|
|
|
116
116
|
LocalizePipe,
|
|
117
117
|
TooltipDirective,
|
|
118
118
|
NgTemplateOutlet,
|
|
119
|
-
], changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-template #defaultLook>{{selectBus.selectedOptions() | displayValue | localize}}</ng-template>\r\n\r\n<
|
|
119
|
+
], changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-template #defaultLook>{{selectBus.selectedOptions() | displayValue | localize}}</ng-template>\r\n\r\n<span [class]=\"options.cssClasses.value\" aria-hidden=\"true\" role=\"presentation\">\r\n <ng-container *ngTemplateOutlet=\"selectBus.selectOptions().templateGatherer.normalStateTemplate() || defaultLook; context: {$implicit: this}\"/>\r\n</span>\r\n\r\n@if(options.cancelValue && (selectBus.selectedOptions() | hasValue))\r\n{\r\n <button type=\"button\" \r\n [disabled]=\"!!selectBus.selectOptions().readonly\"\r\n [class]=\"options.cssClasses.cancel\" \r\n [tooltip]=\"options.texts.cancelTitle | localize\" \r\n [attr.aria-label]=\"options.texts.cancelTitle | localize\"\r\n (click)=\"cancel()\" \r\n (blur)=\"blur()\" \r\n (focus)=\"handleFocus()\">\r\n <span [class]=\"options.cssClasses.cancelIcon\"></span>\r\n </button>\r\n}\r\n\r\n<span aria-hidden=\"true\" role=\"presentation\" [class]=\"options.cssClasses.carret\"></span>\r\n\r\n<button #htmlButton\r\n type=\"button\"\r\n role=\"combobox\"\r\n [class]=\"options.cssClasses.interactiveElement\"\r\n [disabled]=\"!!selectBus.selectOptions().readonly\"\r\n [attr.aria-expanded]=\"selectBus.popupVisible()\"\r\n [attr.aria-controls]=\"selectBus.popupVisible() ? selectBus.id : null\"\r\n [attr.aria-activedescendant]=\"selectBus.popupVisible() ? activeDescendant() : null\"\r\n [attr.aria-label]=\"selectBus.selectedOptions() | displayValue | localize\"\r\n [tooltip]=\"selectBus.selectedOptions() | displayValue | localize\"\r\n (click)=\"click()\"\r\n (blur)=\"blur()\"\r\n (focus)=\"handleFocus()\">\r\n</button>" }]
|
|
120
120
|
}], ctorParameters: () => [{ type: undefined, decorators: [{
|
|
121
121
|
type: Inject,
|
|
122
122
|
args: [NORMAL_STATE_OPTIONS]
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"simpleNormalState.component.js","sourceRoot":"","sources":["../../../../../src/plugins/normalState/simpleNormalState/simpleNormalState.component.ts","../../../../../src/plugins/normalState/simpleNormalState/simpleNormalState.component.html"],"names":[],"mappings":";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,kBAAkB,EAAE,kCAAkC;QACtD,KAAK,EAAE,6CAA6C;QACpD,
|
|
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 interactiveElement: 'normal-state-interactive-element',\n value: 'normal-state-value select-align-self-center',\n carret: 'normal-state-carret 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>\r\n\r\n<span [class]=\"options.cssClasses.value\" aria-hidden=\"true\" role=\"presentation\">\r\n <ng-container *ngTemplateOutlet=\"selectBus.selectOptions().templateGatherer.normalStateTemplate() || defaultLook; context: {$implicit: this}\"/>\r\n</span>\r\n\r\n@if(options.cancelValue && (selectBus.selectedOptions() | hasValue))\r\n{\r\n <button type=\"button\" \r\n [disabled]=\"!!selectBus.selectOptions().readonly\"\r\n [class]=\"options.cssClasses.cancel\" \r\n [tooltip]=\"options.texts.cancelTitle | localize\" \r\n [attr.aria-label]=\"options.texts.cancelTitle | localize\"\r\n (click)=\"cancel()\" \r\n (blur)=\"blur()\" \r\n (focus)=\"handleFocus()\">\r\n <span [class]=\"options.cssClasses.cancelIcon\"></span>\r\n </button>\r\n}\r\n\r\n<span aria-hidden=\"true\" role=\"presentation\" [class]=\"options.cssClasses.carret\"></span>\r\n\r\n<button #htmlButton\r\n type=\"button\"\r\n role=\"combobox\"\r\n [class]=\"options.cssClasses.interactiveElement\"\r\n [disabled]=\"!!selectBus.selectOptions().readonly\"\r\n [attr.aria-expanded]=\"selectBus.popupVisible()\"\r\n [attr.aria-controls]=\"selectBus.popupVisible() ? selectBus.id : null\"\r\n [attr.aria-activedescendant]=\"selectBus.popupVisible() ? activeDescendant() : null\"\r\n [attr.aria-label]=\"selectBus.selectedOptions() | displayValue | localize\"\r\n [tooltip]=\"selectBus.selectedOptions() | displayValue | localize\"\r\n (click)=\"click()\"\r\n (blur)=\"blur()\"\r\n (focus)=\"handleFocus()\">\r\n</button>"]}
|
package/package.json
CHANGED
|
@@ -40,9 +40,9 @@ export interface EditNormalStateCssClasses extends NormalStateCssClasses {
|
|
|
40
40
|
*/
|
|
41
41
|
valueSingle: string;
|
|
42
42
|
/**
|
|
43
|
-
* Applied to HTML element that
|
|
43
|
+
* Applied to HTML element that handles user click and focuses on live search input
|
|
44
44
|
*/
|
|
45
|
-
|
|
45
|
+
interactiveElement: string;
|
|
46
46
|
}
|
|
47
47
|
/**
|
|
48
48
|
* Options for edit normal state plugin
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"editNormalState.interface.d.ts","sourceRoot":"","sources":["editNormalState.interface.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,qBAAqB,EAAE,kBAAkB,EAAC,MAAM,yBAAyB,CAAC;AAElF;;GAEG;AACH,MAAM,WAAW,yBAA0B,SAAQ,qBAAqB;IAEpE;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IAEd;;OAEG;IACH,MAAM,EAAE,MAAM,CAAC;IAEf;;OAEG;IACH,GAAG,EAAE,MAAM,CAAC;IAEZ;;OAEG;IACH,gBAAgB,EAAE,MAAM,CAAC;IAEzB;;OAEG;IACH,MAAM,EAAE,MAAM,CAAC;IAEf;;OAEG;IACH,UAAU,EAAE,MAAM,CAAC;IAEnB;;OAEG;IACH,YAAY,EAAE,MAAM,CAAC;IAErB;;OAEG;IACH,aAAa,EAAE,MAAM,CAAC;IAEtB;;OAEG;IACH,WAAW,EAAE,MAAM,CAAC;IAEpB;;OAEG;IACH,
|
|
1
|
+
{"version":3,"file":"editNormalState.interface.d.ts","sourceRoot":"","sources":["editNormalState.interface.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,qBAAqB,EAAE,kBAAkB,EAAC,MAAM,yBAAyB,CAAC;AAElF;;GAEG;AACH,MAAM,WAAW,yBAA0B,SAAQ,qBAAqB;IAEpE;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IAEd;;OAEG;IACH,MAAM,EAAE,MAAM,CAAC;IAEf;;OAEG;IACH,GAAG,EAAE,MAAM,CAAC;IAEZ;;OAEG;IACH,gBAAgB,EAAE,MAAM,CAAC;IAEzB;;OAEG;IACH,MAAM,EAAE,MAAM,CAAC;IAEf;;OAEG;IACH,UAAU,EAAE,MAAM,CAAC;IAEnB;;OAEG;IACH,YAAY,EAAE,MAAM,CAAC;IAErB;;OAEG;IACH,aAAa,EAAE,MAAM,CAAC;IAEtB;;OAEG;IACH,WAAW,EAAE,MAAM,CAAC;IAEpB;;OAEG;IACH,kBAAkB,EAAE,MAAM,CAAC;CAC9B;AAED;;GAEG;AACH,MAAM,WAAW,sBAAsB,CAAC,WAAW,SAAS,yBAAyB,GAAG,yBAAyB,CAAE,SAAQ,kBAAkB,CAAC,WAAW,CAAC;IAItJ;;OAEG;IACH,MAAM,EAAE,OAAO,CAAC;CACnB"}
|
|
@@ -8,9 +8,9 @@ export interface SimpleNormalStateCssClasses extends NormalStateCssClasses {
|
|
|
8
8
|
*/
|
|
9
9
|
value: string;
|
|
10
10
|
/**
|
|
11
|
-
* Applied to "carret"
|
|
11
|
+
* Applied to "carret" element
|
|
12
12
|
*/
|
|
13
|
-
|
|
13
|
+
carret: string;
|
|
14
14
|
/**
|
|
15
15
|
* Applied to HTML element that represents normal state main element visible to user
|
|
16
16
|
*/
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"simpleNormalState.interface.d.ts","sourceRoot":"","sources":["simpleNormalState.interface.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,qBAAqB,EAAC,MAAM,yBAAyB,CAAC;AAE9D;;GAEG;AACH,MAAM,WAAW,2BAA4B,SAAQ,qBAAqB;IAEtE;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IAEd;;OAEG;IACH,
|
|
1
|
+
{"version":3,"file":"simpleNormalState.interface.d.ts","sourceRoot":"","sources":["simpleNormalState.interface.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,qBAAqB,EAAC,MAAM,yBAAyB,CAAC;AAE9D;;GAEG;AACH,MAAM,WAAW,2BAA4B,SAAQ,qBAAqB;IAEtE;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IAEd;;OAEG;IACH,MAAM,EAAE,MAAM,CAAC;IAEf;;OAEG;IACH,kBAAkB,EAAE,MAAM,CAAC;IAE3B;;OAEG;IACH,gBAAgB,EAAE,MAAM,CAAC;IAEzB;;OAEG;IACH,MAAM,EAAE,MAAM,CAAC;IAEf;;OAEG;IACH,UAAU,EAAE,MAAM,CAAC;CACtB"}
|
|
@@ -25,9 +25,7 @@
|
|
|
25
25
|
}
|
|
26
26
|
</div>
|
|
27
27
|
}
|
|
28
|
-
</div>
|
|
29
28
|
|
|
30
|
-
<div [class]="options.cssClasses.liveSearchWrapper">
|
|
31
29
|
<ng-container #liveSearchPlaceholder/>
|
|
32
30
|
</div>
|
|
33
31
|
|
|
@@ -47,7 +45,15 @@
|
|
|
47
45
|
|
|
48
46
|
@if(options.carret)
|
|
49
47
|
{
|
|
50
|
-
<
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
48
|
+
<span aria-hidden="true" role="presentation" [class]="options.cssClasses.carret"></span>
|
|
49
|
+
}
|
|
50
|
+
|
|
51
|
+
<button type="button"
|
|
52
|
+
[disabled]="!!selectBus.selectOptions().readonly"
|
|
53
|
+
[class]="options.cssClasses.interactiveElement"
|
|
54
|
+
(click)="click(); selectBus.setFocus()"
|
|
55
|
+
(focus)="handleFocus()"
|
|
56
|
+
(blur)="blur()"
|
|
57
|
+
tabindex="-1"
|
|
58
|
+
aria-hidden="true">
|
|
59
|
+
</button>
|
|
@@ -1,20 +1,5 @@
|
|
|
1
1
|
<ng-template #defaultLook>{{selectBus.selectedOptions() | displayValue | localize}}</ng-template>
|
|
2
2
|
|
|
3
|
-
<button #htmlButton
|
|
4
|
-
type="button"
|
|
5
|
-
role="combobox"
|
|
6
|
-
[class]="options.cssClasses.interactiveElement"
|
|
7
|
-
[disabled]="!!selectBus.selectOptions().readonly"
|
|
8
|
-
[attr.aria-expanded]="selectBus.popupVisible()"
|
|
9
|
-
[attr.aria-controls]="selectBus.popupVisible() ? selectBus.id : null"
|
|
10
|
-
[attr.aria-activedescendant]="selectBus.popupVisible() ? activeDescendant() : null"
|
|
11
|
-
[attr.aria-label]="selectBus.selectedOptions() | displayValue | localize"
|
|
12
|
-
[tooltip]="selectBus.selectedOptions() | displayValue | localize"
|
|
13
|
-
(click)="click()"
|
|
14
|
-
(blur)="blur()"
|
|
15
|
-
(focus)="handleFocus()">
|
|
16
|
-
</button>
|
|
17
|
-
|
|
18
3
|
<span [class]="options.cssClasses.value" aria-hidden="true" role="presentation">
|
|
19
4
|
<ng-container *ngTemplateOutlet="selectBus.selectOptions().templateGatherer.normalStateTemplate() || defaultLook; context: {$implicit: this}"/>
|
|
20
5
|
</span>
|
|
@@ -33,4 +18,19 @@
|
|
|
33
18
|
</button>
|
|
34
19
|
}
|
|
35
20
|
|
|
36
|
-
<span aria-hidden="true" role="presentation" [class]="options.cssClasses.
|
|
21
|
+
<span aria-hidden="true" role="presentation" [class]="options.cssClasses.carret"></span>
|
|
22
|
+
|
|
23
|
+
<button #htmlButton
|
|
24
|
+
type="button"
|
|
25
|
+
role="combobox"
|
|
26
|
+
[class]="options.cssClasses.interactiveElement"
|
|
27
|
+
[disabled]="!!selectBus.selectOptions().readonly"
|
|
28
|
+
[attr.aria-expanded]="selectBus.popupVisible()"
|
|
29
|
+
[attr.aria-controls]="selectBus.popupVisible() ? selectBus.id : null"
|
|
30
|
+
[attr.aria-activedescendant]="selectBus.popupVisible() ? activeDescendant() : null"
|
|
31
|
+
[attr.aria-label]="selectBus.selectedOptions() | displayValue | localize"
|
|
32
|
+
[tooltip]="selectBus.selectedOptions() | displayValue | localize"
|
|
33
|
+
(click)="click()"
|
|
34
|
+
(blur)="blur()"
|
|
35
|
+
(focus)="handleFocus()">
|
|
36
|
+
</button>
|
package/version.bak
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
18.0.0-beta.
|
|
1
|
+
18.0.0-beta.20260805064441
|