From e9f0f77771601c82d3c5c88c2d91a4eb697bad3a Mon Sep 17 00:00:00 2001 From: Esteban Gehring Date: Thu, 11 May 2023 09:36:39 +0200 Subject: [PATCH] #425: fix compatibility with angular material 16, prepare release 7.0.2 (#426) (cherry picked from commit e83532da537973de88fa9598a2164cc97ffa2427) accepting these changes not sure whether good for legacy --- CHANGELOG.md | 18 +++ package-lock.json | 142 ++++++++++-------- .../mat-select-search.component.scss | 88 +++++------ .../ngx-mat-select-search.module.ts | 2 +- 4 files changed, 135 insertions(+), 115 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 621ef537..6fba2ff4 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,5 +1,18 @@ # Changelog +## 6.0.2 +Hopefully all of ngx-mat-select-search +except for the drop of Legacy + +## cherry picked 7.0.2 +* Fix compatibility with `@angular/material`: `^16.0.0` + [#425](https://github.com/bithost-gmbh/ngx-mat-select-search/issues/425) + + Thanks to @GipHub123 for reporting + +## cherry picked 7.0.1 +* Enhancement: Add compatibility with `@angular/material`: `^16.0.0` + ## 6.0.1 Take the situation before 7.0.0 Keep angulars MatLegacySelectModule (and other legacy) @@ -11,6 +24,11 @@ At least I hope to make it work. ## 6.0.0 * Add Angular Material 15 as a peer dependency \ [#408](https://github.com/bithost-gmbh/ngx-mat-select-search/issues/408) + + Thanks to @swierzbicki +* Fix select all example [#336](https://github.com/bithost-gmbh/ngx-mat-select-search/issues/336) + + Thanks to @AhsanAyaz * Update compatibility to `@angular/material@15` with `MatLegacySelectModule` (`@angular/material/legacy-select`). [#395](https://github.com/bithost-gmbh/ngx-mat-select-search/issues/395) diff --git a/package-lock.json b/package-lock.json index cd2bd58f..28fd552f 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "ngx-mat-select-search", - "version": "7.0.1", + "version": "7.0.2", "lockfileVersion": 2, "requires": true, "packages": { "": { "name": "ngx-mat-select-search", - "version": "7.0.0", + "version": "7.0.2", "license": "MIT", "dependencies": { "tslib": "^2.4.0" @@ -47,7 +47,7 @@ "zone.js": "^0.11.5" }, "peerDependencies": { - "@angular/material": "^15.0.0" + "@angular/material": "^15.0.0 || ^16.0.0" } }, "node_modules/@ampproject/remapping": { @@ -3323,13 +3323,18 @@ }, "node_modules/@types/cookie": { "version": "0.4.1", - "dev": true, - "license": "MIT" + "resolved": "https://registry.npmjs.org/@types/cookie/-/cookie-0.4.1.tgz", + "integrity": "sha512-XW/Aa8APYr6jSVVA1y/DEIZX0/GMKLEVekNG727R8cs56ahETkRAy/3DR7+fJyh7oUgGwNQaRfXCun0+KbWY7Q==", + "dev": true }, "node_modules/@types/cors": { - "version": "2.8.12", + "version": "2.8.13", + "resolved": "https://registry.npmjs.org/@types/cors/-/cors-2.8.13.tgz", + "integrity": "sha512-RG8AStHlUiV5ysZQKq97copd2UmVYw3/pRMLefISZ3S1hK104Cwm7iLQ3fTKx+lsUH2CE8FlLaYeEA2LSeqYUA==", "dev": true, - "license": "MIT" + "dependencies": { + "@types/node": "*" + } }, "node_modules/@types/eslint": { "version": "8.4.10", @@ -4061,8 +4066,9 @@ }, "node_modules/base64id": { "version": "2.0.0", + "resolved": "https://registry.npmjs.org/base64id/-/base64id-2.0.0.tgz", + "integrity": "sha512-lGe34o6EHj9y3Kts9R4ZYs/Gr+6N7MCaMlIFA3F1R2O5/m7K06AxfSeO5530PEERE6/WyEg3lsuyw4GHlPZHog==", "dev": true, - "license": "MIT", "engines": { "node": "^4.5.0 || >= 5.9" } @@ -4680,8 +4686,9 @@ }, "node_modules/cookie": { "version": "0.4.2", + "resolved": "https://registry.npmjs.org/cookie/-/cookie-0.4.2.tgz", + "integrity": "sha512-aSWTXFzaKWkvHO1Ny/s+ePFpvKsPnjc551iI41v3ny/ow6tBG5Vd+FuqGNhh1LxOmVzOlGUriIlOaokOvhaStA==", "dev": true, - "license": "MIT", "engines": { "node": ">= 0.6" } @@ -4761,8 +4768,9 @@ }, "node_modules/cors": { "version": "2.8.5", + "resolved": "https://registry.npmjs.org/cors/-/cors-2.8.5.tgz", + "integrity": "sha512-KIHbLJqu73RGr/hnbrO9uBeixNGuvSQjul/jdFvS/KFSIH1hWVd1ng7zOHx+YrEfInLG7q4n6GHQ9cDtxv/P6g==", "dev": true, - "license": "MIT", "dependencies": { "object-assign": "^4", "vary": "^1" @@ -5249,9 +5257,10 @@ } }, "node_modules/engine.io": { - "version": "6.2.1", + "version": "6.4.2", + "resolved": "https://registry.npmjs.org/engine.io/-/engine.io-6.4.2.tgz", + "integrity": "sha512-FKn/3oMiJjrOEOeUub2WCox6JhxBXq/Zn3fZOMCBxKnNYtsdKjxhl7yR3fZhM9PV+rdE75SU5SYMc+2PGzo+Tg==", "dev": true, - "license": "MIT", "dependencies": { "@types/cookie": "^0.4.1", "@types/cors": "^2.8.12", @@ -5262,16 +5271,17 @@ "cors": "~2.8.5", "debug": "~4.3.1", "engine.io-parser": "~5.0.3", - "ws": "~8.2.3" + "ws": "~8.11.0" }, "engines": { "node": ">=10.0.0" } }, "node_modules/engine.io-parser": { - "version": "5.0.4", + "version": "5.0.6", + "resolved": "https://registry.npmjs.org/engine.io-parser/-/engine.io-parser-5.0.6.tgz", + "integrity": "sha512-tjuoZDMAdEhVnSFleYPCtdL2GXwVTGtNjoeJd9IhIG3C1xs9uwxqRNEu5WpnDZCaozwVlK/nuQhpodhXSIMaxw==", "dev": true, - "license": "MIT", "engines": { "node": ">=10.0.0" } @@ -8467,8 +8477,9 @@ }, "node_modules/object-assign": { "version": "4.1.1", + "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz", + "integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==", "dev": true, - "license": "MIT", "engines": { "node": ">=0.10.0" } @@ -10098,15 +10109,16 @@ } }, "node_modules/socket.io": { - "version": "4.5.4", + "version": "4.6.1", + "resolved": "https://registry.npmjs.org/socket.io/-/socket.io-4.6.1.tgz", + "integrity": "sha512-KMcaAi4l/8+xEjkRICl6ak8ySoxsYG+gG6/XfRCPJPQ/haCRIJBTL4wIl8YCsmtaBovcAXGLOShyVWQ/FG8GZA==", "dev": true, - "license": "MIT", "dependencies": { "accepts": "~1.3.4", "base64id": "~2.0.0", "debug": "~4.3.2", - "engine.io": "~6.2.1", - "socket.io-adapter": "~2.4.0", + "engine.io": "~6.4.1", + "socket.io-adapter": "~2.5.2", "socket.io-parser": "~4.2.1" }, "engines": { @@ -10114,9 +10126,13 @@ } }, "node_modules/socket.io-adapter": { - "version": "2.4.0", + "version": "2.5.2", + "resolved": "https://registry.npmjs.org/socket.io-adapter/-/socket.io-adapter-2.5.2.tgz", + "integrity": "sha512-87C3LO/NOMc+eMcpcxUBebGjkpMDkNBS9tf7KJqcDsmL936EChtVva71Dw2q4tQcuVC+hAUy4an2NO/sYXmwRA==", "dev": true, - "license": "MIT" + "dependencies": { + "ws": "~8.11.0" + } }, "node_modules/socket.io-parser": { "version": "4.2.1", @@ -11194,26 +11210,6 @@ } } }, - "node_modules/webpack-dev-server/node_modules/ws": { - "version": "8.11.0", - "dev": true, - "license": "MIT", - "engines": { - "node": ">=10.0.0" - }, - "peerDependencies": { - "bufferutil": "^4.0.1", - "utf-8-validate": "^5.0.2" - }, - "peerDependenciesMeta": { - "bufferutil": { - "optional": true - }, - "utf-8-validate": { - "optional": true - } - } - }, "node_modules/webpack-merge": { "version": "5.8.0", "dev": true, @@ -11401,9 +11397,10 @@ "license": "ISC" }, "node_modules/ws": { - "version": "8.2.3", + "version": "8.11.0", + "resolved": "https://registry.npmjs.org/ws/-/ws-8.11.0.tgz", + "integrity": "sha512-HPG3wQd9sNQoT9xHyNCXoDUa+Xw/VevmY9FoHyQ+g+rrMn4j6FB4np7Z0OhdTgjx6MgQLK7jwSy1YecU1+4Asg==", "dev": true, - "license": "MIT", "engines": { "node": ">=10.0.0" }, @@ -13720,11 +13717,18 @@ }, "@types/cookie": { "version": "0.4.1", + "resolved": "https://registry.npmjs.org/@types/cookie/-/cookie-0.4.1.tgz", + "integrity": "sha512-XW/Aa8APYr6jSVVA1y/DEIZX0/GMKLEVekNG727R8cs56ahETkRAy/3DR7+fJyh7oUgGwNQaRfXCun0+KbWY7Q==", "dev": true }, "@types/cors": { - "version": "2.8.12", - "dev": true + "version": "2.8.13", + "resolved": "https://registry.npmjs.org/@types/cors/-/cors-2.8.13.tgz", + "integrity": "sha512-RG8AStHlUiV5ysZQKq97copd2UmVYw3/pRMLefISZ3S1hK104Cwm7iLQ3fTKx+lsUH2CE8FlLaYeEA2LSeqYUA==", + "dev": true, + "requires": { + "@types/node": "*" + } }, "@types/eslint": { "version": "8.4.10", @@ -14246,6 +14250,8 @@ }, "base64id": { "version": "2.0.0", + "resolved": "https://registry.npmjs.org/base64id/-/base64id-2.0.0.tgz", + "integrity": "sha512-lGe34o6EHj9y3Kts9R4ZYs/Gr+6N7MCaMlIFA3F1R2O5/m7K06AxfSeO5530PEERE6/WyEg3lsuyw4GHlPZHog==", "dev": true }, "batch": { @@ -14648,6 +14654,8 @@ }, "cookie": { "version": "0.4.2", + "resolved": "https://registry.npmjs.org/cookie/-/cookie-0.4.2.tgz", + "integrity": "sha512-aSWTXFzaKWkvHO1Ny/s+ePFpvKsPnjc551iI41v3ny/ow6tBG5Vd+FuqGNhh1LxOmVzOlGUriIlOaokOvhaStA==", "dev": true }, "cookie-signature": { @@ -14699,6 +14707,8 @@ }, "cors": { "version": "2.8.5", + "resolved": "https://registry.npmjs.org/cors/-/cors-2.8.5.tgz", + "integrity": "sha512-KIHbLJqu73RGr/hnbrO9uBeixNGuvSQjul/jdFvS/KFSIH1hWVd1ng7zOHx+YrEfInLG7q4n6GHQ9cDtxv/P6g==", "dev": true, "requires": { "object-assign": "^4", @@ -15010,7 +15020,9 @@ } }, "engine.io": { - "version": "6.2.1", + "version": "6.4.2", + "resolved": "https://registry.npmjs.org/engine.io/-/engine.io-6.4.2.tgz", + "integrity": "sha512-FKn/3oMiJjrOEOeUub2WCox6JhxBXq/Zn3fZOMCBxKnNYtsdKjxhl7yR3fZhM9PV+rdE75SU5SYMc+2PGzo+Tg==", "dev": true, "requires": { "@types/cookie": "^0.4.1", @@ -15022,11 +15034,13 @@ "cors": "~2.8.5", "debug": "~4.3.1", "engine.io-parser": "~5.0.3", - "ws": "~8.2.3" + "ws": "~8.11.0" } }, "engine.io-parser": { - "version": "5.0.4", + "version": "5.0.6", + "resolved": "https://registry.npmjs.org/engine.io-parser/-/engine.io-parser-5.0.6.tgz", + "integrity": "sha512-tjuoZDMAdEhVnSFleYPCtdL2GXwVTGtNjoeJd9IhIG3C1xs9uwxqRNEu5WpnDZCaozwVlK/nuQhpodhXSIMaxw==", "dev": true }, "enhanced-resolve": { @@ -17096,6 +17110,8 @@ }, "object-assign": { "version": "4.1.1", + "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz", + "integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==", "dev": true }, "object-inspect": { @@ -18115,20 +18131,27 @@ "dev": true }, "socket.io": { - "version": "4.5.4", + "version": "4.6.1", + "resolved": "https://registry.npmjs.org/socket.io/-/socket.io-4.6.1.tgz", + "integrity": "sha512-KMcaAi4l/8+xEjkRICl6ak8ySoxsYG+gG6/XfRCPJPQ/haCRIJBTL4wIl8YCsmtaBovcAXGLOShyVWQ/FG8GZA==", "dev": true, "requires": { "accepts": "~1.3.4", "base64id": "~2.0.0", "debug": "~4.3.2", - "engine.io": "~6.2.1", - "socket.io-adapter": "~2.4.0", + "engine.io": "~6.4.1", + "socket.io-adapter": "~2.5.2", "socket.io-parser": "~4.2.1" } }, "socket.io-adapter": { - "version": "2.4.0", - "dev": true + "version": "2.5.2", + "resolved": "https://registry.npmjs.org/socket.io-adapter/-/socket.io-adapter-2.5.2.tgz", + "integrity": "sha512-87C3LO/NOMc+eMcpcxUBebGjkpMDkNBS9tf7KJqcDsmL936EChtVva71Dw2q4tQcuVC+hAUy4an2NO/sYXmwRA==", + "dev": true, + "requires": { + "ws": "~8.11.0" + } }, "socket.io-parser": { "version": "4.2.1", @@ -18837,13 +18860,6 @@ "spdy": "^4.0.2", "webpack-dev-middleware": "^5.3.1", "ws": "^8.4.2" - }, - "dependencies": { - "ws": { - "version": "8.11.0", - "dev": true, - "requires": {} - } } }, "webpack-merge": { @@ -18930,7 +18946,9 @@ "dev": true }, "ws": { - "version": "8.2.3", + "version": "8.11.0", + "resolved": "https://registry.npmjs.org/ws/-/ws-8.11.0.tgz", + "integrity": "sha512-HPG3wQd9sNQoT9xHyNCXoDUa+Xw/VevmY9FoHyQ+g+rrMn4j6FB4np7Z0OhdTgjx6MgQLK7jwSy1YecU1+4Asg==", "dev": true, "requires": {} }, diff --git a/src/app/mat-select-search/mat-select-search.component.scss b/src/app/mat-select-search/mat-select-search.component.scss index 48cbd1bd..a63f2ed7 100755 --- a/src/app/mat-select-search/mat-select-search.component.scss +++ b/src/app/mat-select-search/mat-select-search.component.scss @@ -5,23 +5,23 @@ * found in the LICENSE file at https://angular.io/license */ -$mat-menu-side-padding: 16px !default; $clear-button-width: 40px; $multiple-check-width: 33px; $mat-option-height: 3em; $mat-select-search-clear-x: 4px; $mat-select-search-spinner-x: 16px; -$mat-select-search-toggle-all-checkbox-x: 16px; +$mat-select-search-toggle-all-checkbox-x: 5px; +$mat-select-panel-padding: 8px; .mat-select-search-hidden { visibility: hidden; } + .mat-select-search-inner { position: absolute; top: 0; + left: 0; width: 100%; - border-bottom-width: 1px; - border-bottom-style: solid; z-index: 100; font-size: inherit; /* @@ -30,54 +30,48 @@ $mat-select-search-toggle-all-checkbox-x: 16px; TODO: implement proper theming (https://github.com/bithost-gmbh/ngx-mat-select-search/issues/34) */ box-shadow: none; - border-radius: 4px 4px 0 0; - - /* Prevent iOS scroll issue (https://github.com/bithost-gmbh/ngx-mat-select-search/issues/70)*/ - -webkit-transform: translate3d(0,0,0); &.mat-select-search-inner-multiple { - width: 100%; &.mat-select-search-inner-toggle-all { display: flex; align-items: center; } } - - .mat-input-element { - flex-basis: auto; - &:-ms-input-placeholder { - // fix IE11 not able to focus programmatically with css style -ms-user-select: none - // see https://github.com/angular/material2/issues/15093 - // needed for angular material ^7.0.0 < 8.0.0 - -ms-user-select: text; - } - } -} - -::ng-deep .mat-select-search-panel { - /* allow absolute positioning relative to outer options container */ - transform: none !important; - overflow-x: hidden; } .mat-select-search-input { - padding: 16px; - padding-right: $clear-button-width + $mat-select-search-clear-x; box-sizing: border-box; width: 100%; + border: none; + font-family: inherit; + font-size: inherit; + color: currentColor; + outline: none; + background: none; + padding: 0 $clear-button-width + $mat-select-search-clear-x 0 16px; + height: calc($mat-option-height - 1px); + line-height: calc($mat-option-height - 1px); :host-context([dir="rtl"]) & { padding-right: 16px; padding-left: $clear-button-width + $mat-select-search-clear-x; } } + +.mat-select-search-inner-toggle-all { + .mat-select-search-input { + padding-left: 5px; + } +} + .mat-select-search-no-entries-found { - padding: 16px; + padding-top: 8px; } + .mat-select-search-clear { position: absolute; right: $mat-select-search-clear-x; - top: 5px; + top: 0; :host-context([dir="rtl"]) & { right: auto; @@ -96,42 +90,32 @@ $mat-select-search-toggle-all-checkbox-x: 16px; } } -/** override styling when inside a mat-option */ -:host.mat-select-search-inside-mat-option { - .mat-select-search-input { - padding-top: 0px; - padding-bottom: 0px; - height: $mat-option-height; - line-height: $mat-option-height; - } - .mat-select-search-clear { - top: 3px; - } -} - -::ng-deep .mat-option[aria-disabled=true].contains-mat-select-search { +::ng-deep .mat-mdc-option[aria-disabled=true].contains-mat-select-search { /* let move mat-select-search at the top of the dropdown. As option is disabled, there will be no-ripple hence safe. */ - position: static; - padding: 0; + position: sticky; + top: -$mat-select-panel-padding; + z-index: 1; + opacity: 1; + margin-top: -$mat-select-panel-padding; + pointer-events: all; .mat-icon { - margin-right: 0px; - margin-left: 0px; + margin-right: 0; + margin-left: 0; } - .mat-option-pseudo-checkbox { + mat-pseudo-checkbox { display: none; } - &.mat-select-search-no-entries-found { - height: 2 * $mat-option-height; + .mdc-list-item__primary-text { + opacity: 1; } } .mat-select-search-toggle-all-checkbox { padding-left: $mat-select-search-toggle-all-checkbox-x; - padding-bottom: 2px; :host-context([dir="rtl"]) & { - padding-left: 0px; + padding-left: 0; padding-right: $mat-select-search-toggle-all-checkbox-x; } } diff --git a/src/app/mat-select-search/ngx-mat-select-search.module.ts b/src/app/mat-select-search/ngx-mat-select-search.module.ts index 3ce9a7dc..bdb7b63c 100755 --- a/src/app/mat-select-search/ngx-mat-select-search.module.ts +++ b/src/app/mat-select-search/ngx-mat-select-search.module.ts @@ -19,7 +19,7 @@ import { ReactiveFormsModule } from '@angular/forms'; import { MatSelectNoEntriesFoundDirective } from './mat-select-no-entries-found.directive'; import { MatDividerModule } from '@angular/material/divider'; -export const MatSelectSearchVersion = '6.0.1'; +export const MatSelectSearchVersion = '6.0.2'; export { MatSelectSearchClearDirective }; export { MatSelectNoEntriesFoundDirective };