main - 2dd269e docs(material/select): prevent select from jumping in custom trigger example (#29746)

Author: crisbeto

docs-content/examples-highlighted/material/select/select-custom-trigger/select-custom-trigger-example-css.html

@@ -1,4 +1,5 @@
 <span class="hljs-selector-class">.example-additional-selection</span> {
   <span class="hljs-attribute">opacity</span>: <span class="hljs-number">0.75</span>;
   <span class="hljs-attribute">font-size</span>: <span class="hljs-number">0.75em</span>;
+  <span class="hljs-attribute">line-height</span>: <span class="hljs-number">1</span>;
 }

docs-content/examples-source/material/select/select-custom-trigger/select-custom-trigger-example.css

@@ -1,4 +1,5 @@
 .example-additional-selection {
   opacity: 0.75;
   font-size: 0.75em;
+  line-height: 1;
 }

fesm2022/material/select.mjs

@@ -19,11 +19,11 @@ class SelectCustomTriggerExample {
         this.toppingList = ['Extra cheese', 'Mushroom', 'Onion', 'Pepperoni', 'Sausage', 'Tomato'];
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.0-next.3", ngImport: i0, type: SelectCustomTriggerExample, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.0-next.3", type: SelectCustomTriggerExample, isStandalone: true, selector: "select-custom-trigger-example", ngImport: i0, template: "<mat-form-field>\n  <mat-label>Toppings</mat-label>\n  <mat-select [formControl]=\"toppings\" multiple>\n    <mat-select-trigger>\n      {{toppings.value?.[0] || ''}}\n      @if ((toppings.value?.length || 0) > 1) {\n        <span class=\"example-additional-selection\">\n          (+{{(toppings.value?.length || 0) - 1}} {{toppings.value?.length === 2 ? 'other' : 'others'}})\n        </span>\n      }\n    </mat-select-trigger>\n    @for (topping of toppingList; track topping) {\n  <mat-option [value]=\"topping\">{{topping}}</mat-option>\n}\n  </mat-select>\n</mat-form-field>\n", styles: [".example-additional-selection {\n  opacity: 0.75;\n  font-size: 0.75em;\n}\n"], dependencies: [{ kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i1.MatLabel, selector: "mat-label" }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i2.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "directive", type: i2.MatSelectTrigger, selector: "mat-select-trigger" }, { kind: "component", type: i3.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.0-next.3", type: SelectCustomTriggerExample, isStandalone: true, selector: "select-custom-trigger-example", ngImport: i0, template: "<mat-form-field>\n  <mat-label>Toppings</mat-label>\n  <mat-select [formControl]=\"toppings\" multiple>\n    <mat-select-trigger>\n      {{toppings.value?.[0] || ''}}\n      @if ((toppings.value?.length || 0) > 1) {\n        <span class=\"example-additional-selection\">\n          (+{{(toppings.value?.length || 0) - 1}} {{toppings.value?.length === 2 ? 'other' : 'others'}})\n        </span>\n      }\n    </mat-select-trigger>\n    @for (topping of toppingList; track topping) {\n  <mat-option [value]=\"topping\">{{topping}}</mat-option>\n}\n  </mat-select>\n</mat-form-field>\n", styles: [".example-additional-selection {\n  opacity: 0.75;\n  font-size: 0.75em;\n  line-height: 1;\n}\n"], dependencies: [{ kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i1.MatLabel, selector: "mat-label" }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i2.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "directive", type: i2.MatSelectTrigger, selector: "mat-select-trigger" }, { kind: "component", type: i3.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0-next.3", ngImport: i0, type: SelectCustomTriggerExample, decorators: [{
             type: Component,
-            args: [{ selector: 'select-custom-trigger-example', standalone: true, imports: [MatFormFieldModule, MatSelectModule, FormsModule, ReactiveFormsModule], template: "<mat-form-field>\n  <mat-label>Toppings</mat-label>\n  <mat-select [formControl]=\"toppings\" multiple>\n    <mat-select-trigger>\n      {{toppings.value?.[0] || ''}}\n      @if ((toppings.value?.length || 0) > 1) {\n        <span class=\"example-additional-selection\">\n          (+{{(toppings.value?.length || 0) - 1}} {{toppings.value?.length === 2 ? 'other' : 'others'}})\n        </span>\n      }\n    </mat-select-trigger>\n    @for (topping of toppingList; track topping) {\n  <mat-option [value]=\"topping\">{{topping}}</mat-option>\n}\n  </mat-select>\n</mat-form-field>\n", styles: [".example-additional-selection {\n  opacity: 0.75;\n  font-size: 0.75em;\n}\n"] }]
+            args: [{ selector: 'select-custom-trigger-example', standalone: true, imports: [MatFormFieldModule, MatSelectModule, FormsModule, ReactiveFormsModule], template: "<mat-form-field>\n  <mat-label>Toppings</mat-label>\n  <mat-select [formControl]=\"toppings\" multiple>\n    <mat-select-trigger>\n      {{toppings.value?.[0] || ''}}\n      @if ((toppings.value?.length || 0) > 1) {\n        <span class=\"example-additional-selection\">\n          (+{{(toppings.value?.length || 0) - 1}} {{toppings.value?.length === 2 ? 'other' : 'others'}})\n        </span>\n      }\n    </mat-select-trigger>\n    @for (topping of toppingList; track topping) {\n  <mat-option [value]=\"topping\">{{topping}}</mat-option>\n}\n  </mat-select>\n</mat-form-field>\n", styles: [".example-additional-selection {\n  opacity: 0.75;\n  font-size: 0.75em;\n  line-height: 1;\n}\n"] }]
         }] });
 
 /** @title Disabled select */

