@anglr/select 17.2.0 → 18.0.0-beta.20260805050455

package/styles/components/_normalState.scss

@@ -1,117 +1,122 @@
-@mixin css
-{
-    ng-select,
-    .select-component
-    {
-        .normal-state-component
-        {
-            display: flex;
-            flex-direction: row;
-            cursor: pointer;
-            border-width: var(--select-normalState-borderWidth);
-            border-style: var(--select-normalState-borderStyle);
-            border-color: var(--select-normalState-borderColor);
-            border-radius: var(--select-normalState-borderRadius);
-            box-shadow: var(--select-normalState-boxShadow);
-            background: var(--select-normalState-background);
-            color: var(--select-normalState-foreground);
-            padding: var(--select-normalState-padding);
-            font-family: var(--select-normalState-fontFamily);
-            font-size: var(--select-normalState-fontSize);
-            letter-spacing: var(--select-normalState-letterSpacing);
-
-            &.disabled
-            {
-                background-color: var(--select-normalState-disabled-background);
-                color: var(--select-normalState-disabled-foreground);
-                border-color: var(--select-normalState-disabled-borderColor);
-                cursor: not-allowed;
-
-                button
-                {
-                    cursor: not-allowed;
-                }
-            }
-
-            &:focus-within
-            {
-                border-color: var(--select-normalState-focus-borderColor);
-                outline-color: var(--select-normalState-focus-outlineColor);
-                outline-width: var(--select-normalState-focus-outlineWidth);
-                outline-style: solid;
-            }
-    
-            .select-normal-state-gap
-            {
-                gap: var(--select-normalState-gap);
-            }
-
-            .normal-state-value,
-            .normal-state-element
-            {
-                overflow: hidden;
-                white-space: nowrap;
-            }
-
-            .normal-state-element
-            {
-                display: flex;
-                flex-direction: row;
-                flex: 1;
-                min-width: 0;
-
-                &:focus-visible
-                {
-                    outline: none;
-                }
-            }
-
-            .normal-state-value
-            {
-                align-items: center;
-
-                &:empty
-                {
-                    &::after
-                    {
-                        content: "\00a0";
-                    }
-                }
-            }
-
-            .select-tag
-            {
-                display: flex;
-                flex-direction: row;
-                align-items: center;
-                align-self: center;
-                white-space: nowrap;
-                gap: var(--select-normalState-tag-gap);
-                padding: var(--select-normalState-tag-padding);
-                border-radius: var(--select-normalState-tag-borderRadius);
-                font-size: var(--select-normalState-tag-fontSize);
-                background-color: var(--select-normalState-tag-background);
-                color: var(--select-normalState-tag-foreground);
-            }
-
-            button
-            {
-                background-color: transparent;
-                padding: 0;
-                cursor: pointer;
-                border: none;
-                color: inherit;
-                font-size: inherit;
-                font-family: inherit;
-            }
-
-            .normal-state-cancel
-            {
-                &:hover
-                {
-                    color: hsl(from var(--select-normalState-foreground) h s 50%);
-                }
-            }
-        }
-    }
+@mixin css
+{
+    ng-select,
+    .select-component
+    {
+        .normal-state-component
+        {
+            display: flex;
+            flex-direction: row;
+            cursor: pointer;
+            border-width: var(--select-normalState-borderWidth);
+            border-style: var(--select-normalState-borderStyle);
+            border-color: var(--select-normalState-borderColor);
+            border-radius: var(--select-normalState-borderRadius);
+            box-shadow: var(--select-normalState-boxShadow);
+            background: var(--select-normalState-background);
+            color: var(--select-normalState-foreground);
+            padding: var(--select-normalState-padding);
+            font-family: var(--select-normalState-fontFamily);
+            font-size: var(--select-normalState-fontSize);
+            letter-spacing: var(--select-normalState-letterSpacing);
+
+            &.disabled
+            {
+                background-color: var(--select-normalState-disabled-background);
+                color: var(--select-normalState-disabled-foreground);
+                border-color: var(--select-normalState-disabled-borderColor);
+                cursor: not-allowed;
+
+                button
+                {
+                    cursor: not-allowed;
+                }
+            }
+
+            &:focus-within
+            {
+                border-color: var(--select-normalState-focus-borderColor);
+                outline-color: var(--select-normalState-focus-outlineColor);
+                outline-width: var(--select-normalState-focus-outlineWidth);
+                outline-style: solid;
+            }
+    
+            .select-normal-state-gap
+            {
+                gap: var(--select-normalState-gap);
+            }
+
+            .normal-state-value
+            {
+                overflow: hidden;
+                white-space: nowrap;
+                justify-self: center;
+                flex: 1;
+                min-width: 0;
+
+                &:empty
+                {
+                    &::after
+                    {
+                        content: "\00a0";
+                    }
+                }
+            }
+
+            .select-tag
+            {
+                display: flex;
+                flex-direction: row;
+                align-items: center;
+                align-self: center;
+                white-space: nowrap;
+                gap: var(--select-normalState-tag-gap);
+                padding: var(--select-normalState-tag-padding);
+                border-radius: var(--select-normalState-tag-borderRadius);
+                font-size: var(--select-normalState-tag-fontSize);
+                background-color: var(--select-normalState-tag-background);
+                color: var(--select-normalState-tag-foreground);
+            }
+
+            button
+            {
+                background-color: transparent;
+                padding: 0;
+                cursor: pointer;
+                border: none;
+                color: inherit;
+                font-size: inherit;
+                font-family: inherit;
+            }
+
+            .normal-state-interactive-element
+            {
+                position: absolute;
+                top: 0;
+                left: 0;
+                width: 100%;
+                height: 100%;
+
+                &:focus-visible
+                {
+                    outline: none;
+                }
+            }
+
+            .normal-state-live-search-wrapper
+            {
+                padding: var(--select-normalState-tag-padding);
+            }
+
+            .normal-state-cancel
+            {
+                z-index: 2;
+
+                &:hover
+                {
+                    color: hsl(from var(--select-normalState-foreground) h s 50%);
+                }
+            }
+        }
+    }
 }

package/styles/components/_popup.scss

@@ -1,108 +1,108 @@
-@mixin css
-{
-    ng-select,
-    .select-component
-    {
-        .popup-component
-        {
-            display: block;
-
-            ::highlight(search-query) 
-            {
-                text-decoration: var(--select-popup-option-searchHighlight-textDecoration);
-                text-shadow: var(--select-popup-option-searchHighlight-textShadow);
-            }
-
-            &[popover]:not(:popover-open):not(dialog[open])
-            {
-                display: none;
-            }
-
-            &.popover-popup
-            {
-                position: absolute;
-                position-anchor: --popup-anchor;
-                inset: auto;
-                top: anchor(bottom);
-                left: anchor(left);
-                min-width: anchor-size(width);
-                border: none;
-                margin: 0;
-                position-try-fallbacks: --popup-top, --popup-left, --popup-top-left;
-            }
-
-            .option-group
-            {
-                font-style: var(--select-popup-optionGroup-fontStyle);
-                letter-spacing: var(--select-popup-optionGroup-letterSpacing);
-                font-weight: var(--select-popup-optionGroup-fontWeight);
-            }
-
-            .popup-container
-            {
-                padding: var(--select-popup-container-padding);
-                background-color: var(--select-popup-container-background);
-                color: var(--select-popup-container-foreground);
-                border-radius: var(--select-popup-container-borderRadius);
-                border-color: var(--select-popup-container-borderColor);
-                border-width: var(--select-popup-container-borderWidth);
-                border-style: var(--select-popup-container-borderStyle);
-                max-height: 48dvh;
-                overflow: auto;
-                box-shadow: var(--select-popup-container-boxShadow);
-                scrollbar-width: thin;
-            }
-
-            .option
-            {
-                display: flex;
-                flex-direction: row;
-                padding: var(--select-popup-option-padding);
-                border-radius: var(--select-popup-option-borderRadius);
-
-                &.selected
-                {
-                    background-color: var(--select-popup-option-selected-background);
-                    background-image: var(--select-popup-option-selected-backgroundImage);
-                }
-
-                &.active
-                {
-                    background-color: var(--select-popup-option-active-background);
-                    background-image: var(--select-popup-option-active-backgroundImage);
-                }
-
-                &.in-group
-                {
-                    margin: var(--select-popup-option-inGroup-margin);
-                }
-            }
-
-            .option-text
-            {
-                flex: 1;
-                min-width: 0;
-                white-space: nowrap;
-            }
-        }
-    }
-}
-
-@position-try --popup-top
-{
-    bottom: anchor(top);
-    top: auto;
-}
-
-@position-try --popup-left
-{
-    right: anchor(right);
-    left: auto;
-}
-
-@position-try --popup-top-left
-{
-    inset: auto;
-    bottom: anchor(top);
-    right: anchor(right);
+@mixin css
+{
+    ng-select,
+    .select-component
+    {
+        .popup-component
+        {
+            display: block;
+
+            ::highlight(search-query) 
+            {
+                text-decoration: var(--select-popup-option-searchHighlight-textDecoration);
+                text-shadow: var(--select-popup-option-searchHighlight-textShadow);
+            }
+
+            &[popover]:not(:popover-open):not(dialog[open])
+            {
+                display: none;
+            }
+
+            &.popover-popup
+            {
+                position: absolute;
+                position-anchor: --popup-anchor;
+                inset: auto;
+                top: anchor(bottom);
+                left: anchor(left);
+                min-width: anchor-size(width);
+                border: none;
+                margin: 0;
+                position-try-fallbacks: --popup-top, --popup-left, --popup-top-left;
+            }
+
+            .option-group
+            {
+                font-style: var(--select-popup-optionGroup-fontStyle);
+                letter-spacing: var(--select-popup-optionGroup-letterSpacing);
+                font-weight: var(--select-popup-optionGroup-fontWeight);
+            }
+
+            .popup-container
+            {
+                padding: var(--select-popup-container-padding);
+                background-color: var(--select-popup-container-background);
+                color: var(--select-popup-container-foreground);
+                border-radius: var(--select-popup-container-borderRadius);
+                border-color: var(--select-popup-container-borderColor);
+                border-width: var(--select-popup-container-borderWidth);
+                border-style: var(--select-popup-container-borderStyle);
+                max-height: 48dvh;
+                overflow: auto;
+                box-shadow: var(--select-popup-container-boxShadow);
+                scrollbar-width: thin;
+            }
+
+            .option
+            {
+                display: flex;
+                flex-direction: row;
+                padding: var(--select-popup-option-padding);
+                border-radius: var(--select-popup-option-borderRadius);
+
+                &.selected
+                {
+                    background-color: var(--select-popup-option-selected-background);
+                    background-image: var(--select-popup-option-selected-backgroundImage);
+                }
+
+                &.active
+                {
+                    background-color: var(--select-popup-option-active-background);
+                    background-image: var(--select-popup-option-active-backgroundImage);
+                }
+
+                &.in-group
+                {
+                    margin: var(--select-popup-option-inGroup-margin);
+                }
+            }
+
+            .option-text
+            {
+                flex: 1;
+                min-width: 0;
+                white-space: nowrap;
+            }
+        }
+    }
+}
+
+@position-try --popup-top
+{
+    bottom: anchor(top);
+    top: auto;
+}
+
+@position-try --popup-left
+{
+    right: anchor(right);
+    left: auto;
+}
+
+@position-try --popup-top-left
+{
+    inset: auto;
+    bottom: anchor(top);
+    right: anchor(right);
 }

package/styles/components/_select.scss

@@ -1,15 +1,15 @@
-@mixin css
-{
-    ng-select,
-    .select-component
-    {
-        anchor-scope: --popup-anchor;
-
-        .visual-container
-        {
-            display: flex;
-            flex-direction: column;
-            anchor-name: --popup-anchor;
-        }
-    }
+@mixin css
+{
+    ng-select,
+    .select-component
+    {
+        anchor-scope: --popup-anchor;
+
+        .visual-container
+        {
+            display: flex;
+            flex-direction: column;
+            anchor-name: --popup-anchor;
+        }
+    }
 }