@anglr/select 17.2.0 → 18.0.0-beta.20260805043138

package/src/interfaces/plugins/normalState/simpleNormalState.interface.d.ts

@@ -7,10 +7,6 @@ export interface SimpleNormalStateCssClasses extends NormalStateCssClasses {
      * Applied to currently selected value, which is visible to user (default template)
      */
     value: string;
-    /**
-     * Applied to "carret" element
-     */
-    carret: string;
     /**
      * Applied to "carret" icon element
      */
@@ -18,7 +14,7 @@ export interface SimpleNormalStateCssClasses extends NormalStateCssClasses {
     /**
      * Applied to HTML element that represents normal state main element visible to user
      */
-    element: string;
+    interactiveElement: string;
     /**
      * Applied to HTML element that represents whole component
      */

package/src/interfaces/plugins/normalState/simpleNormalState.interface.d.ts.map

@@ -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,MAAM,EAAE,MAAM,CAAC;IAEf;;OAEG;IACH,UAAU,EAAE,MAAM,CAAC;IAEnB;;OAEG;IACH,OAAO,EAAE,MAAM,CAAC;IAEhB;;OAEG;IACH,gBAAgB,EAAE,MAAM,CAAC;IAEzB;;OAEG;IACH,MAAM,EAAE,MAAM,CAAC;IAEf;;OAEG;IACH,UAAU,EAAE,MAAM,CAAC;CACtB"}
+{"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,UAAU,EAAE,MAAM,CAAC;IAEnB;;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"}

package/src/plugins/liveSearch/editLiveSearch/editLiveSearch.component.html

@@ -1,20 +1,20 @@
-<input #htmlInput
-       type="text"
-       aria-autocomplete="list"
-       autocorrect="off"
-       autocapitalize="none"
-       autocomplete="off"
-       role="combobox"
-       [attr.aria-expanded]="selectBus.popupVisible()"
-       [attr.aria-label]="selectBus.selectedOptions() | displayValue | localize"
-       [attr.aria-controls]="selectBus.popupVisible() ? selectBus.id : null"
-       [attr.aria-activedescendant]="selectBus.popupVisible() ? activeDescendant() : null"
-       [attr.aria-label]="selectBus.selectedOptions() | displayValue | localize"
-       [class]="cssClasses()"
-       [tooltip]="selectBus.selectedOptions() | displayValue | localize"
-       [disabled]="selectBus.selectOptions().readonly"
-       [placeholder]="(!(selectBus.selectedOptions() | hasValue) ? selectBus.selectOptions().placeholder : '') | localize"
-       (click)="click()"
-       (focus)="handleFocus()"
-       (blur)="blur()"
+<input #htmlInput
+       type="text"
+       aria-autocomplete="list"
+       autocorrect="off"
+       autocapitalize="none"
+       autocomplete="off"
+       role="combobox"
+       [attr.aria-expanded]="selectBus.popupVisible()"
+       [attr.aria-label]="selectBus.selectedOptions() | displayValue | localize"
+       [attr.aria-controls]="selectBus.popupVisible() ? selectBus.id : null"
+       [attr.aria-activedescendant]="selectBus.popupVisible() ? activeDescendant() : null"
+       [attr.aria-label]="selectBus.selectedOptions() | displayValue | localize"
+       [class]="cssClasses()"
+       [tooltip]="selectBus.selectedOptions() | displayValue | localize"
+       [disabled]="selectBus.selectOptions().readonly"
+       [placeholder]="(!(selectBus.selectedOptions() | hasValue) ? selectBus.selectOptions().placeholder : '') | localize"
+       (click)="click()"
+       (focus)="handleFocus()"
+       (blur)="blur()"
        (input)="input($event)">

package/src/plugins/normalState/editNormalState/editNormalState.component.html

@@ -1,51 +1,51 @@
-<ng-template #defaultSingleLook="normalStateTemplate" normalStateTemplate>{{selectBus.selectedOptions() | displayValue: '' | localize}}</ng-template>
-<ng-template #defaultMultipleLook="normalStateTagTemplate" normalStateTagTemplate let-option let-normalState="normalState">
-    <div [class]="options.cssClasses.tag">
-        <span>{{option | displayValue | localize}}</span>
-        <button type="button" (click)="optionClick(option)" tabindex="-1" aria-hidden="true">
-            <span>x</span>
-        </button>
-    </div>
-</ng-template>
-
-<div [class]="options.cssClasses.valueWrapper">
-    @if(showValue())
-    {
-        <div [class]="cssClasses()">
-            @if(!selectBus.selectOptions().multiple)
-            {
-                <ng-container *ngTemplateOutlet="selectBus.selectOptions().templateGatherer.normalStateTemplate() || defaultSingleLook.template; context: {$implicit: $any(this)}"/>
-            }
-            @else
-            {
-                @for(option of selectedOptionsMultiple(); track option)
-                {
-                    <ng-container *ngTemplateOutlet="selectBus.selectOptions().templateGatherer.normalStateTagTemplate() || defaultMultipleLook.template; context: {$implicit: option, normalState: this}"/>
-                }
-            }
-        </div>
-    }
-
-    <ng-container #liveSearchPlaceholder/>
-</div>
-
-@if(options.cancelValue && (selectBus.selectedOptions() | hasValue))
-{
-    <button type="button"
-            [disabled]="!!selectBus.selectOptions().readonly"
-            [class]="options.cssClasses.cancel" 
-            [tooltip]="options.texts.cancelTitle | localize" 
-            [attr.aria-label]="options.texts.cancelTitle | localize"
-            (focus)="handleFocus()" 
-            (blur)="blur()" 
-            (click)="cancel()">
-        <span [class]="options.cssClasses.cancelIcon"></span>
-    </button>
-}
-
-@if(options.carret)
-{
-    <button type="button" [disabled]="!!selectBus.selectOptions().readonly" (click)="click(); selectBus.setFocus()" (focus)="handleFocus()" (blur)="blur()" tabindex="-1" aria-hidden="true">
-        <span [class]="options.cssClasses.carret"></span>
-    </button>
+<ng-template #defaultSingleLook="normalStateTemplate" normalStateTemplate>{{selectBus.selectedOptions() | displayValue: '' | localize}}</ng-template>
+<ng-template #defaultMultipleLook="normalStateTagTemplate" normalStateTagTemplate let-option let-normalState="normalState">
+    <div [class]="options.cssClasses.tag">
+        <span>{{option | displayValue | localize}}</span>
+        <button type="button" (click)="optionClick(option)" tabindex="-1" aria-hidden="true">
+            <span>x</span>
+        </button>
+    </div>
+</ng-template>
+
+<div [class]="options.cssClasses.valueWrapper">
+    @if(showValue())
+    {
+        <div [class]="cssClasses()">
+            @if(!selectBus.selectOptions().multiple)
+            {
+                <ng-container *ngTemplateOutlet="selectBus.selectOptions().templateGatherer.normalStateTemplate() || defaultSingleLook.template; context: {$implicit: $any(this)}"/>
+            }
+            @else
+            {
+                @for(option of selectedOptionsMultiple(); track option)
+                {
+                    <ng-container *ngTemplateOutlet="selectBus.selectOptions().templateGatherer.normalStateTagTemplate() || defaultMultipleLook.template; context: {$implicit: option, normalState: this}"/>
+                }
+            }
+        </div>
+    }
+
+    <ng-container #liveSearchPlaceholder/>
+</div>
+
+@if(options.cancelValue && (selectBus.selectedOptions() | hasValue))
+{
+    <button type="button"
+            [disabled]="!!selectBus.selectOptions().readonly"
+            [class]="options.cssClasses.cancel" 
+            [tooltip]="options.texts.cancelTitle | localize" 
+            [attr.aria-label]="options.texts.cancelTitle | localize"
+            (focus)="handleFocus()" 
+            (blur)="blur()" 
+            (click)="cancel()">
+        <span [class]="options.cssClasses.cancelIcon"></span>
+    </button>
+}
+
+@if(options.carret)
+{
+    <button type="button" [disabled]="!!selectBus.selectOptions().readonly" (click)="click(); selectBus.setFocus()" (focus)="handleFocus()" (blur)="blur()" tabindex="-1" aria-hidden="true">
+        <span [class]="options.cssClasses.carret"></span>
+    </button>
 }

package/src/plugins/normalState/simpleNormalState/simpleNormalState.component.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"simpleNormalState.component.d.ts","sourceRoot":"","sources":["simpleNormalState.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAA+C,UAAU,EAA4B,MAAM,EAAY,MAAM,eAAe,CAAC;AAGpI,OAAO,EAAC,gBAAgB,EAAC,MAAM,gBAAgB,CAAC;AAGhD,OAAO,EAAC,WAAW,EAAE,kBAAkB,EAAgB,2BAA2B,EAAC,MAAM,qBAAqB,CAAC;AAC/G,OAAO,EAAC,qBAAqB,EAAE,SAAS,EAAC,MAAM,uBAAuB,CAAC;;AA0BvE;;GAEG;AACH,qBAmBa,iBAAiB,CAAC,MAAM,GAAG,OAAO,EAAE,YAAY,GAAG,MAAM,CAAE,YAAW,WAAW,CAAC,MAAM,EAAE,YAAY,EAAE,kBAAkB,CAAC,2BAA2B,CAAC,CAAC;IAIjK;;OAEG;IAEI,OAAO,EAAE,kBAAkB,CAAC,2BAA2B,CAAC,CAAC;IAEhE;;OAEG;IACI,aAAa,EAAE,qBAAqB,CAAC,MAAM,EAAE,YAAY,CAAC,CAAiC;IAElG;;OAEG;IACI,aAAa,EAAE,UAAU,CAAC,WAAW,CAAC,CAAsB;IAEnE;;OAEG;IACI,SAAS,EAAE,SAAS,CAAC,MAAM,EAAE,YAAY,CAAC,CAAqB;IAItE;;OAEG;IACH,SAAS,CAAC,gBAAgB,EAAE,MAAM,CAAC,MAAM,CAAC,CAAC;IAI3C;;OAEG;IACH,SAAS,CAAC,UAAU,EAAE,MAAM,CAAC,UAAU,CAAC,iBAAiB,CAAC,CAAC,CAAwD;gBAG7D,OAAO,CAAC,EAAE,gBAAgB,CAAC,kBAAkB,CAAC,2BAA2B,CAAC,CAAC,GAAC,IAAI;IAUtI;;OAEG;IACI,KAAK,IAAI,IAAI;IAOpB;;OAEG;IACH,SAAS,CAAC,KAAK,IAAI,IAAI;IAUvB;;OAEG;IACH,SAAS,CAAC,WAAW,IAAI,IAAI;IAU7B;;OAEG;IACH,SAAS,CAAC,IAAI,IAAI,IAAI;IAUtB;;OAEG;IACH,SAAS,CAAC,MAAM,IAAI,IAAI;yCAtGf,iBAAiB;2CAAjB,iBAAiB;CA+G7B"}
+{"version":3,"file":"simpleNormalState.component.d.ts","sourceRoot":"","sources":["simpleNormalState.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAA+C,UAAU,EAA4B,MAAM,EAAY,MAAM,eAAe,CAAC;AAGpI,OAAO,EAAC,gBAAgB,EAAC,MAAM,gBAAgB,CAAC;AAGhD,OAAO,EAAC,WAAW,EAAE,kBAAkB,EAAgB,2BAA2B,EAAC,MAAM,qBAAqB,CAAC;AAC/G,OAAO,EAAC,qBAAqB,EAAE,SAAS,EAAC,MAAM,uBAAuB,CAAC;;AAyBvE;;GAEG;AACH,qBAmBa,iBAAiB,CAAC,MAAM,GAAG,OAAO,EAAE,YAAY,GAAG,MAAM,CAAE,YAAW,WAAW,CAAC,MAAM,EAAE,YAAY,EAAE,kBAAkB,CAAC,2BAA2B,CAAC,CAAC;IAIjK;;OAEG;IAEI,OAAO,EAAE,kBAAkB,CAAC,2BAA2B,CAAC,CAAC;IAEhE;;OAEG;IACI,aAAa,EAAE,qBAAqB,CAAC,MAAM,EAAE,YAAY,CAAC,CAAiC;IAElG;;OAEG;IACI,aAAa,EAAE,UAAU,CAAC,WAAW,CAAC,CAAsB;IAEnE;;OAEG;IACI,SAAS,EAAE,SAAS,CAAC,MAAM,EAAE,YAAY,CAAC,CAAqB;IAItE;;OAEG;IACH,SAAS,CAAC,gBAAgB,EAAE,MAAM,CAAC,MAAM,CAAC,CAAC;IAI3C;;OAEG;IACH,SAAS,CAAC,UAAU,EAAE,MAAM,CAAC,UAAU,CAAC,iBAAiB,CAAC,CAAC,CAAwD;gBAG7D,OAAO,CAAC,EAAE,gBAAgB,CAAC,kBAAkB,CAAC,2BAA2B,CAAC,CAAC,GAAC,IAAI;IAUtI;;OAEG;IACI,KAAK,IAAI,IAAI;IAOpB;;OAEG;IACH,SAAS,CAAC,KAAK,IAAI,IAAI;IAUvB;;OAEG;IACH,SAAS,CAAC,WAAW,IAAI,IAAI;IAU7B;;OAEG;IACH,SAAS,CAAC,IAAI,IAAI,IAAI;IAUtB;;OAEG;IACH,SAAS,CAAC,MAAM,IAAI,IAAI;yCAtGf,iBAAiB;2CAAjB,iBAAiB;CA+G7B"}

package/src/plugins/normalState/simpleNormalState/simpleNormalState.component.html

@@ -1,37 +1,36 @@
-<ng-template #defaultLook>{{selectBus.selectedOptions() | displayValue | localize}}</ng-template>
-
-<button #htmlButton
-        type="button"
-        role="combobox"
-        [class]="options.cssClasses.element"
-        [disabled]="!!selectBus.selectOptions().readonly"
-        [attr.aria-expanded]="selectBus.popupVisible()"
-        [attr.aria-controls]="selectBus.popupVisible() ? selectBus.id : null"
-        [attr.aria-activedescendant]="selectBus.popupVisible() ? activeDescendant() : null"
-        [attr.aria-label]="selectBus.selectedOptions() | displayValue | localize"
-        [tooltip]="selectBus.selectedOptions() | displayValue | localize"
-        (click)="click()"
-        (blur)="blur()"
-        (focus)="handleFocus()">
-    <span [class]="options.cssClasses.value">
-        <ng-container *ngTemplateOutlet="selectBus.selectOptions().templateGatherer.normalStateTemplate() || defaultLook; context: {$implicit: this}"/>
-    </span>
-</button>
-
-@if(options.cancelValue && (selectBus.selectedOptions() | hasValue))
-{
-    <button type="button" 
-            [disabled]="!!selectBus.selectOptions().readonly"
-            [class]="options.cssClasses.cancel" 
-            [tooltip]="options.texts.cancelTitle | localize" 
-            [attr.aria-label]="options.texts.cancelTitle | localize"
-            (click)="cancel()" 
-            (blur)="blur()" 
-            (focus)="handleFocus()">
-        <span [class]="options.cssClasses.cancelIcon"></span>
-    </button>
-}
-
-<button type="button" [class]="options.cssClasses.carret" [disabled]="!!selectBus.selectOptions().readonly" (click)="click(); selectBus.setFocus()" (focus)="handleFocus()" (blur)="blur()" tabindex="-1" aria-hidden="true">
-    <span [class]="options.cssClasses.carretIcon"></span>
-</button>
+<ng-template #defaultLook>{{selectBus.selectedOptions() | displayValue | localize}}</ng-template>
+
+<button #htmlButton
+        type="button"
+        role="combobox"
+        [class]="options.cssClasses.interactiveElement"
+        [disabled]="!!selectBus.selectOptions().readonly"
+        [attr.aria-expanded]="selectBus.popupVisible()"
+        [attr.aria-controls]="selectBus.popupVisible() ? selectBus.id : null"
+        [attr.aria-activedescendant]="selectBus.popupVisible() ? activeDescendant() : null"
+        [attr.aria-label]="selectBus.selectedOptions() | displayValue | localize"
+        [tooltip]="selectBus.selectedOptions() | displayValue | localize"
+        (click)="click()"
+        (blur)="blur()"
+        (focus)="handleFocus()">
+</button>
+
+<span [class]="options.cssClasses.value" aria-hidden="true" role="presentation">
+    <ng-container *ngTemplateOutlet="selectBus.selectOptions().templateGatherer.normalStateTemplate() || defaultLook; context: {$implicit: this}"/>
+</span>
+
+@if(options.cancelValue && (selectBus.selectedOptions() | hasValue))
+{
+    <button type="button" 
+            [disabled]="!!selectBus.selectOptions().readonly"
+            [class]="options.cssClasses.cancel" 
+            [tooltip]="options.texts.cancelTitle | localize" 
+            [attr.aria-label]="options.texts.cancelTitle | localize"
+            (click)="cancel()" 
+            (blur)="blur()" 
+            (focus)="handleFocus()">
+        <span [class]="options.cssClasses.cancelIcon"></span>
+    </button>
+}
+
+<span aria-hidden="true" role="presentation" [class]="options.cssClasses.carretIcon"></span>

package/src/plugins/popup/simplePopup/simplePopup.component.html

@@ -1,56 +1,56 @@
-<ng-template #defaultOptionLook let-option>{{option | addNewOption | localize}}{{option | displayOptionValue | localize}}</ng-template>
-<ng-template #defaultOptionGroupLook let-text>{{text}}</ng-template>
-
-@if(selectBus.popupVisible() || options.visible)
-{
-    @let result = selectPlugins.OptionsHandler.listOptions() | groupedListOptions;
-    @let listOptions = result[0];
-    @let size = result[1];
-    
-    <div [class]="options.cssClasses.popupContainer" role="listbox" [attr.aria-label]="options.texts.optionsList | localize">
-        <ng-container #liveSearchPlaceholder/>
-
-        @for(optionsGroups of listOptions; track $index)
-        {
-            @let group = optionsGroups[1];
-            @let opts = optionsGroups[0];
-
-            @if(group)
-            {
-                <div role="group"
-                     [id]="group.id"
-                     [class]="options.cssClasses.optionGroup"
-                     [attr.aria-posinset]="group.index + 1"
-                     [attr.aria-setsize]="size">
-                    <ng-container *ngTemplateOutlet="group.template() || defaultOptionGroupLook; context: {$implicit: group.text()}"/>
-                </div>
-            }
-
-            @for(option of opts; track option)
-            {
-                <div role="option"
-                     [id]="`${selectBus.id}-${option.index}`"
-                     [attr.aria-posinset]="option.index + 1"
-                     [attr.aria-setsize]="size"
-                     [attr.aria-selected]="option.selected()"
-                     [class]="option | optionCssClasses: options.cssClasses: group"
-                     (mouseover)="markActive(option)"
-                     (mousedown)="preventBlur($event)"
-                     (click)="optionClick(option)">
-                    <div [class]="options.cssClasses.optionText" highlightSearch #highlightSearch="highlightSearch">
-                        <ng-container *ngTemplateOutlet="selectBus.selectOptions().templateGatherer.optionTemplate() || defaultOptionLook; context: {$implicit: option, popup: this}; injector: highlightSearch.injector"/>
-                    </div>
-    
-                    @if(option.selected() && selectBus.selectOptions().multiple)
-                    {
-                        <div [class]="options.cssClasses.optionChecked"></div>
-                    }
-                </div>
-            }
-        }
-        @empty 
-        {
-            <div>{{options.texts.noAvailableOptions | localize}}</div>
-        }
-    </div>
-}
+<ng-template #defaultOptionLook let-option>{{option | addNewOption | localize}}{{option | displayOptionValue | localize}}</ng-template>
+<ng-template #defaultOptionGroupLook let-text>{{text}}</ng-template>
+
+@if(selectBus.popupVisible() || options.visible)
+{
+    @let result = selectPlugins.OptionsHandler.listOptions() | groupedListOptions;
+    @let listOptions = result[0];
+    @let size = result[1];
+    
+    <div [class]="options.cssClasses.popupContainer" role="listbox" [attr.aria-label]="options.texts.optionsList | localize">
+        <ng-container #liveSearchPlaceholder/>
+
+        @for(optionsGroups of listOptions; track $index)
+        {
+            @let group = optionsGroups[1];
+            @let opts = optionsGroups[0];
+
+            @if(group)
+            {
+                <div role="group"
+                     [id]="group.id"
+                     [class]="options.cssClasses.optionGroup"
+                     [attr.aria-posinset]="group.index + 1"
+                     [attr.aria-setsize]="size">
+                    <ng-container *ngTemplateOutlet="group.template() || defaultOptionGroupLook; context: {$implicit: group.text()}"/>
+                </div>
+            }
+
+            @for(option of opts; track option)
+            {
+                <div role="option"
+                     [id]="`${selectBus.id}-${option.index}`"
+                     [attr.aria-posinset]="option.index + 1"
+                     [attr.aria-setsize]="size"
+                     [attr.aria-selected]="option.selected()"
+                     [class]="option | optionCssClasses: options.cssClasses: group"
+                     (mouseover)="markActive(option)"
+                     (mousedown)="preventBlur($event)"
+                     (click)="optionClick(option)">
+                    <div [class]="options.cssClasses.optionText" highlightSearch #highlightSearch="highlightSearch">
+                        <ng-container *ngTemplateOutlet="selectBus.selectOptions().templateGatherer.optionTemplate() || defaultOptionLook; context: {$implicit: option, popup: this}; injector: highlightSearch.injector"/>
+                    </div>
+    
+                    @if(option.selected() && selectBus.selectOptions().multiple)
+                    {
+                        <div [class]="options.cssClasses.optionChecked"></div>
+                    }
+                </div>
+            }
+        }
+        @empty 
+        {
+            <div>{{options.texts.noAvailableOptions | localize}}</div>
+        }
+    </div>
+}

package/styles/components/_liveSearch.scss

@@ -1,33 +1,33 @@
-@mixin css
-{
-    ng-select,
-    .select-component
-    {
-        .live-search-component
-        {
-            display: contents;
-        }
-
-        .absolute-input
-        {
-            position: absolute;
-            top: 0;
-            left: 0;
-            width: 100%;
-        }
-
-        .live-search-input
-        {
-            background-color: transparent;
-            border: none;
-            outline: none;
-
-            *::placeholder
-            {
-                color: var(--select-liveSearch-placeholder-foreground);
-                opacity: var(--select-liveSearch-placeholder-opacity);
-                letter-spacing: var(--select-liveSearch-placeholder-letterSpacing);
-            }
-        }
-    }
+@mixin css
+{
+    ng-select,
+    .select-component
+    {
+        .live-search-component
+        {
+            display: contents;
+        }
+
+        .absolute-input
+        {
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+        }
+
+        .live-search-input
+        {
+            background-color: transparent;
+            border: none;
+            outline: none;
+
+            *::placeholder
+            {
+                color: var(--select-liveSearch-placeholder-foreground);
+                opacity: var(--select-liveSearch-placeholder-opacity);
+                letter-spacing: var(--select-liveSearch-placeholder-letterSpacing);
+            }
+        }
+    }
 }