fesm2022/material/select.mjs.map

@@ -1,6 +1,6 @@
 {
   "name": "@angular/components-examples",
-  "version": "19.0.0-next.4+sha-234e5e0",
+  "version": "19.0.0-next.4+sha-2dd269e",
   "description": "Angular Components Examples",
   "private": true,
   "repository": {
@@ -255,15 +255,15 @@
   },
   "homepage": "https://github.com/angular/components#readme",
   "peerDependencies": {
-    "@angular/cdk": "19.0.0-next.4+sha-234e5e0",
-    "@angular/cdk-experimental": "19.0.0-next.4+sha-234e5e0",
+    "@angular/cdk": "19.0.0-next.4+sha-2dd269e",
+    "@angular/cdk-experimental": "19.0.0-next.4+sha-2dd269e",
     "@angular/core": "^19.0.0-0 || ^19.1.0-0 || ^19.2.0-0 || ^19.3.0-0 || ^20.0.0-0",
     "@angular/common": "^19.0.0-0 || ^19.1.0-0 || ^19.2.0-0 || ^19.3.0-0 || ^20.0.0-0",
-    "@angular/material": "19.0.0-next.4+sha-234e5e0",
-    "@angular/material-experimental": "19.0.0-next.4+sha-234e5e0",
-    "@angular/material-moment-adapter": "19.0.0-next.4+sha-234e5e0",
-    "@angular/material-luxon-adapter": "19.0.0-next.4+sha-234e5e0",
-    "@angular/material-date-fns-adapter": "19.0.0-next.4+sha-234e5e0"
+    "@angular/material": "19.0.0-next.4+sha-2dd269e",
+    "@angular/material-experimental": "19.0.0-next.4+sha-2dd269e",
+    "@angular/material-moment-adapter": "19.0.0-next.4+sha-2dd269e",
+    "@angular/material-luxon-adapter": "19.0.0-next.4+sha-2dd269e",
+    "@angular/material-date-fns-adapter": "19.0.0-next.4+sha-2dd269e"
   },
   "dependencies": {
     "tslib": "^2.3.0"