@siemens/element-ng 48.5.2 → 48.7.0
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/datatable/index.d.ts +54 -3
- package/fesm2022/siemens-element-ng-datatable.mjs +11 -5
- package/fesm2022/siemens-element-ng-datatable.mjs.map +1 -1
- package/fesm2022/siemens-element-ng-filtered-search.mjs +4 -4
- package/fesm2022/siemens-element-ng-filtered-search.mjs.map +1 -1
- package/fesm2022/siemens-element-ng-formly.mjs.map +1 -1
- package/fesm2022/siemens-element-ng-icon.mjs +4 -4
- package/fesm2022/siemens-element-ng-icon.mjs.map +1 -1
- package/fesm2022/siemens-element-ng-loading-spinner.mjs +3 -1
- package/fesm2022/siemens-element-ng-loading-spinner.mjs.map +1 -1
- package/fesm2022/siemens-element-ng-markdown-renderer.mjs +12 -1
- package/fesm2022/siemens-element-ng-markdown-renderer.mjs.map +1 -1
- package/fesm2022/siemens-element-ng-phone-number.mjs +2 -2
- package/fesm2022/siemens-element-ng-phone-number.mjs.map +1 -1
- package/fesm2022/siemens-element-ng-summary-chip.mjs +4 -4
- package/fesm2022/siemens-element-ng-summary-chip.mjs.map +1 -1
- package/fesm2022/siemens-element-ng-typeahead.mjs +41 -7
- package/fesm2022/siemens-element-ng-typeahead.mjs.map +1 -1
- package/icon/index.d.ts +4 -4
- package/loading-spinner/index.d.ts +1 -0
- package/package.json +16 -16
- package/schematics/scss-import-to-siemens-migration/index.js +0 -3
- package/schematics/scss-import-to-siemens-migration/style-mappings.js +20 -4
- package/schematics/utils/ts-utils.js +8 -4
- package/summary-chip/index.d.ts +3 -3
- package/typeahead/index.d.ts +21 -3
|
@@ -367,7 +367,7 @@ class SiPhoneNumberInputComponent {
|
|
|
367
367
|
provide: SI_FORM_ITEM_CONTROL,
|
|
368
368
|
useExisting: SiPhoneNumberInputComponent
|
|
369
369
|
}
|
|
370
|
-
], viewQueries: [{ propertyName: "phoneInput", first: true, predicate: ["phoneInput"], descendants: true, isSignal: true }], usesOnChanges: true, ngImport: i0, template: "<div\n class=\"btn-group w-100 d-flex shadow-none border-0\"\n [class.disabled]=\"disabled()\"\n [class.readonly]=\"readonly()\"\n [attr.aria-disabled]=\"disabled()\"\n>\n <button\n #trigger=\"cdkOverlayOrigin\"\n cdkOverlayOrigin\n siPhoneNumberInputSelect\n class=\"dropdown-toggle d-flex align-items-center ms-n4 my-n4 py-2 px-4 border-0\"\n type=\"button\"\n role=\"combobox\"\n aria-haspopup=\"listbox\"\n [disabled]=\"disabled()\"\n [class.readonly]=\"readonly()\"\n [attr.aria-labelledby]=\"id() + '-aria-label ' + id() + '-value'\"\n [attr.aria-expanded]=\"open\"\n [complexOptions]=\"countryList()\"\n [value]=\"selectedCountry\"\n [valueProvider]=\"valueProvider\"\n [tabindex]=\"disabled() ? '-1' : '0'\"\n [attr.aria-controls]=\"id() + '-listbox'\"\n (valueChange)=\"countryInput($event)\"\n (click)=\"openOverlay()\"\n (focus)=\"countryFocused.set(true)\"\n (blur)=\"countryFocused.set(false)\"\n >\n <span class=\"visually-hidden\" [id]=\"id() + '-aria-label'\">{{\n selectCountryAriaLabel() | translate\n }}</span>\n <span\n class=\"fi\"\n aria-hidden=\"true\"\n [ngClass]=\"'fi-' + (selectedCountry?.isoCode
|
|
370
|
+
], viewQueries: [{ propertyName: "phoneInput", first: true, predicate: ["phoneInput"], descendants: true, isSignal: true }], usesOnChanges: true, ngImport: i0, template: "<div\n class=\"btn-group w-100 d-flex shadow-none border-0\"\n [class.disabled]=\"disabled()\"\n [class.readonly]=\"readonly()\"\n [attr.aria-disabled]=\"disabled()\"\n>\n <button\n #trigger=\"cdkOverlayOrigin\"\n cdkOverlayOrigin\n siPhoneNumberInputSelect\n class=\"dropdown-toggle d-flex align-items-center ms-n4 my-n4 py-2 px-4 border-0\"\n type=\"button\"\n role=\"combobox\"\n aria-haspopup=\"listbox\"\n [disabled]=\"disabled()\"\n [class.readonly]=\"readonly()\"\n [attr.aria-labelledby]=\"id() + '-aria-label ' + id() + '-value'\"\n [attr.aria-expanded]=\"open\"\n [complexOptions]=\"countryList()\"\n [value]=\"selectedCountry\"\n [valueProvider]=\"valueProvider\"\n [tabindex]=\"disabled() ? '-1' : '0'\"\n [attr.aria-controls]=\"id() + '-listbox'\"\n (valueChange)=\"countryInput($event)\"\n (click)=\"openOverlay()\"\n (focus)=\"countryFocused.set(true)\"\n (blur)=\"countryFocused.set(false)\"\n >\n <span class=\"visually-hidden\" [id]=\"id() + '-aria-label'\">{{\n selectCountryAriaLabel() | translate\n }}</span>\n <span\n class=\"fi\"\n aria-hidden=\"true\"\n [ngClass]=\"'fi-' + ((selectedCountry?.isoCode | lowercase) ?? 'xx')\"\n ></span>\n @if (selectedCountry) {\n <span class=\"si-body ms-4\" [id]=\"id() + '-value'\">\n <span class=\"visually-hidden\">{{ selectedCountry.name }}</span>\n +{{ selectedCountry.countryCode }}\n </span>\n }\n <si-icon class=\"icon dropdown-caret\" [icon]=\"icons.elementDown2\" />\n\n <ng-template\n cdkConnectedOverlay\n cdkConnectedOverlayBackdropClass=\"cdk-overlay-transparent-backdrop\"\n [cdkConnectedOverlayHasBackdrop]=\"true\"\n [cdkConnectedOverlayOrigin]=\"trigger\"\n [cdkConnectedOverlayOpen]=\"open\"\n [cdkConnectedOverlayFlexibleDimensions]=\"true\"\n [cdkConnectedOverlayOffsetX]=\"-1\"\n [cdkConnectedOverlayWidth]=\"overlayWidth\"\n (backdropClick)=\"overlayDetach()\"\n (detach)=\"overlayDetach()\"\n >\n <si-select-list-has-filter\n [baseId]=\"id()\"\n [filterPlaceholder]=\"placeholderForSearch()\"\n [noResultsFoundLabel]=\"searchNoResultsFoundLabel()\"\n [optionTemplate]=\"optionTemplate\"\n (closeOverlay)=\"overlayDetach()\"\n />\n </ng-template>\n <ng-template #optionTemplate let-option>\n <span class=\"fi me-5\" [ngClass]=\"'fi-' + (option.value.isoCode | lowercase)\"></span>\n {{ option.value.name }} +{{ option.value.countryCode }}\n </ng-template>\n </button>\n <input\n #phoneInput\n type=\"tel\"\n class=\"ms-4 border-0 p-0 focus-none shadow-none flex-grow-1 phone-number\"\n [attr.aria-label]=\"phoneNumberAriaLabel() | translate\"\n [attr.aria-describedby]=\"errormessageId()\"\n [placeholder]=\"placeholder\"\n [disabled]=\"disabled()\"\n [readonly]=\"readonly()\"\n (input)=\"input()\"\n (blur)=\"blur()\"\n />\n</div>\n", styles: [":host:focus-within:not(.country-focus){outline:var(--element-button-focus-width) solid var(--element-focus-default);outline-offset:var(--element-button-focus-overlay-width)}.search-country{display:inline-block;margin-block-start:8px;margin-block-end:8px;margin-inline:8px;inline-size:calc(100% - 16px)}.disabled{pointer-events:none}.disabled,.disabled:hover,.disabled:focus{--border-color: var(--element-ui-3);color:var(--element-text-disabled)}.dropdown-toggle{border-radius:var(--element-input-radius);min-inline-size:auto!important;background:transparent}.dropdown-toggle .fi.fi-xx{background-image:none;background-color:var(--element-text-disabled)}.dropdown-toggle:disabled{opacity:var(--element-action-disabled-opacity)}.dropdown-toggle.readonly{cursor:default}.phone-number{background-color:transparent;inline-size:inherit}.phone-number:disabled,.phone-number[readonly]{opacity:1}.phone-number:disabled{color:var(--element-text-disabled)}.phone-number:disabled::placeholder{color:transparent}.phone-number::placeholder{color:var(--element-text-secondary)}\n"], dependencies: [{ kind: "directive", type: CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "directive", type: CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: SiIconComponent, selector: "si-icon", inputs: ["icon"] }, { kind: "directive", type: SiPhoneNumberInputSelectDirective, selector: "[siPhoneNumberInputSelect]" }, { kind: "component", type: SiSelectListHasFilterComponent, selector: "si-select-list-has-filter", inputs: ["filterPlaceholder", "noResultsFoundLabel"] }, { kind: "pipe", type: SiTranslatePipe, name: "translate" }, { kind: "pipe", type: LowerCasePipe, name: "lowercase" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
371
371
|
}
|
|
372
372
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SiPhoneNumberInputComponent, decorators: [{
|
|
373
373
|
type: Component,
|
|
@@ -402,7 +402,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImpor
|
|
|
402
402
|
'[class.disabled]': 'disabled()',
|
|
403
403
|
'[class.readonly]': 'readonly()',
|
|
404
404
|
'[class.country-focus]': 'countryFocused()'
|
|
405
|
-
}, template: "<div\n class=\"btn-group w-100 d-flex shadow-none border-0\"\n [class.disabled]=\"disabled()\"\n [class.readonly]=\"readonly()\"\n [attr.aria-disabled]=\"disabled()\"\n>\n <button\n #trigger=\"cdkOverlayOrigin\"\n cdkOverlayOrigin\n siPhoneNumberInputSelect\n class=\"dropdown-toggle d-flex align-items-center ms-n4 my-n4 py-2 px-4 border-0\"\n type=\"button\"\n role=\"combobox\"\n aria-haspopup=\"listbox\"\n [disabled]=\"disabled()\"\n [class.readonly]=\"readonly()\"\n [attr.aria-labelledby]=\"id() + '-aria-label ' + id() + '-value'\"\n [attr.aria-expanded]=\"open\"\n [complexOptions]=\"countryList()\"\n [value]=\"selectedCountry\"\n [valueProvider]=\"valueProvider\"\n [tabindex]=\"disabled() ? '-1' : '0'\"\n [attr.aria-controls]=\"id() + '-listbox'\"\n (valueChange)=\"countryInput($event)\"\n (click)=\"openOverlay()\"\n (focus)=\"countryFocused.set(true)\"\n (blur)=\"countryFocused.set(false)\"\n >\n <span class=\"visually-hidden\" [id]=\"id() + '-aria-label'\">{{\n selectCountryAriaLabel() | translate\n }}</span>\n <span\n class=\"fi\"\n aria-hidden=\"true\"\n [ngClass]=\"'fi-' + (selectedCountry?.isoCode
|
|
405
|
+
}, template: "<div\n class=\"btn-group w-100 d-flex shadow-none border-0\"\n [class.disabled]=\"disabled()\"\n [class.readonly]=\"readonly()\"\n [attr.aria-disabled]=\"disabled()\"\n>\n <button\n #trigger=\"cdkOverlayOrigin\"\n cdkOverlayOrigin\n siPhoneNumberInputSelect\n class=\"dropdown-toggle d-flex align-items-center ms-n4 my-n4 py-2 px-4 border-0\"\n type=\"button\"\n role=\"combobox\"\n aria-haspopup=\"listbox\"\n [disabled]=\"disabled()\"\n [class.readonly]=\"readonly()\"\n [attr.aria-labelledby]=\"id() + '-aria-label ' + id() + '-value'\"\n [attr.aria-expanded]=\"open\"\n [complexOptions]=\"countryList()\"\n [value]=\"selectedCountry\"\n [valueProvider]=\"valueProvider\"\n [tabindex]=\"disabled() ? '-1' : '0'\"\n [attr.aria-controls]=\"id() + '-listbox'\"\n (valueChange)=\"countryInput($event)\"\n (click)=\"openOverlay()\"\n (focus)=\"countryFocused.set(true)\"\n (blur)=\"countryFocused.set(false)\"\n >\n <span class=\"visually-hidden\" [id]=\"id() + '-aria-label'\">{{\n selectCountryAriaLabel() | translate\n }}</span>\n <span\n class=\"fi\"\n aria-hidden=\"true\"\n [ngClass]=\"'fi-' + ((selectedCountry?.isoCode | lowercase) ?? 'xx')\"\n ></span>\n @if (selectedCountry) {\n <span class=\"si-body ms-4\" [id]=\"id() + '-value'\">\n <span class=\"visually-hidden\">{{ selectedCountry.name }}</span>\n +{{ selectedCountry.countryCode }}\n </span>\n }\n <si-icon class=\"icon dropdown-caret\" [icon]=\"icons.elementDown2\" />\n\n <ng-template\n cdkConnectedOverlay\n cdkConnectedOverlayBackdropClass=\"cdk-overlay-transparent-backdrop\"\n [cdkConnectedOverlayHasBackdrop]=\"true\"\n [cdkConnectedOverlayOrigin]=\"trigger\"\n [cdkConnectedOverlayOpen]=\"open\"\n [cdkConnectedOverlayFlexibleDimensions]=\"true\"\n [cdkConnectedOverlayOffsetX]=\"-1\"\n [cdkConnectedOverlayWidth]=\"overlayWidth\"\n (backdropClick)=\"overlayDetach()\"\n (detach)=\"overlayDetach()\"\n >\n <si-select-list-has-filter\n [baseId]=\"id()\"\n [filterPlaceholder]=\"placeholderForSearch()\"\n [noResultsFoundLabel]=\"searchNoResultsFoundLabel()\"\n [optionTemplate]=\"optionTemplate\"\n (closeOverlay)=\"overlayDetach()\"\n />\n </ng-template>\n <ng-template #optionTemplate let-option>\n <span class=\"fi me-5\" [ngClass]=\"'fi-' + (option.value.isoCode | lowercase)\"></span>\n {{ option.value.name }} +{{ option.value.countryCode }}\n </ng-template>\n </button>\n <input\n #phoneInput\n type=\"tel\"\n class=\"ms-4 border-0 p-0 focus-none shadow-none flex-grow-1 phone-number\"\n [attr.aria-label]=\"phoneNumberAriaLabel() | translate\"\n [attr.aria-describedby]=\"errormessageId()\"\n [placeholder]=\"placeholder\"\n [disabled]=\"disabled()\"\n [readonly]=\"readonly()\"\n (input)=\"input()\"\n (blur)=\"blur()\"\n />\n</div>\n", styles: [":host:focus-within:not(.country-focus){outline:var(--element-button-focus-width) solid var(--element-focus-default);outline-offset:var(--element-button-focus-overlay-width)}.search-country{display:inline-block;margin-block-start:8px;margin-block-end:8px;margin-inline:8px;inline-size:calc(100% - 16px)}.disabled{pointer-events:none}.disabled,.disabled:hover,.disabled:focus{--border-color: var(--element-ui-3);color:var(--element-text-disabled)}.dropdown-toggle{border-radius:var(--element-input-radius);min-inline-size:auto!important;background:transparent}.dropdown-toggle .fi.fi-xx{background-image:none;background-color:var(--element-text-disabled)}.dropdown-toggle:disabled{opacity:var(--element-action-disabled-opacity)}.dropdown-toggle.readonly{cursor:default}.phone-number{background-color:transparent;inline-size:inherit}.phone-number:disabled,.phone-number[readonly]{opacity:1}.phone-number:disabled{color:var(--element-text-disabled)}.phone-number:disabled::placeholder{color:transparent}.phone-number::placeholder{color:var(--element-text-secondary)}\n"] }]
|
|
406
406
|
}] });
|
|
407
407
|
|
|
408
408
|
/**
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"siemens-element-ng-phone-number.mjs","sources":["../../../../projects/element-ng/phone-number/si-phone-number-input-select.directive.ts","../../../../projects/element-ng/phone-number/si-phone-number-input.component.ts","../../../../projects/element-ng/phone-number/si-phone-number-input.component.html","../../../../projects/element-ng/phone-number/si-phone-number-input.module.ts","../../../../projects/element-ng/phone-number/index.ts","../../../../projects/element-ng/phone-number/siemens-element-ng-phone-number.ts"],"sourcesContent":["/**\n * Copyright (c) Siemens 2016 - 2025\n * SPDX-License-Identifier: MIT\n */\nimport { Directive } from '@angular/core';\nimport {\n SiSelectComplexOptionsDirective,\n SiSelectSingleValueDirective\n} from '@siemens/element-ng/select';\n\n/**\n * This directive provides the si-select options and value strategy for the phone number input.\n * As we don't use si-select directly, we need to provide these strategies manually.\n */\n@Directive({\n selector: '[siPhoneNumberInputSelect]',\n hostDirectives: [\n {\n directive: SiSelectComplexOptionsDirective,\n inputs: ['complexOptions', 'valueProvider']\n },\n { directive: SiSelectSingleValueDirective, inputs: ['value'], outputs: ['valueChange'] }\n ]\n})\nexport class SiPhoneNumberInputSelectDirective {}\n","/**\n * Copyright (c) Siemens 2016 - 2025\n * SPDX-License-Identifier: MIT\n */\nimport { CdkConnectedOverlay, CdkOverlayOrigin } from '@angular/cdk/overlay';\nimport { LowerCasePipe, NgClass } from '@angular/common';\nimport {\n booleanAttribute,\n ChangeDetectionStrategy,\n ChangeDetectorRef,\n Component,\n computed,\n ElementRef,\n inject,\n input,\n model,\n OnChanges,\n output,\n signal,\n SimpleChanges,\n viewChild\n} from '@angular/core';\nimport {\n AbstractControl,\n ControlValueAccessor,\n NG_VALIDATORS,\n NG_VALUE_ACCESSOR,\n ValidationErrors,\n Validator\n} from '@angular/forms';\nimport { SI_FORM_ITEM_CONTROL, SiFormItemControl } from '@siemens/element-ng/form';\nimport { addIcons, elementDown2, SiIconComponent } from '@siemens/element-ng/icon';\nimport { SiSelectListHasFilterComponent } from '@siemens/element-ng/select';\nimport {\n injectSiTranslateService,\n SiTranslatePipe,\n t\n} from '@siemens/element-translate-ng/translate';\nimport { PhoneNumber, PhoneNumberFormat, PhoneNumberUtil } from 'google-libphonenumber';\n\nimport { SiPhoneNumberInputSelectDirective } from './si-phone-number-input-select.directive';\nimport { CountryInfo, PhoneDetails } from './si-phone-number-input.models';\n\n@Component({\n selector: 'si-phone-number-input',\n imports: [\n CdkOverlayOrigin,\n CdkConnectedOverlay,\n NgClass,\n SiIconComponent,\n SiPhoneNumberInputSelectDirective,\n SiSelectListHasFilterComponent,\n SiTranslatePipe,\n LowerCasePipe\n ],\n templateUrl: './si-phone-number-input.component.html',\n styleUrl: './si-phone-number-input.component.scss',\n providers: [\n {\n provide: NG_VALIDATORS,\n useExisting: SiPhoneNumberInputComponent,\n multi: true\n },\n {\n provide: NG_VALUE_ACCESSOR,\n useExisting: SiPhoneNumberInputComponent,\n multi: true\n },\n {\n provide: SI_FORM_ITEM_CONTROL,\n useExisting: SiPhoneNumberInputComponent\n }\n ],\n changeDetection: ChangeDetectionStrategy.OnPush,\n host: {\n 'role': 'group',\n '[attr.aria-labelledby]': 'labelledby()',\n '[attr.id]': 'id()',\n '[class.disabled]': 'disabled()',\n '[class.readonly]': 'readonly()',\n '[class.country-focus]': 'countryFocused()'\n }\n})\nexport class SiPhoneNumberInputComponent\n implements ControlValueAccessor, Validator, OnChanges, SiFormItemControl\n{\n private static idCounter = 0;\n\n private phoneUtil = PhoneNumberUtil.getInstance();\n private translate = injectSiTranslateService();\n private changeDetectorRef = inject(ChangeDetectorRef);\n private elementRef = inject<ElementRef<HTMLElement>>(ElementRef);\n\n /**\n * Unique identifier.\n *\n * @defaultValue\n * ```\n * `__si-phone-number-input-${SiPhoneNumberInputComponent.idCounter++}`\n * ```\n */\n readonly id = input(`__si-phone-number-input-${SiPhoneNumberInputComponent.idCounter++}`);\n\n /**\n * ISO_3166-2 Code of the selected country.\n */\n readonly country = model<string>();\n\n /**\n * ISO_3166-2 Code of the country which shall be used on form-control reset.\n */\n readonly defaultCountry = input<string>();\n\n /**\n * Placeholder text for country search input.\n *\n * @defaultValue\n * ```\n * t(() => $localize`:@@SI_PHONE_NUMBER_INPUT.SEARCH_PLACEHOLDER:Search`)\n * ```\n */\n readonly placeholderForSearch = input(\n t(() => $localize`:@@SI_PHONE_NUMBER_INPUT.SEARCH_PLACEHOLDER:Search`)\n );\n /**\n * @defaultValue\n * ```\n * t(() => $localize`:@@SI_PHONE_NUMBER_INPUT.SEARCH_NO-RESULTS_FOUND:No results found`)\n * ```\n */\n readonly searchNoResultsFoundLabel = input(\n t(() => $localize`:@@SI_PHONE_NUMBER_INPUT.SEARCH_NO-RESULTS_FOUND:No results found`)\n );\n /**\n * Text for the country dropdown aria-label attribute.\n *\n * @defaultValue\n * ```\n * t(() => $localize`:@@SI_PHONE_NUMBER_INPUT.SELECT_COUNTRY:Select country`)\n * ```\n */\n readonly selectCountryAriaLabel = input(\n t(() => $localize`:@@SI_PHONE_NUMBER_INPUT.SELECT_COUNTRY:Select country`)\n );\n /**\n * Text for the phone number input aria-label attribute.\n *\n * @defaultValue\n * ```\n * t(() => $localize`:@@SI_PHONE_NUMBER_INPUT.PHONE_NUMBER_INPUT_LABEL:Enter phone number`)\n * ```\n */\n readonly phoneNumberAriaLabel = input(\n t(() => $localize`:@@SI_PHONE_NUMBER_INPUT.PHONE_NUMBER_INPUT_LABEL:Enter phone number`)\n );\n /**\n * List of countries in ISO2 format, from which the user is allowed to select one.\n * If no values are provided, the dropdown will show all known countries.\n */\n readonly supportedCountries = input<readonly string[] | null>();\n\n /**\n * @defaultValue\n * ```\n * `${this.id()}-label`\n * ```\n */\n readonly labelledby = input(`${this.id()}-label`);\n\n /** @defaultValue false */\n // eslint-disable-next-line @angular-eslint/no-input-rename\n readonly disabledInput = input(false, { alias: 'disabled', transform: booleanAttribute });\n\n /** @defaultValue false */\n readonly readonly = input(false, { transform: booleanAttribute });\n\n readonly valueChange = output<PhoneDetails>();\n\n /**\n * This ID will be bound to the `aria-describedby` attribute of the phone-number-input.\n * Use this to reference the element containing the error message(s) for the phone-number-input.\n * It will be picked by the {@link SiFormItemComponent} if the phone-number-input is used inside a form item.\n *\n * @defaultValue\n * ```\n * `${this.id()}-errormessage`\n * ```\n */\n readonly errormessageId = input(`${this.id()}-errormessage`);\n\n protected readonly phoneInput = viewChild.required<ElementRef<HTMLInputElement>>('phoneInput');\n protected selectedCountry?: CountryInfo;\n protected placeholder = '';\n protected readonly countryFocused = signal(false);\n protected open = false;\n protected overlayWidth = 0;\n protected readonly disabled = computed(() => this.disabledInput() || this.disabledNgControl());\n protected readonly countryList = computed(() => {\n const countries = this.allowedCountries() ?? this.phoneUtil.getSupportedRegions();\n return countries\n .map((country: string) => ({\n name: this.getCountryName(country),\n countryCode: this.phoneUtil.getCountryCodeForRegion(country),\n isoCode: country\n }))\n .sort((a: CountryInfo, b: CountryInfo) => a.name.localeCompare(b.name));\n });\n protected readonly icons = addIcons({ elementDown2 });\n private readonly allowedCountries = computed(\n () => this.supportedCountries() ?? this.phoneUtil.getSupportedRegions()\n );\n private readonly disabledNgControl = signal(false);\n private isValidNumber = true;\n private phoneNumber?: PhoneNumber;\n private onChange: (val: string) => void = () => {};\n private onTouched: () => void = () => {};\n\n ngOnChanges(changes: SimpleChanges): void {\n if (changes.country) {\n this.writeCountry();\n }\n }\n\n /** @internal */\n writeValue(value: string | undefined): void {\n this.phoneNumber = this.parseNumber(value);\n if (this.phoneNumber) {\n this.writeValueToInput();\n this.country.set(this.getRegionCode());\n } else {\n // Number could not be parsed, write raw value instead to handle cases like undefined\n this.writeTextToInput(value);\n this.country.set(this.defaultCountry() ?? this.country());\n }\n this.writeCountry();\n this.changeDetectorRef.markForCheck();\n }\n\n /** @internal */\n registerOnChange(fn: any): void {\n this.onChange = fn;\n }\n\n /** @internal */\n registerOnTouched(fn: () => void): void {\n this.onTouched = fn;\n }\n\n /** @internal */\n setDisabledState(isDisabled: boolean): void {\n this.disabledNgControl.set(isDisabled);\n }\n\n /** @internal */\n validate(control: AbstractControl): ValidationErrors | null {\n if (!this.phoneInput().nativeElement.value) {\n return null;\n }\n\n this.isValidNumber = false;\n if (!this.phoneNumber || !this.phoneUtil.isValidNumber(this.phoneNumber)) {\n return {\n invalidPhoneNumberFormat: true\n };\n }\n\n if (!this.countryList().some(c => c.isoCode === this.selectedCountry!.isoCode)) {\n return {\n notSupportedPhoneNumberCountry: true\n };\n }\n\n this.isValidNumber = true;\n return null;\n }\n\n protected input(): void {\n const rawNumber = this.phoneInput().nativeElement.value;\n this.phoneNumber = this.parseNumber(rawNumber);\n\n if (this.phoneNumber) {\n const regionCode = this.getRegionCode();\n let countryInfo = this.countryList().find(country => regionCode === country.isoCode);\n if (!countryInfo && regionCode) {\n countryInfo = {\n name: this.getCountryName(regionCode),\n countryCode: this.phoneNumber.getCountryCode()!,\n isoCode: regionCode\n };\n }\n if (countryInfo && this.selectedCountry?.isoCode !== countryInfo.isoCode) {\n this.selectedCountry = countryInfo;\n }\n } else if (rawNumber.trim().startsWith('+')) {\n this.selectedCountry = undefined;\n }\n\n this.handleChange();\n }\n\n protected blur(): void {\n this.countryFocused.set(false);\n this.onTouched();\n this.writeValueToInput();\n this.valueChange.emit({\n country: this.selectedCountry,\n phoneNumber: this.formatPhoneNumber(PhoneNumberFormat.INTERNATIONAL),\n isValid: this.isValidNumber\n });\n }\n\n protected countryInput(num: CountryInfo): void {\n this.selectedCountry = num;\n this.updatePlaceholder();\n this.refreshValueAfterCountryChange();\n this.handleChange();\n }\n\n protected openOverlay(): void {\n if (!this.readonly()) {\n this.open = true;\n this.overlayWidth = this.elementRef.nativeElement.getBoundingClientRect().width + 2; // 2px border\n }\n }\n\n protected overlayDetach(): void {\n this.open = false;\n this.phoneInput().nativeElement.focus();\n }\n\n protected valueProvider(country: CountryInfo): string {\n return `${country.name} +${country.countryCode}`;\n }\n\n private writeCountry(): void {\n const currentCountry = this.country()!;\n this.selectedCountry = this.countryList().find(country => country.isoCode === currentCountry);\n if (!this.selectedCountry) {\n const countryCode = this.phoneUtil.getCountryCodeForRegion(\n currentCountry ?? this.defaultCountry() ?? 'XX'\n );\n if (countryCode) {\n this.selectedCountry = {\n isoCode: currentCountry,\n countryCode,\n name: this.getCountryName(currentCountry)\n };\n }\n }\n this.updatePlaceholder();\n this.refreshValueAfterCountryChange();\n }\n\n private getCountryName(countryCode: string): string {\n // This auto translates the given country name to the selected locale language\n return (\n new Intl.DisplayNames([this.translate.currentLanguage], { type: 'region' }).of(\n countryCode.toUpperCase()\n ) ?? ''\n );\n }\n\n private updatePlaceholder(): void {\n if (this.selectedCountry) {\n this.placeholder = this.phoneUtil\n .format(\n this.phoneUtil.getExampleNumber(this.selectedCountry.isoCode),\n PhoneNumberFormat.NATIONAL\n )\n .replace(/^0/, '');\n }\n }\n\n private parseNumber(rawNumber: string | undefined): PhoneNumber | undefined {\n try {\n let regionCodeForParsing: string | undefined;\n if (!rawNumber?.trim().startsWith('+')) {\n regionCodeForParsing = this.selectedCountry?.isoCode;\n }\n return this.phoneUtil.parse(rawNumber, regionCodeForParsing);\n } catch (e) {\n // The Number is too short, we cannot parse it yet. Error can be ignored. Hopefully, the user enters more digits.\n return;\n }\n }\n\n /**\n * PhoneUtil does not resolve country code early enough when the national prefix is shared among other countries (+1 and +44).\n * This Method fakes a complete number to force PhoneUtil returning a proper region code.\n */\n private getRegionCode(): string | undefined {\n if (this.phoneNumber) {\n const regionCode = this.phoneUtil.getRegionCodeForNumber(this.phoneNumber);\n if (regionCode) {\n return regionCode;\n }\n\n const nationalNumber = this.phoneNumber.getNationalNumber() + '';\n if (\n // USA, CANADA, ...\n (this.phoneNumber.getCountryCode() === 1 && nationalNumber.length >= 3) ||\n // UK, ...\n (this.phoneNumber.getCountryCode() === 44 && nationalNumber.length >= 4)\n ) {\n return this.phoneUtil.getRegionCodeForNumber(\n this.phoneUtil.parse(\n '+' +\n this.phoneNumber.getCountryCode() +\n nationalNumber +\n new Array(10 - nationalNumber.length).fill(5).join('')\n )\n );\n }\n\n return this.phoneUtil.getRegionCodeForCountryCode(this.phoneNumber.getCountryCode()!);\n }\n\n return undefined;\n }\n\n private formatPhoneNumber(format: PhoneNumberFormat): string | undefined {\n if (this.phoneNumber) {\n return this.phoneUtil.format(this.phoneNumber, format);\n }\n\n return undefined;\n }\n\n private handleChange(): void {\n if (this.selectedCountry && this.country() !== this.selectedCountry?.isoCode) {\n this.country.set(this.selectedCountry?.isoCode);\n }\n\n if (this.phoneNumber) {\n this.onChange(this.formatPhoneNumber(PhoneNumberFormat.INTERNATIONAL)!);\n } else {\n this.onChange('');\n }\n }\n\n private writeTextToInput(value?: string): void {\n this.phoneInput().nativeElement.value = value ?? '';\n }\n /**\n * Format and update input text or clear input text if the input value is undefined.\n */\n private writeValueToInput(): void {\n if (this.phoneNumber) {\n this.writeTextToInput(this.formatPhoneNumber(PhoneNumberFormat.NATIONAL)!.replace(/^0/, ''));\n }\n }\n\n private refreshValueAfterCountryChange(): void {\n if (this.selectedCountry) {\n this.phoneNumber?.setCountryCode(this.selectedCountry?.countryCode);\n this.writeValueToInput();\n }\n }\n}\n","<div\n class=\"btn-group w-100 d-flex shadow-none border-0\"\n [class.disabled]=\"disabled()\"\n [class.readonly]=\"readonly()\"\n [attr.aria-disabled]=\"disabled()\"\n>\n <button\n #trigger=\"cdkOverlayOrigin\"\n cdkOverlayOrigin\n siPhoneNumberInputSelect\n class=\"dropdown-toggle d-flex align-items-center ms-n4 my-n4 py-2 px-4 border-0\"\n type=\"button\"\n role=\"combobox\"\n aria-haspopup=\"listbox\"\n [disabled]=\"disabled()\"\n [class.readonly]=\"readonly()\"\n [attr.aria-labelledby]=\"id() + '-aria-label ' + id() + '-value'\"\n [attr.aria-expanded]=\"open\"\n [complexOptions]=\"countryList()\"\n [value]=\"selectedCountry\"\n [valueProvider]=\"valueProvider\"\n [tabindex]=\"disabled() ? '-1' : '0'\"\n [attr.aria-controls]=\"id() + '-listbox'\"\n (valueChange)=\"countryInput($event)\"\n (click)=\"openOverlay()\"\n (focus)=\"countryFocused.set(true)\"\n (blur)=\"countryFocused.set(false)\"\n >\n <span class=\"visually-hidden\" [id]=\"id() + '-aria-label'\">{{\n selectCountryAriaLabel() | translate\n }}</span>\n <span\n class=\"fi\"\n aria-hidden=\"true\"\n [ngClass]=\"'fi-' + (selectedCountry?.isoCode?.toLowerCase() ?? 'xx')\"\n ></span>\n @if (selectedCountry) {\n <span class=\"si-body ms-4\" [id]=\"id() + '-value'\">\n <span class=\"visually-hidden\">{{ selectedCountry.name }}</span>\n +{{ selectedCountry.countryCode }}\n </span>\n }\n <si-icon class=\"icon dropdown-caret\" [icon]=\"icons.elementDown2\" />\n\n <ng-template\n cdkConnectedOverlay\n cdkConnectedOverlayBackdropClass=\"cdk-overlay-transparent-backdrop\"\n [cdkConnectedOverlayHasBackdrop]=\"true\"\n [cdkConnectedOverlayOrigin]=\"trigger\"\n [cdkConnectedOverlayOpen]=\"open\"\n [cdkConnectedOverlayFlexibleDimensions]=\"true\"\n [cdkConnectedOverlayOffsetX]=\"-1\"\n [cdkConnectedOverlayWidth]=\"overlayWidth\"\n (backdropClick)=\"overlayDetach()\"\n (detach)=\"overlayDetach()\"\n >\n <si-select-list-has-filter\n [baseId]=\"id()\"\n [filterPlaceholder]=\"placeholderForSearch()\"\n [noResultsFoundLabel]=\"searchNoResultsFoundLabel()\"\n [optionTemplate]=\"optionTemplate\"\n (closeOverlay)=\"overlayDetach()\"\n />\n </ng-template>\n <ng-template #optionTemplate let-option>\n <span class=\"fi me-5\" [ngClass]=\"'fi-' + (option.value.isoCode | lowercase)\"></span>\n {{ option.value.name }} +{{ option.value.countryCode }}\n </ng-template>\n </button>\n <input\n #phoneInput\n type=\"tel\"\n class=\"ms-4 border-0 p-0 focus-none shadow-none flex-grow-1 phone-number\"\n [attr.aria-label]=\"phoneNumberAriaLabel() | translate\"\n [attr.aria-describedby]=\"errormessageId()\"\n [placeholder]=\"placeholder\"\n [disabled]=\"disabled()\"\n [readonly]=\"readonly()\"\n (input)=\"input()\"\n (blur)=\"blur()\"\n />\n</div>\n","/**\n * Copyright (c) Siemens 2016 - 2025\n * SPDX-License-Identifier: MIT\n */\nimport { NgModule } from '@angular/core';\n\nimport { SiPhoneNumberInputComponent } from './si-phone-number-input.component';\n\n@NgModule({\n imports: [SiPhoneNumberInputComponent],\n exports: [SiPhoneNumberInputComponent]\n})\nexport class SiPhoneNumberInputModule {}\n","/**\n * Copyright (c) Siemens 2016 - 2025\n * SPDX-License-Identifier: MIT\n */\nexport * from './si-phone-number-input.module';\nexport * from './si-phone-number-input.component';\nexport * from './si-phone-number-input.models';\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"siemens-element-ng-phone-number.mjs","sources":["../../../../projects/element-ng/phone-number/si-phone-number-input-select.directive.ts","../../../../projects/element-ng/phone-number/si-phone-number-input.component.ts","../../../../projects/element-ng/phone-number/si-phone-number-input.component.html","../../../../projects/element-ng/phone-number/si-phone-number-input.module.ts","../../../../projects/element-ng/phone-number/index.ts","../../../../projects/element-ng/phone-number/siemens-element-ng-phone-number.ts"],"sourcesContent":["/**\n * Copyright (c) Siemens 2016 - 2025\n * SPDX-License-Identifier: MIT\n */\nimport { Directive } from '@angular/core';\nimport {\n SiSelectComplexOptionsDirective,\n SiSelectSingleValueDirective\n} from '@siemens/element-ng/select';\n\n/**\n * This directive provides the si-select options and value strategy for the phone number input.\n * As we don't use si-select directly, we need to provide these strategies manually.\n */\n@Directive({\n selector: '[siPhoneNumberInputSelect]',\n hostDirectives: [\n {\n directive: SiSelectComplexOptionsDirective,\n inputs: ['complexOptions', 'valueProvider']\n },\n { directive: SiSelectSingleValueDirective, inputs: ['value'], outputs: ['valueChange'] }\n ]\n})\nexport class SiPhoneNumberInputSelectDirective {}\n","/**\n * Copyright (c) Siemens 2016 - 2025\n * SPDX-License-Identifier: MIT\n */\nimport { CdkConnectedOverlay, CdkOverlayOrigin } from '@angular/cdk/overlay';\nimport { LowerCasePipe, NgClass } from '@angular/common';\nimport {\n booleanAttribute,\n ChangeDetectionStrategy,\n ChangeDetectorRef,\n Component,\n computed,\n ElementRef,\n inject,\n input,\n model,\n OnChanges,\n output,\n signal,\n SimpleChanges,\n viewChild\n} from '@angular/core';\nimport {\n AbstractControl,\n ControlValueAccessor,\n NG_VALIDATORS,\n NG_VALUE_ACCESSOR,\n ValidationErrors,\n Validator\n} from '@angular/forms';\nimport { SI_FORM_ITEM_CONTROL, SiFormItemControl } from '@siemens/element-ng/form';\nimport { addIcons, elementDown2, SiIconComponent } from '@siemens/element-ng/icon';\nimport { SiSelectListHasFilterComponent } from '@siemens/element-ng/select';\nimport {\n injectSiTranslateService,\n SiTranslatePipe,\n t\n} from '@siemens/element-translate-ng/translate';\nimport { PhoneNumber, PhoneNumberFormat, PhoneNumberUtil } from 'google-libphonenumber';\n\nimport { SiPhoneNumberInputSelectDirective } from './si-phone-number-input-select.directive';\nimport { CountryInfo, PhoneDetails } from './si-phone-number-input.models';\n\n@Component({\n selector: 'si-phone-number-input',\n imports: [\n CdkOverlayOrigin,\n CdkConnectedOverlay,\n NgClass,\n SiIconComponent,\n SiPhoneNumberInputSelectDirective,\n SiSelectListHasFilterComponent,\n SiTranslatePipe,\n LowerCasePipe\n ],\n templateUrl: './si-phone-number-input.component.html',\n styleUrl: './si-phone-number-input.component.scss',\n providers: [\n {\n provide: NG_VALIDATORS,\n useExisting: SiPhoneNumberInputComponent,\n multi: true\n },\n {\n provide: NG_VALUE_ACCESSOR,\n useExisting: SiPhoneNumberInputComponent,\n multi: true\n },\n {\n provide: SI_FORM_ITEM_CONTROL,\n useExisting: SiPhoneNumberInputComponent\n }\n ],\n changeDetection: ChangeDetectionStrategy.OnPush,\n host: {\n 'role': 'group',\n '[attr.aria-labelledby]': 'labelledby()',\n '[attr.id]': 'id()',\n '[class.disabled]': 'disabled()',\n '[class.readonly]': 'readonly()',\n '[class.country-focus]': 'countryFocused()'\n }\n})\nexport class SiPhoneNumberInputComponent\n implements ControlValueAccessor, Validator, OnChanges, SiFormItemControl\n{\n private static idCounter = 0;\n\n private phoneUtil = PhoneNumberUtil.getInstance();\n private translate = injectSiTranslateService();\n private changeDetectorRef = inject(ChangeDetectorRef);\n private elementRef = inject<ElementRef<HTMLElement>>(ElementRef);\n\n /**\n * Unique identifier.\n *\n * @defaultValue\n * ```\n * `__si-phone-number-input-${SiPhoneNumberInputComponent.idCounter++}`\n * ```\n */\n readonly id = input(`__si-phone-number-input-${SiPhoneNumberInputComponent.idCounter++}`);\n\n /**\n * ISO_3166-2 Code of the selected country.\n */\n readonly country = model<string>();\n\n /**\n * ISO_3166-2 Code of the country which shall be used on form-control reset.\n */\n readonly defaultCountry = input<string>();\n\n /**\n * Placeholder text for country search input.\n *\n * @defaultValue\n * ```\n * t(() => $localize`:@@SI_PHONE_NUMBER_INPUT.SEARCH_PLACEHOLDER:Search`)\n * ```\n */\n readonly placeholderForSearch = input(\n t(() => $localize`:@@SI_PHONE_NUMBER_INPUT.SEARCH_PLACEHOLDER:Search`)\n );\n /**\n * @defaultValue\n * ```\n * t(() => $localize`:@@SI_PHONE_NUMBER_INPUT.SEARCH_NO-RESULTS_FOUND:No results found`)\n * ```\n */\n readonly searchNoResultsFoundLabel = input(\n t(() => $localize`:@@SI_PHONE_NUMBER_INPUT.SEARCH_NO-RESULTS_FOUND:No results found`)\n );\n /**\n * Text for the country dropdown aria-label attribute.\n *\n * @defaultValue\n * ```\n * t(() => $localize`:@@SI_PHONE_NUMBER_INPUT.SELECT_COUNTRY:Select country`)\n * ```\n */\n readonly selectCountryAriaLabel = input(\n t(() => $localize`:@@SI_PHONE_NUMBER_INPUT.SELECT_COUNTRY:Select country`)\n );\n /**\n * Text for the phone number input aria-label attribute.\n *\n * @defaultValue\n * ```\n * t(() => $localize`:@@SI_PHONE_NUMBER_INPUT.PHONE_NUMBER_INPUT_LABEL:Enter phone number`)\n * ```\n */\n readonly phoneNumberAriaLabel = input(\n t(() => $localize`:@@SI_PHONE_NUMBER_INPUT.PHONE_NUMBER_INPUT_LABEL:Enter phone number`)\n );\n /**\n * List of countries in ISO2 format, from which the user is allowed to select one.\n * If no values are provided, the dropdown will show all known countries.\n */\n readonly supportedCountries = input<readonly string[] | null>();\n\n /**\n * @defaultValue\n * ```\n * `${this.id()}-label`\n * ```\n */\n readonly labelledby = input(`${this.id()}-label`);\n\n /** @defaultValue false */\n // eslint-disable-next-line @angular-eslint/no-input-rename\n readonly disabledInput = input(false, { alias: 'disabled', transform: booleanAttribute });\n\n /** @defaultValue false */\n readonly readonly = input(false, { transform: booleanAttribute });\n\n readonly valueChange = output<PhoneDetails>();\n\n /**\n * This ID will be bound to the `aria-describedby` attribute of the phone-number-input.\n * Use this to reference the element containing the error message(s) for the phone-number-input.\n * It will be picked by the {@link SiFormItemComponent} if the phone-number-input is used inside a form item.\n *\n * @defaultValue\n * ```\n * `${this.id()}-errormessage`\n * ```\n */\n readonly errormessageId = input(`${this.id()}-errormessage`);\n\n protected readonly phoneInput = viewChild.required<ElementRef<HTMLInputElement>>('phoneInput');\n protected selectedCountry?: CountryInfo;\n protected placeholder = '';\n protected readonly countryFocused = signal(false);\n protected open = false;\n protected overlayWidth = 0;\n protected readonly disabled = computed(() => this.disabledInput() || this.disabledNgControl());\n protected readonly countryList = computed(() => {\n const countries = this.allowedCountries() ?? this.phoneUtil.getSupportedRegions();\n return countries\n .map((country: string) => ({\n name: this.getCountryName(country),\n countryCode: this.phoneUtil.getCountryCodeForRegion(country),\n isoCode: country\n }))\n .sort((a: CountryInfo, b: CountryInfo) => a.name.localeCompare(b.name));\n });\n protected readonly icons = addIcons({ elementDown2 });\n private readonly allowedCountries = computed(\n () => this.supportedCountries() ?? this.phoneUtil.getSupportedRegions()\n );\n private readonly disabledNgControl = signal(false);\n private isValidNumber = true;\n private phoneNumber?: PhoneNumber;\n private onChange: (val: string) => void = () => {};\n private onTouched: () => void = () => {};\n\n ngOnChanges(changes: SimpleChanges): void {\n if (changes.country) {\n this.writeCountry();\n }\n }\n\n /** @internal */\n writeValue(value: string | undefined): void {\n this.phoneNumber = this.parseNumber(value);\n if (this.phoneNumber) {\n this.writeValueToInput();\n this.country.set(this.getRegionCode());\n } else {\n // Number could not be parsed, write raw value instead to handle cases like undefined\n this.writeTextToInput(value);\n this.country.set(this.defaultCountry() ?? this.country());\n }\n this.writeCountry();\n this.changeDetectorRef.markForCheck();\n }\n\n /** @internal */\n registerOnChange(fn: any): void {\n this.onChange = fn;\n }\n\n /** @internal */\n registerOnTouched(fn: () => void): void {\n this.onTouched = fn;\n }\n\n /** @internal */\n setDisabledState(isDisabled: boolean): void {\n this.disabledNgControl.set(isDisabled);\n }\n\n /** @internal */\n validate(control: AbstractControl): ValidationErrors | null {\n if (!this.phoneInput().nativeElement.value) {\n return null;\n }\n\n this.isValidNumber = false;\n if (!this.phoneNumber || !this.phoneUtil.isValidNumber(this.phoneNumber)) {\n return {\n invalidPhoneNumberFormat: true\n };\n }\n\n if (!this.countryList().some(c => c.isoCode === this.selectedCountry!.isoCode)) {\n return {\n notSupportedPhoneNumberCountry: true\n };\n }\n\n this.isValidNumber = true;\n return null;\n }\n\n protected input(): void {\n const rawNumber = this.phoneInput().nativeElement.value;\n this.phoneNumber = this.parseNumber(rawNumber);\n\n if (this.phoneNumber) {\n const regionCode = this.getRegionCode();\n let countryInfo = this.countryList().find(country => regionCode === country.isoCode);\n if (!countryInfo && regionCode) {\n countryInfo = {\n name: this.getCountryName(regionCode),\n countryCode: this.phoneNumber.getCountryCode()!,\n isoCode: regionCode\n };\n }\n if (countryInfo && this.selectedCountry?.isoCode !== countryInfo.isoCode) {\n this.selectedCountry = countryInfo;\n }\n } else if (rawNumber.trim().startsWith('+')) {\n this.selectedCountry = undefined;\n }\n\n this.handleChange();\n }\n\n protected blur(): void {\n this.countryFocused.set(false);\n this.onTouched();\n this.writeValueToInput();\n this.valueChange.emit({\n country: this.selectedCountry,\n phoneNumber: this.formatPhoneNumber(PhoneNumberFormat.INTERNATIONAL),\n isValid: this.isValidNumber\n });\n }\n\n protected countryInput(num: CountryInfo): void {\n this.selectedCountry = num;\n this.updatePlaceholder();\n this.refreshValueAfterCountryChange();\n this.handleChange();\n }\n\n protected openOverlay(): void {\n if (!this.readonly()) {\n this.open = true;\n this.overlayWidth = this.elementRef.nativeElement.getBoundingClientRect().width + 2; // 2px border\n }\n }\n\n protected overlayDetach(): void {\n this.open = false;\n this.phoneInput().nativeElement.focus();\n }\n\n protected valueProvider(country: CountryInfo): string {\n return `${country.name} +${country.countryCode}`;\n }\n\n private writeCountry(): void {\n const currentCountry = this.country()!;\n this.selectedCountry = this.countryList().find(country => country.isoCode === currentCountry);\n if (!this.selectedCountry) {\n const countryCode = this.phoneUtil.getCountryCodeForRegion(\n currentCountry ?? this.defaultCountry() ?? 'XX'\n );\n if (countryCode) {\n this.selectedCountry = {\n isoCode: currentCountry,\n countryCode,\n name: this.getCountryName(currentCountry)\n };\n }\n }\n this.updatePlaceholder();\n this.refreshValueAfterCountryChange();\n }\n\n private getCountryName(countryCode: string): string {\n // This auto translates the given country name to the selected locale language\n return (\n new Intl.DisplayNames([this.translate.currentLanguage], { type: 'region' }).of(\n countryCode.toUpperCase()\n ) ?? ''\n );\n }\n\n private updatePlaceholder(): void {\n if (this.selectedCountry) {\n this.placeholder = this.phoneUtil\n .format(\n this.phoneUtil.getExampleNumber(this.selectedCountry.isoCode),\n PhoneNumberFormat.NATIONAL\n )\n .replace(/^0/, '');\n }\n }\n\n private parseNumber(rawNumber: string | undefined): PhoneNumber | undefined {\n try {\n let regionCodeForParsing: string | undefined;\n if (!rawNumber?.trim().startsWith('+')) {\n regionCodeForParsing = this.selectedCountry?.isoCode;\n }\n return this.phoneUtil.parse(rawNumber, regionCodeForParsing);\n } catch (e) {\n // The Number is too short, we cannot parse it yet. Error can be ignored. Hopefully, the user enters more digits.\n return;\n }\n }\n\n /**\n * PhoneUtil does not resolve country code early enough when the national prefix is shared among other countries (+1 and +44).\n * This Method fakes a complete number to force PhoneUtil returning a proper region code.\n */\n private getRegionCode(): string | undefined {\n if (this.phoneNumber) {\n const regionCode = this.phoneUtil.getRegionCodeForNumber(this.phoneNumber);\n if (regionCode) {\n return regionCode;\n }\n\n const nationalNumber = this.phoneNumber.getNationalNumber() + '';\n if (\n // USA, CANADA, ...\n (this.phoneNumber.getCountryCode() === 1 && nationalNumber.length >= 3) ||\n // UK, ...\n (this.phoneNumber.getCountryCode() === 44 && nationalNumber.length >= 4)\n ) {\n return this.phoneUtil.getRegionCodeForNumber(\n this.phoneUtil.parse(\n '+' +\n this.phoneNumber.getCountryCode() +\n nationalNumber +\n new Array(10 - nationalNumber.length).fill(5).join('')\n )\n );\n }\n\n return this.phoneUtil.getRegionCodeForCountryCode(this.phoneNumber.getCountryCode()!);\n }\n\n return undefined;\n }\n\n private formatPhoneNumber(format: PhoneNumberFormat): string | undefined {\n if (this.phoneNumber) {\n return this.phoneUtil.format(this.phoneNumber, format);\n }\n\n return undefined;\n }\n\n private handleChange(): void {\n if (this.selectedCountry && this.country() !== this.selectedCountry?.isoCode) {\n this.country.set(this.selectedCountry?.isoCode);\n }\n\n if (this.phoneNumber) {\n this.onChange(this.formatPhoneNumber(PhoneNumberFormat.INTERNATIONAL)!);\n } else {\n this.onChange('');\n }\n }\n\n private writeTextToInput(value?: string): void {\n this.phoneInput().nativeElement.value = value ?? '';\n }\n /**\n * Format and update input text or clear input text if the input value is undefined.\n */\n private writeValueToInput(): void {\n if (this.phoneNumber) {\n this.writeTextToInput(this.formatPhoneNumber(PhoneNumberFormat.NATIONAL)!.replace(/^0/, ''));\n }\n }\n\n private refreshValueAfterCountryChange(): void {\n if (this.selectedCountry) {\n this.phoneNumber?.setCountryCode(this.selectedCountry?.countryCode);\n this.writeValueToInput();\n }\n }\n}\n","<div\n class=\"btn-group w-100 d-flex shadow-none border-0\"\n [class.disabled]=\"disabled()\"\n [class.readonly]=\"readonly()\"\n [attr.aria-disabled]=\"disabled()\"\n>\n <button\n #trigger=\"cdkOverlayOrigin\"\n cdkOverlayOrigin\n siPhoneNumberInputSelect\n class=\"dropdown-toggle d-flex align-items-center ms-n4 my-n4 py-2 px-4 border-0\"\n type=\"button\"\n role=\"combobox\"\n aria-haspopup=\"listbox\"\n [disabled]=\"disabled()\"\n [class.readonly]=\"readonly()\"\n [attr.aria-labelledby]=\"id() + '-aria-label ' + id() + '-value'\"\n [attr.aria-expanded]=\"open\"\n [complexOptions]=\"countryList()\"\n [value]=\"selectedCountry\"\n [valueProvider]=\"valueProvider\"\n [tabindex]=\"disabled() ? '-1' : '0'\"\n [attr.aria-controls]=\"id() + '-listbox'\"\n (valueChange)=\"countryInput($event)\"\n (click)=\"openOverlay()\"\n (focus)=\"countryFocused.set(true)\"\n (blur)=\"countryFocused.set(false)\"\n >\n <span class=\"visually-hidden\" [id]=\"id() + '-aria-label'\">{{\n selectCountryAriaLabel() | translate\n }}</span>\n <span\n class=\"fi\"\n aria-hidden=\"true\"\n [ngClass]=\"'fi-' + ((selectedCountry?.isoCode | lowercase) ?? 'xx')\"\n ></span>\n @if (selectedCountry) {\n <span class=\"si-body ms-4\" [id]=\"id() + '-value'\">\n <span class=\"visually-hidden\">{{ selectedCountry.name }}</span>\n +{{ selectedCountry.countryCode }}\n </span>\n }\n <si-icon class=\"icon dropdown-caret\" [icon]=\"icons.elementDown2\" />\n\n <ng-template\n cdkConnectedOverlay\n cdkConnectedOverlayBackdropClass=\"cdk-overlay-transparent-backdrop\"\n [cdkConnectedOverlayHasBackdrop]=\"true\"\n [cdkConnectedOverlayOrigin]=\"trigger\"\n [cdkConnectedOverlayOpen]=\"open\"\n [cdkConnectedOverlayFlexibleDimensions]=\"true\"\n [cdkConnectedOverlayOffsetX]=\"-1\"\n [cdkConnectedOverlayWidth]=\"overlayWidth\"\n (backdropClick)=\"overlayDetach()\"\n (detach)=\"overlayDetach()\"\n >\n <si-select-list-has-filter\n [baseId]=\"id()\"\n [filterPlaceholder]=\"placeholderForSearch()\"\n [noResultsFoundLabel]=\"searchNoResultsFoundLabel()\"\n [optionTemplate]=\"optionTemplate\"\n (closeOverlay)=\"overlayDetach()\"\n />\n </ng-template>\n <ng-template #optionTemplate let-option>\n <span class=\"fi me-5\" [ngClass]=\"'fi-' + (option.value.isoCode | lowercase)\"></span>\n {{ option.value.name }} +{{ option.value.countryCode }}\n </ng-template>\n </button>\n <input\n #phoneInput\n type=\"tel\"\n class=\"ms-4 border-0 p-0 focus-none shadow-none flex-grow-1 phone-number\"\n [attr.aria-label]=\"phoneNumberAriaLabel() | translate\"\n [attr.aria-describedby]=\"errormessageId()\"\n [placeholder]=\"placeholder\"\n [disabled]=\"disabled()\"\n [readonly]=\"readonly()\"\n (input)=\"input()\"\n (blur)=\"blur()\"\n />\n</div>\n","/**\n * Copyright (c) Siemens 2016 - 2025\n * SPDX-License-Identifier: MIT\n */\nimport { NgModule } from '@angular/core';\n\nimport { SiPhoneNumberInputComponent } from './si-phone-number-input.component';\n\n@NgModule({\n imports: [SiPhoneNumberInputComponent],\n exports: [SiPhoneNumberInputComponent]\n})\nexport class SiPhoneNumberInputModule {}\n","/**\n * Copyright (c) Siemens 2016 - 2025\n * SPDX-License-Identifier: MIT\n */\nexport * from './si-phone-number-input.module';\nexport * from './si-phone-number-input.component';\nexport * from './si-phone-number-input.models';\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
|
|
@@ -23,7 +23,7 @@ class SiSummaryChipComponent {
|
|
|
23
23
|
/** The label. */
|
|
24
24
|
label = input.required();
|
|
25
25
|
/** Value to display. */
|
|
26
|
-
value = input
|
|
26
|
+
value = input();
|
|
27
27
|
/**
|
|
28
28
|
* Selected state, will change when clicked.
|
|
29
29
|
* @defaultValue false
|
|
@@ -35,7 +35,7 @@ class SiSummaryChipComponent {
|
|
|
35
35
|
*/
|
|
36
36
|
disabled = input(false, { transform: booleanAttribute });
|
|
37
37
|
/**
|
|
38
|
-
* Whether to hide the label. The label will still be used for screen-readers.
|
|
38
|
+
* Whether to hide the label. Only takes effect when both {@link icon} and {@link value} are provided. The label will still be used for screen-readers.
|
|
39
39
|
* @defaultValue false
|
|
40
40
|
*/
|
|
41
41
|
hideLabel = input(false, { transform: booleanAttribute });
|
|
@@ -56,11 +56,11 @@ class SiSummaryChipComponent {
|
|
|
56
56
|
}
|
|
57
57
|
}
|
|
58
58
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SiSummaryChipComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
59
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", type: SiSummaryChipComponent, isStandalone: true, selector: "si-summary-chip", inputs: { status: { classPropertyName: "status", publicName: "status", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, stackedIcon: { classPropertyName: "stackedIcon", publicName: "stackedIcon", isSignal: true, isRequired: false, transformFunction: null }, stackedColor: { classPropertyName: "stackedColor", publicName: "stackedColor", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired:
|
|
59
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", type: SiSummaryChipComponent, isStandalone: true, selector: "si-summary-chip", inputs: { status: { classPropertyName: "status", publicName: "status", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, stackedIcon: { classPropertyName: "stackedIcon", publicName: "stackedIcon", isSignal: true, isRequired: false, transformFunction: null }, stackedColor: { classPropertyName: "stackedColor", publicName: "stackedColor", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, hideLabel: { classPropertyName: "hideLabel", publicName: "hideLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selected: "selectedChange" }, ngImport: i0, template: "<div\n class=\"chip\"\n role=\"checkbox\"\n [attr.tabindex]=\"disabled() ? '' : '0'\"\n [attr.aria-disabled]=\"disabled()\"\n [attr.aria-checked]=\"selected()\"\n [class.selected]=\"selected()\"\n [class.disabled]=\"disabled()\"\n (click)=\"toggleSelected()\"\n (keydown.enter)=\"toggleSelected()\"\n>\n @let actualIcon = statusIcon();\n @if (actualIcon.icon) {\n <span class=\"icon icon-stack my-n2 ms-n2\">\n <si-icon [ngClass]=\"actualIcon.color\" [icon]=\"actualIcon.icon\" />\n @if (actualIcon.stacked) {\n <si-icon [ngClass]=\"actualIcon.stackedColor\" [icon]=\"actualIcon.stacked\" />\n }\n </span>\n }\n @let value = this.value();\n <div class=\"si-body\" [class.visually-hidden]=\"hideLabel() && value && actualIcon.icon\">\n {{ label() | translate }}\n </div>\n @if (value) {\n <div class=\"si-h5\">{{ value | translate }}</div>\n }\n</div>\n", styles: [".chip{display:inline-flex;align-items:center;border:1px solid var(--element-ui-3);border-radius:16px;padding-block:7px;padding-inline:8px;gap:4px}.chip:not(.disabled){cursor:pointer}.chip:not(.disabled):not(.selected):hover{background:var(--element-base-1-hover)}.selected{background:var(--element-base-1-selected)}.disabled{opacity:var(--element-action-disabled-opacity)}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: SiIconComponent, selector: "si-icon", inputs: ["icon"] }, { kind: "pipe", type: SiTranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
60
60
|
}
|
|
61
61
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SiSummaryChipComponent, decorators: [{
|
|
62
62
|
type: Component,
|
|
63
|
-
args: [{ selector: 'si-summary-chip', imports: [NgClass, SiIconComponent, SiTranslatePipe], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n class=\"chip\"\n role=\"checkbox\"\n [attr.tabindex]=\"disabled() ? '' : '0'\"\n [attr.aria-disabled]=\"disabled()\"\n [attr.aria-checked]=\"selected()\"\n [class.selected]=\"selected()\"\n [class.disabled]=\"disabled()\"\n (click)=\"toggleSelected()\"\n (keydown.enter)=\"toggleSelected()\"\n>\n @let actualIcon = statusIcon();\n @if (actualIcon.icon) {\n <span class=\"icon icon-stack my-n2 ms-n2\">\n <si-icon [ngClass]=\"actualIcon.color\" [icon]=\"actualIcon.icon\" />\n @if (actualIcon.stacked) {\n <si-icon [ngClass]=\"actualIcon.stackedColor\" [icon]=\"actualIcon.stacked\" />\n }\n </span>\n }\n <div class=\"si-body\" [class.visually-hidden]=\"hideLabel()\">\n {{ label() | translate }}\n </div>\n <div class=\"si-h5\">{{ value
|
|
63
|
+
args: [{ selector: 'si-summary-chip', imports: [NgClass, SiIconComponent, SiTranslatePipe], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n class=\"chip\"\n role=\"checkbox\"\n [attr.tabindex]=\"disabled() ? '' : '0'\"\n [attr.aria-disabled]=\"disabled()\"\n [attr.aria-checked]=\"selected()\"\n [class.selected]=\"selected()\"\n [class.disabled]=\"disabled()\"\n (click)=\"toggleSelected()\"\n (keydown.enter)=\"toggleSelected()\"\n>\n @let actualIcon = statusIcon();\n @if (actualIcon.icon) {\n <span class=\"icon icon-stack my-n2 ms-n2\">\n <si-icon [ngClass]=\"actualIcon.color\" [icon]=\"actualIcon.icon\" />\n @if (actualIcon.stacked) {\n <si-icon [ngClass]=\"actualIcon.stackedColor\" [icon]=\"actualIcon.stacked\" />\n }\n </span>\n }\n @let value = this.value();\n <div class=\"si-body\" [class.visually-hidden]=\"hideLabel() && value && actualIcon.icon\">\n {{ label() | translate }}\n </div>\n @if (value) {\n <div class=\"si-h5\">{{ value | translate }}</div>\n }\n</div>\n", styles: [".chip{display:inline-flex;align-items:center;border:1px solid var(--element-ui-3);border-radius:16px;padding-block:7px;padding-inline:8px;gap:4px}.chip:not(.disabled){cursor:pointer}.chip:not(.disabled):not(.selected):hover{background:var(--element-base-1-hover)}.selected{background:var(--element-base-1-selected)}.disabled{opacity:var(--element-action-disabled-opacity)}\n"] }]
|
|
64
64
|
}] });
|
|
65
65
|
|
|
66
66
|
/**
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"siemens-element-ng-summary-chip.mjs","sources":["../../../../projects/element-ng/summary-chip/si-summary-chip.component.ts","../../../../projects/element-ng/summary-chip/si-summary-chip.component.html","../../../../projects/element-ng/summary-chip/index.ts","../../../../projects/element-ng/summary-chip/siemens-element-ng-summary-chip.ts"],"sourcesContent":["/**\n * Copyright (c) Siemens 2016 - 2025\n * SPDX-License-Identifier: MIT\n */\nimport { NgClass } from '@angular/common';\nimport {\n booleanAttribute,\n ChangeDetectionStrategy,\n Component,\n computed,\n inject,\n input,\n model\n} from '@angular/core';\nimport { ExtendedStatusType } from '@siemens/element-ng/common';\nimport { SiIconComponent, STATUS_ICON_CONFIG } from '@siemens/element-ng/icon';\nimport { SiTranslatePipe, TranslatableString } from '@siemens/element-translate-ng/translate';\n\n@Component({\n selector: 'si-summary-chip',\n imports: [NgClass, SiIconComponent, SiTranslatePipe],\n templateUrl: './si-summary-chip.component.html',\n styleUrl: './si-summary-chip.component.scss',\n changeDetection: ChangeDetectionStrategy.OnPush\n})\nexport class SiSummaryChipComponent {\n private readonly statusIcons = inject(STATUS_ICON_CONFIG);\n /** Status. Alternatively, use {@link icon} and {@link color}. */\n readonly status = input<ExtendedStatusType>();\n /** Icon token, see {@link https://element.siemens.io/icons/element}. */\n readonly icon = input<string>();\n /** Color class, see {@link https://element.siemens.io/typography/#color-variants-classes}. */\n readonly color = input<string>();\n /** Icon token, see {@link https://element.siemens.io/fundamentals/icons/}. */\n readonly stackedIcon = input<string>();\n /** Color class, see {@link https://element.siemens.io/fundamentals/icons/}. */\n readonly stackedColor = input<string>();\n /** The label. */\n readonly label = input.required<TranslatableString>();\n /** Value to display. */\n readonly value = input
|
|
1
|
+
{"version":3,"file":"siemens-element-ng-summary-chip.mjs","sources":["../../../../projects/element-ng/summary-chip/si-summary-chip.component.ts","../../../../projects/element-ng/summary-chip/si-summary-chip.component.html","../../../../projects/element-ng/summary-chip/index.ts","../../../../projects/element-ng/summary-chip/siemens-element-ng-summary-chip.ts"],"sourcesContent":["/**\n * Copyright (c) Siemens 2016 - 2025\n * SPDX-License-Identifier: MIT\n */\nimport { NgClass } from '@angular/common';\nimport {\n booleanAttribute,\n ChangeDetectionStrategy,\n Component,\n computed,\n inject,\n input,\n model\n} from '@angular/core';\nimport { ExtendedStatusType } from '@siemens/element-ng/common';\nimport { SiIconComponent, STATUS_ICON_CONFIG } from '@siemens/element-ng/icon';\nimport { SiTranslatePipe, TranslatableString } from '@siemens/element-translate-ng/translate';\n\n@Component({\n selector: 'si-summary-chip',\n imports: [NgClass, SiIconComponent, SiTranslatePipe],\n templateUrl: './si-summary-chip.component.html',\n styleUrl: './si-summary-chip.component.scss',\n changeDetection: ChangeDetectionStrategy.OnPush\n})\nexport class SiSummaryChipComponent {\n private readonly statusIcons = inject(STATUS_ICON_CONFIG);\n /** Status. Alternatively, use {@link icon} and {@link color}. */\n readonly status = input<ExtendedStatusType>();\n /** Icon token, see {@link https://element.siemens.io/icons/element}. */\n readonly icon = input<string>();\n /** Color class, see {@link https://element.siemens.io/typography/#color-variants-classes}. */\n readonly color = input<string>();\n /** Icon token, see {@link https://element.siemens.io/fundamentals/icons/}. */\n readonly stackedIcon = input<string>();\n /** Color class, see {@link https://element.siemens.io/fundamentals/icons/}. */\n readonly stackedColor = input<string>();\n /** The label. */\n readonly label = input.required<TranslatableString>();\n /** Value to display. */\n readonly value = input<TranslatableString>();\n /**\n * Selected state, will change when clicked.\n * @defaultValue false\n */\n readonly selected = model(false);\n /**\n * Disabled state.\n * @defaultValue false\n */\n readonly disabled = input(false, { transform: booleanAttribute });\n /**\n * Whether to hide the label. Only takes effect when both {@link icon} and {@link value} are provided. The label will still be used for screen-readers.\n * @defaultValue false\n */\n readonly hideLabel = input(false, { transform: booleanAttribute });\n\n protected readonly statusIcon = computed(() => {\n const status = this.status();\n return status\n ? this.statusIcons[status]\n : {\n icon: this.icon(),\n color: this.color(),\n stacked: this.stackedIcon(),\n stackedColor: this.stackedColor()\n };\n });\n\n protected toggleSelected(): void {\n if (!this.disabled()) {\n this.selected.set(!this.selected());\n }\n }\n}\n","<div\n class=\"chip\"\n role=\"checkbox\"\n [attr.tabindex]=\"disabled() ? '' : '0'\"\n [attr.aria-disabled]=\"disabled()\"\n [attr.aria-checked]=\"selected()\"\n [class.selected]=\"selected()\"\n [class.disabled]=\"disabled()\"\n (click)=\"toggleSelected()\"\n (keydown.enter)=\"toggleSelected()\"\n>\n @let actualIcon = statusIcon();\n @if (actualIcon.icon) {\n <span class=\"icon icon-stack my-n2 ms-n2\">\n <si-icon [ngClass]=\"actualIcon.color\" [icon]=\"actualIcon.icon\" />\n @if (actualIcon.stacked) {\n <si-icon [ngClass]=\"actualIcon.stackedColor\" [icon]=\"actualIcon.stacked\" />\n }\n </span>\n }\n @let value = this.value();\n <div class=\"si-body\" [class.visually-hidden]=\"hideLabel() && value && actualIcon.icon\">\n {{ label() | translate }}\n </div>\n @if (value) {\n <div class=\"si-h5\">{{ value | translate }}</div>\n }\n</div>\n","/**\n * Copyright (c) Siemens 2016 - 2025\n * SPDX-License-Identifier: MIT\n */\nexport * from './si-summary-chip.component';\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;;;AAAA;;;AAGG;MAsBU,sBAAsB,CAAA;AAChB,IAAA,WAAW,GAAG,MAAM,CAAC,kBAAkB,CAAC;;IAEhD,MAAM,GAAG,KAAK,EAAsB;;IAEpC,IAAI,GAAG,KAAK,EAAU;;IAEtB,KAAK,GAAG,KAAK,EAAU;;IAEvB,WAAW,GAAG,KAAK,EAAU;;IAE7B,YAAY,GAAG,KAAK,EAAU;;AAE9B,IAAA,KAAK,GAAG,KAAK,CAAC,QAAQ,EAAsB;;IAE5C,KAAK,GAAG,KAAK,EAAsB;AAC5C;;;AAGG;AACM,IAAA,QAAQ,GAAG,KAAK,CAAC,KAAK,CAAC;AAChC;;;AAGG;IACM,QAAQ,GAAG,KAAK,CAAC,KAAK,EAAE,EAAE,SAAS,EAAE,gBAAgB,EAAE,CAAC;AACjE;;;AAGG;IACM,SAAS,GAAG,KAAK,CAAC,KAAK,EAAE,EAAE,SAAS,EAAE,gBAAgB,EAAE,CAAC;AAE/C,IAAA,UAAU,GAAG,QAAQ,CAAC,MAAK;AAC5C,QAAA,MAAM,MAAM,GAAG,IAAI,CAAC,MAAM,EAAE;AAC5B,QAAA,OAAO;AACL,cAAE,IAAI,CAAC,WAAW,CAAC,MAAM;AACzB,cAAE;AACE,gBAAA,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE;AACjB,gBAAA,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE;AACnB,gBAAA,OAAO,EAAE,IAAI,CAAC,WAAW,EAAE;AAC3B,gBAAA,YAAY,EAAE,IAAI,CAAC,YAAY;aAChC;AACP,KAAC,CAAC;IAEQ,cAAc,GAAA;AACtB,QAAA,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE,EAAE;YACpB,IAAI,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC,IAAI,CAAC,QAAQ,EAAE,CAAC;;;uGA9C5B,sBAAsB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAAtB,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,sBAAsB,o3CCzBnC,y4BA4BA,EAAA,MAAA,EAAA,CAAA,wXAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EDRY,OAAO,EAAA,QAAA,EAAA,WAAA,EAAA,MAAA,EAAA,CAAA,OAAA,EAAA,SAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAE,eAAe,iEAAE,eAAe,EAAA,IAAA,EAAA,WAAA,EAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA;;2FAKxC,sBAAsB,EAAA,UAAA,EAAA,CAAA;kBAPlC,SAAS;+BACE,iBAAiB,EAAA,OAAA,EAClB,CAAC,OAAO,EAAE,eAAe,EAAE,eAAe,CAAC,EAAA,eAAA,EAGnC,uBAAuB,CAAC,MAAM,EAAA,QAAA,EAAA,y4BAAA,EAAA,MAAA,EAAA,CAAA,wXAAA,CAAA,EAAA;;;AEvBjD;;;AAGG;;ACHH;;AAEG;;;;"}
|
|
@@ -72,10 +72,15 @@ class SiTypeaheadComponent {
|
|
|
72
72
|
}
|
|
73
73
|
// Gets called when a match is selected by clicking on it.
|
|
74
74
|
selectMatch(match) {
|
|
75
|
-
|
|
75
|
+
if (match) {
|
|
76
|
+
this.parent.selectMatch(match);
|
|
77
|
+
}
|
|
78
|
+
else {
|
|
79
|
+
this.parent.createOption();
|
|
80
|
+
}
|
|
76
81
|
}
|
|
77
82
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SiTypeaheadComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
78
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", type: SiTypeaheadComponent, isStandalone: true, selector: "si-typeahead", host: { listeners: { "mousedown": "onMouseDown($event)" }, classAttribute: "w-100" }, viewQueries: [{ propertyName: "typeaheadElement", first: true, predicate: ["typeahead"], descendants: true, read: ElementRef, isSignal: true }], ngImport: i0, template: "<!-- Template to be used for every match, can be replaced using an input. -->\n<ng-template #defaultItemTemplate let-match=\"match\" siTypeaheadItemTemplate>\n @if (multiselect()) {\n <div class=\"d-flex pe-4\" aria-hidden=\"true\">\n <span class=\"form-check-input si-form-checkbox\" [class.checked]=\"match.itemSelected\"></span>\n </div>\n }\n @if (match.iconClass) {\n <si-icon class=\"icon me-2\" [icon]=\"match.iconClass\" />\n }\n @for (segment of match.result; track $index) {\n <span [class.typeahead-match-segment-matching]=\"segment.isMatching\">{{ segment.text }}</span>\n }\n</ng-template>\n\n<!-- Only display the component if there are any matches and set the CSS transform to properly position the typeahead -->\n<ul\n #typeahead\n class=\"typeahead dropdown-menu\"\n [siAutocompleteListboxFor]=\"autocompleteDirective\"\n [siAutocompleteDefaultIndex]=\"parent.typeaheadAutoSelectIndex()\"\n [attr.aria-label]=\"parent.typeaheadAutocompleteListLabel() | translate\"\n
|
|
83
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", type: SiTypeaheadComponent, isStandalone: true, selector: "si-typeahead", host: { listeners: { "mousedown": "onMouseDown($event)" }, classAttribute: "w-100" }, viewQueries: [{ propertyName: "typeaheadElement", first: true, predicate: ["typeahead"], descendants: true, read: ElementRef, isSignal: true }], ngImport: i0, template: "<!-- Template to be used for every match, can be replaced using an input. -->\n<ng-template #defaultItemTemplate let-match=\"match\" siTypeaheadItemTemplate>\n @if (multiselect()) {\n <div class=\"d-flex pe-4\" aria-hidden=\"true\">\n <span class=\"form-check-input si-form-checkbox\" [class.checked]=\"match.itemSelected\"></span>\n </div>\n }\n @if (match.iconClass) {\n <si-icon class=\"icon me-2\" [icon]=\"match.iconClass\" />\n }\n @for (segment of match.result; track $index) {\n <span [class.typeahead-match-segment-matching]=\"segment.isMatching\">{{ segment.text }}</span>\n }\n</ng-template>\n\n@let createOption = parent.typeaheadCreateOption();\n\n<!-- Only display the component if there are any matches and set the CSS transform to properly position the typeahead -->\n<ul\n #typeahead\n class=\"typeahead dropdown-menu\"\n [siAutocompleteListboxFor]=\"autocompleteDirective\"\n [siAutocompleteDefaultIndex]=\"parent.typeaheadAutoSelectIndex()\"\n [attr.aria-label]=\"parent.typeaheadAutocompleteListLabel() | translate\"\n (siAutocompleteOptionSubmitted)=\"selectMatch($event)\"\n>\n <!-- Loop through every match and bind events, the mousedown prevent default is to prevent the host from losing focus on click -->\n @for (match of matches(); track $index) {\n <li\n #typeaheadMatch\n class=\"dropdown-item\"\n [siAutocompleteOption]=\"match\"\n [attr.aria-label]=\"match.text\"\n [attr.aria-selected]=\"multiselect() ? match.itemSelected : null\"\n (click)=\"$event.stopPropagation()\"\n (mousedown)=\"$event.preventDefault()\"\n >\n <!-- Display either a template set as the input or the template above -->\n <ng-template\n [ngTemplateOutlet]=\"parent.typeaheadItemTemplate() || defaultItemTemplate\"\n [ngTemplateOutletContext]=\"{\n item: match.option,\n index: $index,\n match: match,\n query: parent.query()\n }\"\n />\n </li>\n }\n @if (createOption && parent.query().length) {\n <li class=\"dropdown-item\" [siAutocompleteOption]=\"undefined\">\n {{ createOption | translate: { query: parent.query() } }}\n </li>\n }\n</ul>\n", styles: [".dropdown-menu{display:block;position:relative;inset-block-start:0;inset-inline-start:0;margin-block-start:1px;overflow-y:auto;overflow-x:hidden;max-block-size:100%}.typeahead-match-segment-matching{font-weight:600}.dropdown-item *{flex-shrink:0}.dropdown-item span{white-space:pre-wrap}\n"], dependencies: [{ kind: "directive", type: SiAutocompleteListboxDirective, selector: "[siAutocompleteListboxFor]", inputs: ["id", "siAutocompleteListboxFor", "siAutocompleteDefaultIndex"], outputs: ["siAutocompleteOptionSubmitted"], exportAs: ["siAutocompleteListbox"] }, { kind: "directive", type: SiAutocompleteOptionDirective, selector: "[siAutocompleteOption]", inputs: ["id", "disabled", "siAutocompleteOption"], exportAs: ["siAutocompleteOption"] }, { kind: "component", type: SiIconComponent, selector: "si-icon", inputs: ["icon"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: SiTranslatePipe, name: "translate" }, { kind: "directive", type: SiTypeaheadItemTemplateDirective, selector: "[siTypeaheadItemTemplate]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
79
84
|
}
|
|
80
85
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SiTypeaheadComponent, decorators: [{
|
|
81
86
|
type: Component,
|
|
@@ -86,7 +91,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImpor
|
|
|
86
91
|
NgTemplateOutlet,
|
|
87
92
|
SiTranslatePipe,
|
|
88
93
|
SiTypeaheadItemTemplateDirective
|
|
89
|
-
], changeDetection: ChangeDetectionStrategy.OnPush, host: { class: 'w-100' }, template: "<!-- Template to be used for every match, can be replaced using an input. -->\n<ng-template #defaultItemTemplate let-match=\"match\" siTypeaheadItemTemplate>\n @if (multiselect()) {\n <div class=\"d-flex pe-4\" aria-hidden=\"true\">\n <span class=\"form-check-input si-form-checkbox\" [class.checked]=\"match.itemSelected\"></span>\n </div>\n }\n @if (match.iconClass) {\n <si-icon class=\"icon me-2\" [icon]=\"match.iconClass\" />\n }\n @for (segment of match.result; track $index) {\n <span [class.typeahead-match-segment-matching]=\"segment.isMatching\">{{ segment.text }}</span>\n }\n</ng-template>\n\n<!-- Only display the component if there are any matches and set the CSS transform to properly position the typeahead -->\n<ul\n #typeahead\n class=\"typeahead dropdown-menu\"\n [siAutocompleteListboxFor]=\"autocompleteDirective\"\n [siAutocompleteDefaultIndex]=\"parent.typeaheadAutoSelectIndex()\"\n [attr.aria-label]=\"parent.typeaheadAutocompleteListLabel() | translate\"\n
|
|
94
|
+
], changeDetection: ChangeDetectionStrategy.OnPush, host: { class: 'w-100' }, template: "<!-- Template to be used for every match, can be replaced using an input. -->\n<ng-template #defaultItemTemplate let-match=\"match\" siTypeaheadItemTemplate>\n @if (multiselect()) {\n <div class=\"d-flex pe-4\" aria-hidden=\"true\">\n <span class=\"form-check-input si-form-checkbox\" [class.checked]=\"match.itemSelected\"></span>\n </div>\n }\n @if (match.iconClass) {\n <si-icon class=\"icon me-2\" [icon]=\"match.iconClass\" />\n }\n @for (segment of match.result; track $index) {\n <span [class.typeahead-match-segment-matching]=\"segment.isMatching\">{{ segment.text }}</span>\n }\n</ng-template>\n\n@let createOption = parent.typeaheadCreateOption();\n\n<!-- Only display the component if there are any matches and set the CSS transform to properly position the typeahead -->\n<ul\n #typeahead\n class=\"typeahead dropdown-menu\"\n [siAutocompleteListboxFor]=\"autocompleteDirective\"\n [siAutocompleteDefaultIndex]=\"parent.typeaheadAutoSelectIndex()\"\n [attr.aria-label]=\"parent.typeaheadAutocompleteListLabel() | translate\"\n (siAutocompleteOptionSubmitted)=\"selectMatch($event)\"\n>\n <!-- Loop through every match and bind events, the mousedown prevent default is to prevent the host from losing focus on click -->\n @for (match of matches(); track $index) {\n <li\n #typeaheadMatch\n class=\"dropdown-item\"\n [siAutocompleteOption]=\"match\"\n [attr.aria-label]=\"match.text\"\n [attr.aria-selected]=\"multiselect() ? match.itemSelected : null\"\n (click)=\"$event.stopPropagation()\"\n (mousedown)=\"$event.preventDefault()\"\n >\n <!-- Display either a template set as the input or the template above -->\n <ng-template\n [ngTemplateOutlet]=\"parent.typeaheadItemTemplate() || defaultItemTemplate\"\n [ngTemplateOutletContext]=\"{\n item: match.option,\n index: $index,\n match: match,\n query: parent.query()\n }\"\n />\n </li>\n }\n @if (createOption && parent.query().length) {\n <li class=\"dropdown-item\" [siAutocompleteOption]=\"undefined\">\n {{ createOption | translate: { query: parent.query() } }}\n </li>\n }\n</ul>\n", styles: [".dropdown-menu{display:block;position:relative;inset-block-start:0;inset-inline-start:0;margin-block-start:1px;overflow-y:auto;overflow-x:hidden;max-block-size:100%}.typeahead-match-segment-matching{font-weight:600}.dropdown-item *{flex-shrink:0}.dropdown-item span{white-space:pre-wrap}\n"] }]
|
|
90
95
|
}], propDecorators: { onMouseDown: [{
|
|
91
96
|
type: HostListener,
|
|
92
97
|
args: ['mousedown', ['$event']]
|
|
@@ -480,6 +485,15 @@ class SiTypeaheadDirective {
|
|
|
480
485
|
* @defaultValue false
|
|
481
486
|
*/
|
|
482
487
|
typeaheadFullWidth = input(false, { transform: booleanAttribute });
|
|
488
|
+
/**
|
|
489
|
+
* This option will be shown at the end of the typeahead.
|
|
490
|
+
* Use it to allow users to create new options on the fly.
|
|
491
|
+
*
|
|
492
|
+
* Use the `{{ query }}` parameter in translation values to include the current text from the input.
|
|
493
|
+
*
|
|
494
|
+
* @experimental
|
|
495
|
+
*/
|
|
496
|
+
typeaheadCreateOption = input();
|
|
483
497
|
/**
|
|
484
498
|
* Emits an Event when the input field is changed.
|
|
485
499
|
*/
|
|
@@ -497,6 +511,13 @@ class SiTypeaheadDirective {
|
|
|
497
511
|
typeaheadOnFullMatch = output();
|
|
498
512
|
/** Emits whenever the typeahead overlay is opened or closed. */
|
|
499
513
|
typeaheadOpenChange = output();
|
|
514
|
+
/**
|
|
515
|
+
* Emits when the create option is selected.
|
|
516
|
+
* It will emit the current search query.
|
|
517
|
+
*
|
|
518
|
+
* @experimental
|
|
519
|
+
*/
|
|
520
|
+
typeaheadOnCreateOption = output();
|
|
500
521
|
/** @internal */
|
|
501
522
|
foundMatches = computed(() => this.typeaheadProcess() ? this.processedSearch() : this.unprocessedSearch());
|
|
502
523
|
/** @internal */
|
|
@@ -579,15 +600,17 @@ class SiTypeaheadDirective {
|
|
|
579
600
|
constructor() {
|
|
580
601
|
effect(() => {
|
|
581
602
|
// The value needs to fulfil the minimum length requirement set.
|
|
582
|
-
|
|
583
|
-
|
|
603
|
+
const matches = this.foundMatches();
|
|
604
|
+
if (this.canBeOpen() &&
|
|
605
|
+
this.query().length >= this.typeaheadMinLength() &&
|
|
606
|
+
(matches.length || (this.typeaheadCreateOption() && this.query().length))) {
|
|
584
607
|
const escapedQuery = this.escapeRegex(this.query());
|
|
585
608
|
const equalsExp = new RegExp(`^${escapedQuery}$`, 'i');
|
|
586
609
|
const fullMatches = matches.filter(match => match.result.length === 1 && equalsExp.test(match.text));
|
|
587
610
|
if (fullMatches.length > 0) {
|
|
588
611
|
this.typeaheadOnFullMatch.emit(fullMatches[0]);
|
|
589
612
|
}
|
|
590
|
-
if (matches.length) {
|
|
613
|
+
if (matches.length || this.typeaheadCreateOption()) {
|
|
591
614
|
this.loadComponent();
|
|
592
615
|
}
|
|
593
616
|
else {
|
|
@@ -706,6 +729,17 @@ class SiTypeaheadDirective {
|
|
|
706
729
|
getOptionField(option, field) {
|
|
707
730
|
return typeof option !== 'object' ? undefined : option[field];
|
|
708
731
|
}
|
|
732
|
+
/** @internal */
|
|
733
|
+
createOption() {
|
|
734
|
+
this.typeaheadOnCreateOption.emit(this.query());
|
|
735
|
+
this.clearTimer();
|
|
736
|
+
if (!this.typeaheadMultiSelect() && this.typeaheadClearValueOnSelect()) {
|
|
737
|
+
const inputElement = this.elementRef.nativeElement.querySelector('input') ?? this.elementRef.nativeElement;
|
|
738
|
+
inputElement.value = '';
|
|
739
|
+
inputElement.dispatchEvent(new Event('input'));
|
|
740
|
+
}
|
|
741
|
+
this.canBeOpen.set(false);
|
|
742
|
+
}
|
|
709
743
|
// Select a match, either gets called due to a enter keypress or from the component due to a click.
|
|
710
744
|
/** @internal */
|
|
711
745
|
selectMatch(match) {
|
|
@@ -741,7 +775,7 @@ class SiTypeaheadDirective {
|
|
|
741
775
|
return query.replace(/[|\\{}()[\]^$+*?.]/g, '\\$&');
|
|
742
776
|
}
|
|
743
777
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SiTypeaheadDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
744
|
-
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.0.6", type: SiTypeaheadDirective, isStandalone: true, selector: "[siTypeahead]", inputs: { siTypeahead: { classPropertyName: "siTypeahead", publicName: "siTypeahead", isSignal: true, isRequired: true, transformFunction: null }, typeaheadProcess: { classPropertyName: "typeaheadProcess", publicName: "typeaheadProcess", isSignal: true, isRequired: false, transformFunction: null }, typeaheadScrollable: { classPropertyName: "typeaheadScrollable", publicName: "typeaheadScrollable", isSignal: true, isRequired: false, transformFunction: null }, typeaheadOptionsInScrollableView: { classPropertyName: "typeaheadOptionsInScrollableView", publicName: "typeaheadOptionsInScrollableView", isSignal: true, isRequired: false, transformFunction: null }, typeaheadOptionsLimit: { classPropertyName: "typeaheadOptionsLimit", publicName: "typeaheadOptionsLimit", isSignal: true, isRequired: false, transformFunction: null }, typeaheadScrollableAdditionalHeight: { classPropertyName: "typeaheadScrollableAdditionalHeight", publicName: "typeaheadScrollableAdditionalHeight", isSignal: true, isRequired: false, transformFunction: null }, typeaheadAutoSelectIndex: { classPropertyName: "typeaheadAutoSelectIndex", publicName: "typeaheadAutoSelectIndex", isSignal: true, isRequired: false, transformFunction: null }, typeaheadCloseOnEsc: { classPropertyName: "typeaheadCloseOnEsc", publicName: "typeaheadCloseOnEsc", isSignal: true, isRequired: false, transformFunction: null }, typeaheadClearValueOnSelect: { classPropertyName: "typeaheadClearValueOnSelect", publicName: "typeaheadClearValueOnSelect", isSignal: true, isRequired: false, transformFunction: null }, typeaheadWaitMs: { classPropertyName: "typeaheadWaitMs", publicName: "typeaheadWaitMs", isSignal: true, isRequired: false, transformFunction: null }, typeaheadMinLength: { classPropertyName: "typeaheadMinLength", publicName: "typeaheadMinLength", isSignal: true, isRequired: false, transformFunction: null }, typeaheadOptionField: { classPropertyName: "typeaheadOptionField", publicName: "typeaheadOptionField", isSignal: true, isRequired: false, transformFunction: null }, typeaheadMultiSelect: { classPropertyName: "typeaheadMultiSelect", publicName: "typeaheadMultiSelect", isSignal: true, isRequired: false, transformFunction: null }, typeaheadTokenize: { classPropertyName: "typeaheadTokenize", publicName: "typeaheadTokenize", isSignal: true, isRequired: false, transformFunction: null }, typeaheadMatchAllTokens: { classPropertyName: "typeaheadMatchAllTokens", publicName: "typeaheadMatchAllTokens", isSignal: true, isRequired: false, transformFunction: null }, typeaheadItemTemplate: { classPropertyName: "typeaheadItemTemplate", publicName: "typeaheadItemTemplate", isSignal: true, isRequired: false, transformFunction: null }, typeaheadSkipSortingMatches: { classPropertyName: "typeaheadSkipSortingMatches", publicName: "typeaheadSkipSortingMatches", isSignal: true, isRequired: false, transformFunction: null }, typeaheadAutocompleteListLabel: { classPropertyName: "typeaheadAutocompleteListLabel", publicName: "typeaheadAutocompleteListLabel", isSignal: true, isRequired: false, transformFunction: null }, typeaheadFullWidth: { classPropertyName: "typeaheadFullWidth", publicName: "typeaheadFullWidth", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { typeaheadOnInput: "typeaheadOnInput", typeaheadOnSelect: "typeaheadOnSelect", typeaheadOnFullMatch: "typeaheadOnFullMatch", typeaheadOpenChange: "typeaheadOpenChange" }, host: { listeners: { "focusout": "onBlur()", "focusin": "onInput($event)", "input": "onInput($event)", "keydown.escape": "onKeydownEscape()", "keydown.space": "onKeydownSpace($event)" }, classAttribute: "si-typeahead" }, exportAs: ["si-typeahead"], usesOnChanges: true, hostDirectives: [{ directive: i1.SiAutocompleteDirective }], ngImport: i0 });
|
|
778
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.0.6", type: SiTypeaheadDirective, isStandalone: true, selector: "[siTypeahead]", inputs: { siTypeahead: { classPropertyName: "siTypeahead", publicName: "siTypeahead", isSignal: true, isRequired: true, transformFunction: null }, typeaheadProcess: { classPropertyName: "typeaheadProcess", publicName: "typeaheadProcess", isSignal: true, isRequired: false, transformFunction: null }, typeaheadScrollable: { classPropertyName: "typeaheadScrollable", publicName: "typeaheadScrollable", isSignal: true, isRequired: false, transformFunction: null }, typeaheadOptionsInScrollableView: { classPropertyName: "typeaheadOptionsInScrollableView", publicName: "typeaheadOptionsInScrollableView", isSignal: true, isRequired: false, transformFunction: null }, typeaheadOptionsLimit: { classPropertyName: "typeaheadOptionsLimit", publicName: "typeaheadOptionsLimit", isSignal: true, isRequired: false, transformFunction: null }, typeaheadScrollableAdditionalHeight: { classPropertyName: "typeaheadScrollableAdditionalHeight", publicName: "typeaheadScrollableAdditionalHeight", isSignal: true, isRequired: false, transformFunction: null }, typeaheadAutoSelectIndex: { classPropertyName: "typeaheadAutoSelectIndex", publicName: "typeaheadAutoSelectIndex", isSignal: true, isRequired: false, transformFunction: null }, typeaheadCloseOnEsc: { classPropertyName: "typeaheadCloseOnEsc", publicName: "typeaheadCloseOnEsc", isSignal: true, isRequired: false, transformFunction: null }, typeaheadClearValueOnSelect: { classPropertyName: "typeaheadClearValueOnSelect", publicName: "typeaheadClearValueOnSelect", isSignal: true, isRequired: false, transformFunction: null }, typeaheadWaitMs: { classPropertyName: "typeaheadWaitMs", publicName: "typeaheadWaitMs", isSignal: true, isRequired: false, transformFunction: null }, typeaheadMinLength: { classPropertyName: "typeaheadMinLength", publicName: "typeaheadMinLength", isSignal: true, isRequired: false, transformFunction: null }, typeaheadOptionField: { classPropertyName: "typeaheadOptionField", publicName: "typeaheadOptionField", isSignal: true, isRequired: false, transformFunction: null }, typeaheadMultiSelect: { classPropertyName: "typeaheadMultiSelect", publicName: "typeaheadMultiSelect", isSignal: true, isRequired: false, transformFunction: null }, typeaheadTokenize: { classPropertyName: "typeaheadTokenize", publicName: "typeaheadTokenize", isSignal: true, isRequired: false, transformFunction: null }, typeaheadMatchAllTokens: { classPropertyName: "typeaheadMatchAllTokens", publicName: "typeaheadMatchAllTokens", isSignal: true, isRequired: false, transformFunction: null }, typeaheadItemTemplate: { classPropertyName: "typeaheadItemTemplate", publicName: "typeaheadItemTemplate", isSignal: true, isRequired: false, transformFunction: null }, typeaheadSkipSortingMatches: { classPropertyName: "typeaheadSkipSortingMatches", publicName: "typeaheadSkipSortingMatches", isSignal: true, isRequired: false, transformFunction: null }, typeaheadAutocompleteListLabel: { classPropertyName: "typeaheadAutocompleteListLabel", publicName: "typeaheadAutocompleteListLabel", isSignal: true, isRequired: false, transformFunction: null }, typeaheadFullWidth: { classPropertyName: "typeaheadFullWidth", publicName: "typeaheadFullWidth", isSignal: true, isRequired: false, transformFunction: null }, typeaheadCreateOption: { classPropertyName: "typeaheadCreateOption", publicName: "typeaheadCreateOption", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { typeaheadOnInput: "typeaheadOnInput", typeaheadOnSelect: "typeaheadOnSelect", typeaheadOnFullMatch: "typeaheadOnFullMatch", typeaheadOpenChange: "typeaheadOpenChange", typeaheadOnCreateOption: "typeaheadOnCreateOption" }, host: { listeners: { "focusout": "onBlur()", "focusin": "onInput($event)", "input": "onInput($event)", "keydown.escape": "onKeydownEscape()", "keydown.space": "onKeydownSpace($event)" }, classAttribute: "si-typeahead" }, exportAs: ["si-typeahead"], usesOnChanges: true, hostDirectives: [{ directive: i1.SiAutocompleteDirective }], ngImport: i0 });
|
|
745
779
|
}
|
|
746
780
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SiTypeaheadDirective, decorators: [{
|
|
747
781
|
type: Directive,
|