@ng-matero/extensions 15.4.2 → 15.5.1

package/prebuilt-themes/purple-green.css

@@ -1 +1 @@
-.mat-button-loading .mdc-button__label,.mat-button-loading .mat-icon{visibility:hidden}.mat-button-loading .mat-mdc-progress-spinner{position:absolute;top:calc(50% - 12px);left:calc(50% - 12px)}.mtx-alert{background-color:#424242}.mtx-alert-info.mtx-alert{background-color:#2196f3;color:#fff}.mtx-alert-success.mtx-alert{background-color:#4caf50;color:#fff}.mtx-alert-warning.mtx-alert{background-color:#ff9800;color:#fff}.mtx-alert-danger.mtx-alert{background-color:#f44336;color:#fff}.mtx-colorpicker-toggle-active{color:#7b1fa2}.mtx-colorpicker-toggle-active.mat-accent{color:#69f0ae}.mtx-colorpicker-toggle-active.mat-warn{color:#f44336}.mtx-datetimepicker-content{background-color:#424242;color:#fff;box-shadow:0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)}.mtx-calendar-header{background-color:#7b1fa2;color:#fff}.mtx-calendar-body-label{color:rgba(255,255,255,.7)}.mtx-calendar-table-header{color:rgba(255,255,255,.5)}.mtx-calendar-body-cell-content{color:#fff}.mtx-calendar-body-cell-content.mtx-calendar-body-selected{background-color:#7b1fa2;color:#fff}.mtx-calendar-body-cell-content.mtx-calendar-body-selected.mtx-calendar-body-today{box-shadow:inset 0 0 0 1px #fff}.mtx-calendar-body-cell-content:not(.mtx-calendar-body-selected).mtx-calendar-body-today{border-color:rgba(255,255,255,.5)}.mtx-calendar-body-cell:not(.mtx-calendar-body-disabled):hover>.mtx-calendar-body-cell-content:not(.mtx-calendar-body-selected),.mtx-calendar-body-active>.mtx-calendar-body-cell-content:not(.mtx-calendar-body-selected){background-color:rgba(123,31,162,.3)}.mtx-calendar-body-disabled>.mtx-calendar-body-cell-content:not(.mtx-calendar-body-selected){color:rgba(255,255,255,.5)}.mtx-calendar-body-disabled>.mtx-calendar-body-today:not(.mtx-calendar-body-selected){border-color:rgba(255,255,255,.5)}.mtx-calendar-body-disabled>.mtx-calendar-body-selected{background-color:rgba(123,31,162,.4)}.mtx-calendar-previous-button.disabled,.mtx-calendar-next-button.disabled{color:rgba(255,255,255,.5)}.mtx-clock-wrapper{background-color:rgba(255,255,255,.12)}.mtx-clock-center{background-color:#7b1fa2}.mtx-clock-hand{background-color:#7b1fa2}.mtx-clock-hand::before{background-color:#7b1fa2}.mtx-clock-cell{color:#fff}.mtx-clock-cell.mtx-clock-cell-selected{background-color:#7b1fa2;color:#fff}.mtx-clock-cell:not(.mtx-clock-cell-selected,.mtx-clock-cell-disabled):hover{background-color:rgba(255,255,255,.04)}.mtx-clock-cell.mtx-clock-cell-disabled{color:rgba(255,255,255,.5)}.mtx-datetimepicker-toggle-active{color:#7b1fa2}.mtx-datetimepicker-toggle-active.mat-accent{color:#69f0ae}.mtx-datetimepicker-toggle-active.mat-warn{color:#f44336}.mtx-time-input{color:#fff;background-color:rgba(255,255,255,.12)}.mtx-time-input.mtx-time-input-active{color:#7b1fa2;background-color:rgba(123,31,162,.2)}.mtx-time-input.mtx-time-input-active:focus{border-color:#7b1fa2;background-color:#303030}.mtx-time-input.mtx-time-input-active:focus::placeholder{color:rgba(123,31,162,.6)}.mtx-time-input.mtx-time-input-warning{border-color:#f44336}.mtx-time-ampm .mtx-time-am,.mtx-time-ampm .mtx-time-pm{--mdc-text-button-label-text-color: rgba(255, 255, 255, 0.75);border-color:rgba(255,255,255,.5)}.mtx-time-ampm .mtx-time-am.mtx-time-ampm-active,.mtx-time-ampm .mtx-time-pm.mtx-time-ampm-active{--mdc-text-button-label-text-color: white;--mdc-typography-button-font-weight: 500;background-color:rgba(105,240,174,.2)}.mtx-calendar{font-family:Roboto, "Helvetica Neue", sans-serif}.mtx-calendar-body{font-size:13px}.mtx-calendar-body-label,.mtx-calendar-period-button{font-size:14px;font-weight:500}.mtx-calendar-table-header th{font-size:11px;font-weight:400}.mtx-clock{font-size:14px}.mtx-drawer-container{box-shadow:0px 8px 10px -5px rgba(0, 0, 0, 0.2), 0px 16px 24px 2px rgba(0, 0, 0, 0.14), 0px 6px 30px 5px rgba(0, 0, 0, 0.12);background:#424242;color:#fff}.mtx-grid{border:1px solid rgba(255,255,255,.2)}.mtx-grid .mat-table-sticky-left,.mtx-grid .mat-table-sticky-right{border-color:rgba(255,255,255,.12)}.mtx-grid .mat-mdc-table.mat-table-striped .mat-row-odd{background-color:#3a3a3a}.mtx-grid .mat-mdc-table.mat-table-hover .mat-mdc-row:hover{background-color:#2a2a2a}.mtx-grid .mat-mdc-table .mat-mdc-row.selected,.mtx-grid .mat-mdc-table .mat-mdc-row.mat-row-odd.selected{background-color:#2a2a2a}.mtx-grid .mat-mdc-table .mat-mdc-cell.selected{box-shadow:inset 0 0 0 1px #69f0ae}.mtx-grid .mat-mdc-footer-row .mat-mdc-footer-cell{border-top:1px solid rgba(255,255,255,.12);border-bottom-width:0;background-color:#212121}.mtx-grid .mat-mdc-paginator{border-top:1px solid rgba(255,255,255,.2)}.mtx-grid-toolbar{border-bottom:1px solid rgba(255,255,255,.2)}.mtx-grid-sidebar{border-color:rgba(255,255,255,.2)}.mtx-grid-statusbar{border-top:1px solid rgba(255,255,255,.2)}.mtx-grid-column-menu-item{color:#fff}.mtx-grid-column-menu-header,.mtx-grid-column-menu-footer{color:#fff;background-color:#424242}.mtx-grid-column-menu-header{border-bottom:1px solid rgba(255,255,255,.12)}.mtx-grid-column-menu-footer{border-top:1px solid rgba(255,255,255,.12)}.mat-column-resize-table.cdk-column-resize-with-resized-column{table-layout:fixed}.mat-column-resize-flex .mat-mdc-header-cell,.mat-column-resize-flex .mat-mdc-cell{box-sizing:border-box;min-width:32px}.mat-mdc-header-cell{position:relative}.mat-resizable{box-sizing:border-box}.mat-mdc-header-cell:not(.mat-resizable)::after,.mat-resizable-handle{position:absolute;bottom:0;top:0;right:0;width:1px;background:rgba(0,0,0,0);transition:background 300ms cubic-bezier(0.55, 0, 0.55, 0.2)}.mat-mdc-header-cell:not(.mat-resizable)::after{content:""}[dir=rtl] .mat-mdc-header-cell:not(.mat-resizable)::after,[dir=rtl] .mat-resizable-handle{left:0;right:auto}.mat-mdc-header-row.cdk-column-resize-hover-or-active .mat-mdc-header-cell:not(.mat-resizable)::after{background:rgba(255,255,255,.12)}.mat-mdc-header-row.cdk-column-resize-hover-or-active .mat-resizable-handle{background:#ce93d8}.mat-resizable.cdk-resizable-overlay-thumb-active>.mat-resizable-handle{opacity:0;transition:none}.mat-resizable-handle:focus,.mat-mdc-header-row.cdk-column-resize-hover-or-active .mat-resizable-handle:focus{background:#9c27b0;outline:none}.mat-column-resize-overlay-thumb{background:rgba(0,0,0,0);cursor:col-resize;height:100%;transition:background 300ms cubic-bezier(0.55, 0, 0.55, 0.2);width:100%;-webkit-user-select:none;user-select:none}.mat-column-resize-overlay-thumb:active{background:linear-gradient(90deg, transparent, transparent 7px, #9c27b0, #9c27b0 1px, transparent 8px, transparent);will-change:transform}.mtx-loader-backdrop{background-color:rgba(48,48,48,.75)}.mtx-popover-panel{color:#fff;background-color:#424242}[class*=mtx-popover] .mtx-popover-direction-arrow::before{border-color:rgba(255,255,255,.12)}[class*=mtx-popover] .mtx-popover-direction-arrow::after{border-color:#424242}[class*=mtx-popover-below] .mtx-popover-direction-arrow::before,[class*=mtx-popover-below] .mtx-popover-direction-arrow::after,[class*=mtx-popover-above] .mtx-popover-direction-arrow::before,[class*=mtx-popover-above] .mtx-popover-direction-arrow::after{border-left-color:rgba(0,0,0,0);border-right-color:rgba(0,0,0,0)}[class*=mtx-popover-before] .mtx-popover-direction-arrow::before,[class*=mtx-popover-before] .mtx-popover-direction-arrow::after,[class*=mtx-popover-after] .mtx-popover-direction-arrow::before,[class*=mtx-popover-after] .mtx-popover-direction-arrow::after{border-top-color:rgba(0,0,0,0);border-bottom-color:rgba(0,0,0,0)}.mtx-progress{background-color:rgba(255,255,255,.04)}.mtx-progress-fill-info{background-color:#2196f3;color:#fff}.mtx-progress-fill-success{background-color:#4caf50;color:#fff}.mtx-progress-fill-warning{background-color:#ff9800;color:#fff}.mtx-progress-fill-danger{background-color:#f44336;color:#fff}.ng-select .ng-select-container{color:#fff}.ng-select .ng-select-container .ng-value-container .ng-placeholder{color:rgba(255,255,255,.5)}.ng-select .ng-select-container .ng-value-container .ng-input>input{color:#fff}.ng-select.ng-select-disabled .ng-value{color:rgba(255,255,255,.5)}.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value{color:#fff;background-color:#616161;border:1px solid rgba(255,255,255,.12)}.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value.ng-value-disabled{opacity:.4}.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value .ng-value-icon:hover{background-color:rgba(255,255,255,.12)}.ng-select .ng-clear-wrapper{color:rgba(255,255,255,.7)}.ng-select .ng-clear-wrapper:hover .ng-clear{color:#f44336}.ng-select .ng-arrow-wrapper .ng-arrow{border-color:rgba(255,255,255,.7) rgba(0,0,0,0) rgba(0,0,0,0)}.ng-select.ng-select-invalid .ng-arrow-wrapper .ng-arrow{border-color:#f44336 rgba(0,0,0,0) rgba(0,0,0,0)}.ng-select.ng-select-opened .ng-arrow-wrapper .ng-arrow{border-color:rgba(0,0,0,0) rgba(0,0,0,0) rgba(255,255,255,.7)}.ng-select.ng-select-opened.ng-select-invalid .ng-arrow-wrapper .ng-arrow{border-color:rgba(0,0,0,0) rgba(0,0,0,0) #f44336}.ng-dropdown-panel{background-color:#424242}.ng-dropdown-panel.multiple .ng-option.selected{background:rgba(255,255,255,.12)}.ng-dropdown-panel.multiple .ng-option.marked{background:rgba(255,255,255,.04)}.ng-dropdown-panel .ng-dropdown-header{border-bottom:1px solid rgba(255,255,255,.12)}.ng-dropdown-panel .ng-dropdown-footer{border-top:1px solid rgba(255,255,255,.12)}.ng-dropdown-panel .ng-dropdown-panel-items .ng-optgroup{color:rgba(255,255,255,.7)}.ng-dropdown-panel .ng-dropdown-panel-items .ng-optgroup.ng-option-marked{background:rgba(255,255,255,.04)}.ng-dropdown-panel .ng-dropdown-panel-items .ng-optgroup.ng-option-selected{background:rgba(255,255,255,.12)}.ng-dropdown-panel .ng-dropdown-panel-items .ng-option{color:#fff}.ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-marked{background:rgba(255,255,255,.04)}.ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-selected{background:rgba(255,255,255,.12)}.ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-disabled{color:rgba(255,255,255,.5)}.ng-dropdown-panel .ng-dropdown-panel-items .ng-option .ng-tag-label{color:rgba(255,255,255,.5)}.mdc-text-field--outlined .ng-select{padding-top:16px;padding-bottom:16px;margin-top:-16px;margin-bottom:-16px}.ng-select{padding-top:24px;padding-bottom:8px;margin-top:-24px;margin-bottom:-8px}.mdc-text-field--no-label .ng-select{padding-top:16px;padding-bottom:16px;margin-top:-16px;margin-bottom:-16px}.mtx-slider-thumb{box-shadow:0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)}.mtx-slider-track-background{background-color:#bdbdbd}.mat-primary .mtx-slider-track-fill,.mat-primary .mtx-slider-thumb,.mat-primary .mtx-slider-thumb-label{background-color:#7b1fa2}.mat-primary .mtx-slider-thumb-label-text{color:#fff}.mat-primary .mtx-slider-focus-ring{background-color:rgba(123,31,162,.2)}.mat-accent .mtx-slider-track-fill,.mat-accent .mtx-slider-thumb,.mat-accent .mtx-slider-thumb-label{background-color:#69f0ae}.mat-accent .mtx-slider-thumb-label-text{color:rgba(0,0,0,.87)}.mat-accent .mtx-slider-focus-ring{background-color:rgba(105,240,174,.2)}.mat-warn .mtx-slider-track-fill,.mat-warn .mtx-slider-thumb,.mat-warn .mtx-slider-thumb-label{background-color:#f44336}.mat-warn .mtx-slider-thumb-label-text{color:#fff}.mat-warn .mtx-slider-focus-ring{background-color:rgba(244,67,54,.2)}.mtx-slider:hover .mtx-slider-track-background,.mtx-slider.cdk-focused .mtx-slider-track-background{background-color:rgba(255,255,255,.3)}.mtx-slider-disabled .mtx-slider-track-background{background-color:rgba(189,189,189,.54)}.mtx-slider-disabled .mtx-slider-track-fill,.mtx-slider-disabled .mtx-slider-thumb{background-color:#bdbdbd}.mtx-slider-disabled:hover .mtx-slider-track-background,.mtx-slider-disabled.cdk-focused .mtx-slider-track-background{background-color:rgba(189,189,189,.54)}.mtx-slider-min-value .mtx-slider-focus-ring{background-color:rgba(255,255,255,.12)}.mtx-slider-min-value.mtx-slider-thumb-label-showing:not(.mtx-range-slider) .mtx-slider-thumb,.mtx-slider-min-value.mtx-slider-thumb-label-showing:not(.mtx-range-slider) .mtx-slider-thumb-label{background-color:#fff}.mtx-slider-min-value.mtx-slider-thumb-label-showing:not(.mtx-range-slider).cdk-focused .mtx-slider-thumb,.mtx-slider-min-value.mtx-slider-thumb-label-showing:not(.mtx-range-slider).cdk-focused .mtx-slider-thumb-label{background-color:rgba(255,255,255,.3)}.mtx-slider-min-value:not(.mtx-slider-thumb-label-showing,.mtx-range-slider) .mtx-slider-thumb{background-color:#bdbdbd}.mtx-slider-min-value:not(.mtx-slider-thumb-label-showing,.mtx-range-slider):hover .mtx-slider-thumb,.mtx-slider-min-value:not(.mtx-slider-thumb-label-showing,.mtx-range-slider).cdk-focused .mtx-slider-thumb{background-color:rgba(255,255,255,.3)}.mtx-slider-min-value:not(.mtx-slider-thumb-label-showing,.mtx-range-slider):hover.mtx-slider-disabled .mtx-slider-thumb,.mtx-slider-min-value:not(.mtx-slider-thumb-label-showing,.mtx-range-slider).cdk-focused.mtx-slider-disabled .mtx-slider-thumb{border-color:#bdbdbd}.mtx-slider-has-ticks .mtx-slider-wrapper::after{border-color:rgba(255,255,255,.7)}.mtx-slider-horizontal .mtx-slider-ticks{background-image:repeating-linear-gradient(to right, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.7) 2px, transparent 0, transparent);background-image:repeating-linear-gradient(0.0001deg, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.7) 2px, transparent 0, transparent)}.mtx-slider-vertical .mtx-slider-ticks{background-image:repeating-linear-gradient(to bottom, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.7) 2px, transparent 0, transparent)}.mtx-slider-thumb-label-text{font-family:Roboto, "Helvetica Neue", sans-serif;font-size:12px;font-weight:400}.mtx-split>.mtx-split-gutter{background-color:rgba(255,255,255,.12)}.mtx-split>.mtx-split-gutter:hover{background-color:#7b1fa2}.mtx-split>.mtx-split-gutter.mat-accent:hover{background-color:#69f0ae}.mtx-split>.mtx-split-gutter.mat-warn:hover{background-color:#f44336}.mtx-tooltip{background:rgba(97,97,97,.9)}.mtx-tooltip{font-family:Roboto, "Helvetica Neue", sans-serif;font-size:12px;padding-top:5px;padding-bottom:5px}.mtx-tooltip-handset{font-size:14px;padding-top:8px;padding-bottom:8px}
+.mat-button-loading .mdc-button__label,.mat-button-loading .mat-icon{visibility:hidden}.mat-button-loading .mat-mdc-progress-spinner{position:absolute;top:calc(50% - 12px);left:calc(50% - 12px)}.mtx-alert{background-color:#424242}.mtx-alert-info.mtx-alert{background-color:#2196f3;color:#fff}.mtx-alert-success.mtx-alert{background-color:#4caf50;color:#fff}.mtx-alert-warning.mtx-alert{background-color:#ff9800;color:#fff}.mtx-alert-danger.mtx-alert{background-color:#f44336;color:#fff}.mtx-colorpicker-toggle-active{color:#7b1fa2}.mtx-colorpicker-toggle-active.mat-accent{color:#69f0ae}.mtx-colorpicker-toggle-active.mat-warn{color:#f44336}.mtx-datetimepicker-content{background-color:#424242;color:#fff;box-shadow:0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)}.mtx-calendar-header{background-color:#7b1fa2;color:#fff}.mtx-calendar-body-label{color:rgba(255,255,255,.7)}.mtx-calendar-table-header{color:rgba(255,255,255,.5)}.mtx-calendar-body-cell-content{color:#fff}.mtx-calendar-body-cell-content.mtx-calendar-body-selected{background-color:#7b1fa2;color:#fff}.mtx-calendar-body-cell-content.mtx-calendar-body-selected.mtx-calendar-body-today{box-shadow:inset 0 0 0 1px #fff}.mtx-calendar-body-cell-content:not(.mtx-calendar-body-selected).mtx-calendar-body-today{border-color:rgba(255,255,255,.5)}.mtx-calendar-body-cell:not(.mtx-calendar-body-disabled):hover>.mtx-calendar-body-cell-content:not(.mtx-calendar-body-selected),.mtx-calendar-body-active>.mtx-calendar-body-cell-content:not(.mtx-calendar-body-selected){background-color:rgba(123,31,162,.3)}.mtx-calendar-body-disabled>.mtx-calendar-body-cell-content:not(.mtx-calendar-body-selected){color:rgba(255,255,255,.5)}.mtx-calendar-body-disabled>.mtx-calendar-body-today:not(.mtx-calendar-body-selected){border-color:rgba(255,255,255,.5)}.mtx-calendar-body-disabled>.mtx-calendar-body-selected{background-color:rgba(123,31,162,.4)}.mtx-calendar-previous-button.disabled,.mtx-calendar-next-button.disabled{color:rgba(255,255,255,.5)}.mtx-clock-wrapper{background-color:rgba(255,255,255,.12)}.mtx-clock-center{background-color:#7b1fa2}.mtx-clock-hand{background-color:#7b1fa2}.mtx-clock-hand::before{background-color:#7b1fa2}.mtx-clock-cell{color:#fff}.mtx-clock-cell.mtx-clock-cell-selected{background-color:#7b1fa2;color:#fff}.mtx-clock-cell:not(.mtx-clock-cell-selected,.mtx-clock-cell-disabled):hover{background-color:rgba(255,255,255,.04)}.mtx-clock-cell.mtx-clock-cell-disabled{color:rgba(255,255,255,.5)}.mtx-datetimepicker-toggle-active{color:#7b1fa2}.mtx-datetimepicker-toggle-active.mat-accent{color:#69f0ae}.mtx-datetimepicker-toggle-active.mat-warn{color:#f44336}.mtx-time-input{color:#fff;background-color:rgba(255,255,255,.12)}.mtx-time-input.mtx-time-input-active{color:#7b1fa2;background-color:rgba(123,31,162,.2)}.mtx-time-input.mtx-time-input-active:focus{border-color:#7b1fa2;background-color:#303030}.mtx-time-input.mtx-time-input-active:focus::placeholder{color:rgba(123,31,162,.6)}.mtx-time-input.mtx-time-input-warning{border-color:#f44336}.mtx-time-ampm .mtx-time-am,.mtx-time-ampm .mtx-time-pm{--mdc-text-button-label-text-color: rgba(255, 255, 255, 0.75);border-color:rgba(255,255,255,.5)}.mtx-time-ampm .mtx-time-am.mtx-time-ampm-active,.mtx-time-ampm .mtx-time-pm.mtx-time-ampm-active{--mdc-text-button-label-text-color: white;--mdc-typography-button-font-weight: 500;background-color:rgba(105,240,174,.2)}.mtx-calendar{font-family:Roboto, "Helvetica Neue", sans-serif}.mtx-calendar-body{font-size:13px}.mtx-calendar-body-label,.mtx-calendar-period-button{font-size:14px;font-weight:500}.mtx-calendar-table-header th{font-size:11px;font-weight:400}.mtx-clock{font-size:14px}.mtx-drawer-container{box-shadow:0px 8px 10px -5px rgba(0, 0, 0, 0.2), 0px 16px 24px 2px rgba(0, 0, 0, 0.14), 0px 6px 30px 5px rgba(0, 0, 0, 0.12);background:#424242;color:#fff}.mtx-grid{border:1px solid rgba(255,255,255,.2)}.mtx-grid .mat-table-sticky-left,.mtx-grid .mat-table-sticky-right{border-color:rgba(255,255,255,.12)}.mtx-grid .mat-mdc-table.mat-table-striped .mat-row-odd{background-color:#3a3a3a}.mtx-grid .mat-mdc-table.mat-table-hover .mat-mdc-row:hover{background-color:#2a2a2a}.mtx-grid .mat-mdc-table .mat-mdc-row.selected,.mtx-grid .mat-mdc-table .mat-mdc-row.mat-row-odd.selected{background-color:#2a2a2a}.mtx-grid .mat-mdc-table .mat-mdc-cell.selected{box-shadow:inset 0 0 0 1px #69f0ae}.mtx-grid .mat-mdc-footer-row .mat-mdc-footer-cell{border-top:1px solid rgba(255,255,255,.12);border-bottom-width:0;background-color:#212121}.mtx-grid .mat-mdc-paginator{border-top:1px solid rgba(255,255,255,.2)}.mtx-grid-toolbar{border-bottom:1px solid rgba(255,255,255,.2)}.mtx-grid-sidebar{border-color:rgba(255,255,255,.2)}.mtx-grid-statusbar{border-top:1px solid rgba(255,255,255,.2)}.mtx-grid-column-menu-item{color:#fff}.mtx-grid-column-menu-header,.mtx-grid-column-menu-footer{color:#fff;background-color:#424242}.mtx-grid-column-menu-header{border-bottom:1px solid rgba(255,255,255,.12)}.mtx-grid-column-menu-footer{border-top:1px solid rgba(255,255,255,.12)}.mat-column-resize-table.cdk-column-resize-with-resized-column{table-layout:fixed}.mat-column-resize-flex .mat-mdc-header-cell,.mat-column-resize-flex .mat-mdc-cell{box-sizing:border-box;min-width:32px}.mat-mdc-header-cell{position:relative}.mat-resizable{box-sizing:border-box}.mat-mdc-header-cell:not(.mat-resizable)::after,.mat-resizable-handle{position:absolute;bottom:0;top:0;right:0;width:1px;background:rgba(0,0,0,0);transition:background 300ms cubic-bezier(0.55, 0, 0.55, 0.2)}.mat-mdc-header-cell:not(.mat-resizable)::after{content:""}[dir=rtl] .mat-mdc-header-cell:not(.mat-resizable)::after,[dir=rtl] .mat-resizable-handle{left:0;right:auto}.mat-mdc-header-row.cdk-column-resize-hover-or-active .mat-mdc-header-cell:not(.mat-resizable)::after{background:rgba(255,255,255,.12)}.mat-mdc-header-row.cdk-column-resize-hover-or-active .mat-resizable-handle{background:#ce93d8}.mat-resizable.cdk-resizable-overlay-thumb-active>.mat-resizable-handle{opacity:0;transition:none}.mat-resizable-handle:focus,.mat-mdc-header-row.cdk-column-resize-hover-or-active .mat-resizable-handle:focus{background:#9c27b0;outline:none}.mat-column-resize-overlay-thumb{background:rgba(0,0,0,0);cursor:col-resize;height:100%;transition:background 300ms cubic-bezier(0.55, 0, 0.55, 0.2);width:100%;-webkit-user-select:none;user-select:none}.mat-column-resize-overlay-thumb:active{background:linear-gradient(90deg, transparent, transparent 7px, #9c27b0, #9c27b0 1px, transparent 8px, transparent);will-change:transform}.mtx-loader-backdrop{background-color:rgba(48,48,48,.75)}.mtx-popover-panel{color:#fff;background-color:#424242}[class*=mtx-popover] .mtx-popover-direction-arrow::before{border-color:rgba(255,255,255,.12)}[class*=mtx-popover] .mtx-popover-direction-arrow::after{border-color:#424242}[class*=mtx-popover-below] .mtx-popover-direction-arrow::before,[class*=mtx-popover-below] .mtx-popover-direction-arrow::after,[class*=mtx-popover-above] .mtx-popover-direction-arrow::before,[class*=mtx-popover-above] .mtx-popover-direction-arrow::after{border-left-color:rgba(0,0,0,0);border-right-color:rgba(0,0,0,0)}[class*=mtx-popover-before] .mtx-popover-direction-arrow::before,[class*=mtx-popover-before] .mtx-popover-direction-arrow::after,[class*=mtx-popover-after] .mtx-popover-direction-arrow::before,[class*=mtx-popover-after] .mtx-popover-direction-arrow::after{border-top-color:rgba(0,0,0,0);border-bottom-color:rgba(0,0,0,0)}.mtx-progress{background-color:rgba(255,255,255,.04)}.mtx-progress-fill-info{background-color:#2196f3;color:#fff}.mtx-progress-fill-success{background-color:#4caf50;color:#fff}.mtx-progress-fill-warning{background-color:#ff9800;color:#fff}.mtx-progress-fill-danger{background-color:#f44336;color:#fff}.ng-select .ng-select-container{color:#fff}.ng-select .ng-select-container .ng-value-container .ng-placeholder{color:rgba(255,255,255,.5)}.ng-select .ng-select-container .ng-value-container .ng-input>input{color:#fff}.ng-select.ng-select-disabled .ng-value{color:rgba(255,255,255,.5)}.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value{color:#fff;background-color:#616161;border:1px solid rgba(255,255,255,.12)}.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value.ng-value-disabled{opacity:.4}.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value .ng-value-icon:hover{background-color:rgba(255,255,255,.12)}.ng-select .ng-clear-wrapper{color:rgba(255,255,255,.7)}.ng-select .ng-clear-wrapper:hover .ng-clear{color:#f44336}.ng-select .ng-arrow-wrapper .ng-arrow{border-color:rgba(255,255,255,.7) rgba(0,0,0,0) rgba(0,0,0,0)}.ng-select.ng-select-invalid .ng-arrow-wrapper .ng-arrow{border-color:#f44336 rgba(0,0,0,0) rgba(0,0,0,0)}.ng-select.ng-select-opened .ng-arrow-wrapper .ng-arrow{border-color:rgba(0,0,0,0) rgba(0,0,0,0) rgba(255,255,255,.7)}.ng-select.ng-select-opened.ng-select-invalid .ng-arrow-wrapper .ng-arrow{border-color:rgba(0,0,0,0) rgba(0,0,0,0) #f44336}.ng-dropdown-panel{background-color:#424242}.ng-dropdown-panel.multiple .ng-option.selected{background:rgba(255,255,255,.12)}.ng-dropdown-panel.multiple .ng-option.marked{background:rgba(255,255,255,.04)}.ng-dropdown-panel .ng-dropdown-header{border-bottom:1px solid rgba(255,255,255,.12)}.ng-dropdown-panel .ng-dropdown-footer{border-top:1px solid rgba(255,255,255,.12)}.ng-dropdown-panel .ng-dropdown-panel-items .ng-optgroup{color:rgba(255,255,255,.7)}.ng-dropdown-panel .ng-dropdown-panel-items .ng-optgroup.ng-option-marked{background:rgba(255,255,255,.04)}.ng-dropdown-panel .ng-dropdown-panel-items .ng-optgroup.ng-option-selected{background:rgba(255,255,255,.12)}.ng-dropdown-panel .ng-dropdown-panel-items .ng-option{color:#fff}.ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-marked{background:rgba(255,255,255,.04)}.ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-selected{background:rgba(255,255,255,.12)}.ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-disabled{color:rgba(255,255,255,.5)}.ng-dropdown-panel .ng-dropdown-panel-items .ng-option .ng-tag-label{color:rgba(255,255,255,.5)}.mdc-text-field--outlined .ng-select{padding-top:16px;padding-bottom:16px;margin-top:-16px;margin-bottom:-16px}.ng-select{padding-top:24px;padding-bottom:8px;margin-top:-24px;margin-bottom:-8px}.mdc-text-field--no-label .ng-select{padding-top:16px;padding-bottom:16px;margin-top:-16px;margin-bottom:-16px}.mtx-slider-thumb{box-shadow:0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)}.mtx-slider-track-background{background-color:#bdbdbd}.mat-primary .mtx-slider-track-fill,.mat-primary .mtx-slider-thumb,.mat-primary .mtx-slider-thumb-label{background-color:#7b1fa2}.mat-primary .mtx-slider-thumb-label-text{color:#fff}.mat-primary .mtx-slider-focus-ring{background-color:rgba(123,31,162,.2)}.mat-accent .mtx-slider-track-fill,.mat-accent .mtx-slider-thumb,.mat-accent .mtx-slider-thumb-label{background-color:#69f0ae}.mat-accent .mtx-slider-thumb-label-text{color:rgba(0,0,0,.87)}.mat-accent .mtx-slider-focus-ring{background-color:rgba(105,240,174,.2)}.mat-warn .mtx-slider-track-fill,.mat-warn .mtx-slider-thumb,.mat-warn .mtx-slider-thumb-label{background-color:#f44336}.mat-warn .mtx-slider-thumb-label-text{color:#fff}.mat-warn .mtx-slider-focus-ring{background-color:rgba(244,67,54,.2)}.mtx-slider:hover .mtx-slider-track-background,.mtx-slider.cdk-focused .mtx-slider-track-background{background-color:rgba(255,255,255,.3)}.mtx-slider-disabled .mtx-slider-track-background{background-color:rgba(189,189,189,.54)}.mtx-slider-disabled .mtx-slider-track-fill,.mtx-slider-disabled .mtx-slider-thumb{background-color:#bdbdbd}.mtx-slider-disabled:hover .mtx-slider-track-background,.mtx-slider-disabled.cdk-focused .mtx-slider-track-background{background-color:rgba(189,189,189,.54)}.mtx-slider-min-value .mtx-slider-focus-ring{background-color:rgba(255,255,255,.12)}.mtx-slider-min-value.mtx-slider-thumb-label-showing:not(.mtx-range-slider) .mtx-slider-thumb,.mtx-slider-min-value.mtx-slider-thumb-label-showing:not(.mtx-range-slider) .mtx-slider-thumb-label{background-color:#fff}.mtx-slider-min-value.mtx-slider-thumb-label-showing:not(.mtx-range-slider).cdk-focused .mtx-slider-thumb,.mtx-slider-min-value.mtx-slider-thumb-label-showing:not(.mtx-range-slider).cdk-focused .mtx-slider-thumb-label{background-color:rgba(255,255,255,.3)}.mtx-slider-min-value:not(.mtx-slider-thumb-label-showing,.mtx-range-slider) .mtx-slider-thumb{background-color:#bdbdbd}.mtx-slider-min-value:not(.mtx-slider-thumb-label-showing,.mtx-range-slider):hover .mtx-slider-thumb,.mtx-slider-min-value:not(.mtx-slider-thumb-label-showing,.mtx-range-slider).cdk-focused .mtx-slider-thumb{background-color:rgba(255,255,255,.3)}.mtx-slider-min-value:not(.mtx-slider-thumb-label-showing,.mtx-range-slider):hover.mtx-slider-disabled .mtx-slider-thumb,.mtx-slider-min-value:not(.mtx-slider-thumb-label-showing,.mtx-range-slider).cdk-focused.mtx-slider-disabled .mtx-slider-thumb{border-color:#bdbdbd}.mtx-slider-has-ticks .mtx-slider-wrapper::after{border-color:rgba(255,255,255,.7)}.mtx-slider-horizontal .mtx-slider-ticks{background-image:repeating-linear-gradient(to right, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.7) 2px, transparent 0, transparent);background-image:repeating-linear-gradient(0.0001deg, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.7) 2px, transparent 0, transparent)}.mtx-slider-vertical .mtx-slider-ticks{background-image:repeating-linear-gradient(to bottom, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.7) 2px, transparent 0, transparent)}.mtx-slider-thumb-label-text{font-family:Roboto, "Helvetica Neue", sans-serif;font-size:12px;font-weight:400}.mtx-split>.mtx-split-gutter{background-color:rgba(255,255,255,.12)}.mtx-split>.mtx-split-gutter:hover{background-color:#7b1fa2}.mtx-split>.mtx-split-gutter.mat-accent:hover{background-color:#69f0ae}.mtx-split>.mtx-split-gutter.mat-warn:hover{background-color:#f44336}.mtx-mdc-tooltip{--mdc-plain-tooltip-container-color:#616161;--mdc-plain-tooltip-supporting-text-color:white}.mtx-mdc-tooltip{--mdc-plain-tooltip-supporting-text-font:Roboto, sans-serif;--mdc-plain-tooltip-supporting-text-size:12px;--mdc-plain-tooltip-supporting-text-weight:400;--mdc-plain-tooltip-supporting-text-tracking:0.0333333333em}

package/select/select.scss

@@ -136,13 +136,6 @@
 }
 
 .ng-dropdown-panel {
-  left: 0;
-
-  @include rtl {
-    right: 0;
-    left: auto;
-  }
-
   &.ng-select-bottom {
     top: 100%;
     border-bottom-left-radius: 4px;

package/tooltip/_tooltip-theme.import.scss

@@ -1,3 +1 @@
-@forward 'tooltip-theme' hide $font-size, $handset-font-size, $handset-target-height,
-  $handset-vertical-padding, $target-height, $vertical-padding, color, density, theme, typography;
-@forward 'tooltip-theme' as mtx-tooltip-*;
+@forward 'tooltip-theme' as mtx-mdc-tooltip-*;

package/tooltip/_tooltip-theme.scss

@@ -1,45 +1,42 @@
 @use 'sass:map';
+@use '@material/tooltip/plain-tooltip-theme';
+@use '@material/theme/theme-color' as mdc-theme-color;
+@use '@material/typography/typography' as mdc-typography;
 @use '../core/theming/theming';
+@use '../core/theming/palette';
+@use '../core/mdc-helpers/mdc-helpers';
 @use '../core/typography/typography';
-@use '../core/typography/typography-utils';
-
-$target-height: 22px;
-$font-size: 12px;
-$vertical-padding: ($target-height - $font-size) * .5;
-
-$handset-target-height: 30px;
-$handset-font-size: 14px;
-$handset-vertical-padding: ($handset-target-height - $handset-font-size) * .5;
 
 @mixin color($config-or-theme) {
   $config: theming.get-color-config($config-or-theme);
-  $background: map.get($config, background);
-
-  .mtx-tooltip {
-    background: theming.get-color-from-palette($background, tooltip, .9);
+  @include mdc-helpers.using-mdc-theme($config) {
+    .mtx-mdc-tooltip {
+      @include plain-tooltip-theme.theme((
+        container-color: map.get(palette.$light-theme-background-palette, tooltip),
+        supporting-text-color: mdc-theme-color.prop-value(text-primary-on-dark)
+      ));
+    }
   }
 }
 
 @mixin typography($config-or-theme) {
-  $config: typography.private-typography-to-2014-config(
-    theming.get-typography-config($config-or-theme)
-  );
-
-  .mtx-tooltip {
-    font-family: typography-utils.font-family($config);
-    font-size: $font-size;
-    padding-top: $vertical-padding;
-    padding-bottom: $vertical-padding;
-  }
-
-  .mtx-tooltip-handset {
-    font-size: $handset-font-size;
-    padding-top: $handset-vertical-padding;
-    padding-bottom: $handset-vertical-padding;
+  $config: typography.private-typography-to-2018-config(
+    theming.get-typography-config($config-or-theme));
+  @include mdc-helpers.using-mdc-typography($config) {
+    .mtx-mdc-tooltip {
+      @include plain-tooltip-theme.theme((
+        supporting-text-font: mdc-typography.get-font(caption),
+        supporting-text-size: mdc-typography.get-size(caption),
+        supporting-text-weight: mdc-typography.get-weight(caption),
+        supporting-text-tracking: mdc-typography.get-tracking(caption),
+      ));
+    }
   }
 }
 
-@mixin density($config-or-theme) {}
+@mixin density($config-or-theme) {
+  $density-scale: theming.get-density-config($config-or-theme);
+}
 
 @mixin theme($theme-or-color-config) {
   $theme: theming.private-legacy-get-theme($theme-or-color-config);

package/tooltip/tooltip-animations.d.ts

@@ -1,8 +1,8 @@
 import { AnimationTriggerMetadata } from '@angular/animations';
 /**
- * Animations used by MtxTooltip.
+ * Animations used by MatTooltip.
  * @docs-private
  */
-export declare const mtxTooltipAnimations: {
+export declare const matTooltipAnimations: {
     readonly tooltipState: AnimationTriggerMetadata;
 };

package/tooltip/tooltip.d.ts

@@ -1,12 +1,9 @@
-import { AnimationEvent } from '@angular/animations';
 import { AriaDescriber, FocusMonitor } from '@angular/cdk/a11y';
 import { Directionality } from '@angular/cdk/bidi';
 import { BooleanInput, NumberInput } from '@angular/cdk/coercion';
-import { BreakpointObserver, BreakpointState } from '@angular/cdk/layout';
-import { OriginConnectionPosition, Overlay, OverlayConnectionPosition, OverlayRef, ScrollStrategy } from '@angular/cdk/overlay';
+import { ComponentType, ConnectedPosition, OriginConnectionPosition, Overlay, OverlayConnectionPosition, OverlayRef, ScrollDispatcher, ScrollStrategy } from '@angular/cdk/overlay';
 import { Platform } from '@angular/cdk/platform';
-import { ScrollDispatcher } from '@angular/cdk/scrolling';
-import { ChangeDetectorRef, ElementRef, InjectionToken, NgZone, OnDestroy, ViewContainerRef, AfterViewInit, TemplateRef } from '@angular/core';
+import { AfterViewInit, ChangeDetectorRef, ElementRef, InjectionToken, NgZone, OnDestroy, TemplateRef, ViewContainerRef } from '@angular/core';
 import { Observable } from 'rxjs';
 import * as i0 from "@angular/core";
 /** Possible positions for a tooltip. */
@@ -20,8 +17,6 @@ export type TooltipTouchGestures = 'auto' | 'on' | 'off';
 export type TooltipVisibility = 'initial' | 'visible' | 'hidden';
 /** Time in ms to throttle repositioning after scroll events. */
 export declare const SCROLL_THROTTLE_MS = 20;
-/** CSS class that will be attached to the overlay panel. */
-export declare const TOOLTIP_PANEL_CLASS = "mtx-tooltip-panel";
 /**
  * Creates an error to be thrown if the user supplied an invalid tooltip position.
  * @docs-private
@@ -37,25 +32,37 @@ export declare const MTX_TOOLTIP_SCROLL_STRATEGY_FACTORY_PROVIDER: {
     deps: (typeof Overlay)[];
     useFactory: typeof MTX_TOOLTIP_SCROLL_STRATEGY_FACTORY;
 };
+/** @docs-private */
+export declare function MTX_TOOLTIP_DEFAULT_OPTIONS_FACTORY(): MtxTooltipDefaultOptions;
+/** Injection token to be used to override the default options for `mtxTooltip`. */
+export declare const MTX_TOOLTIP_DEFAULT_OPTIONS: InjectionToken<MtxTooltipDefaultOptions>;
 /** Default `mtxTooltip` options that can be overridden. */
 export interface MtxTooltipDefaultOptions {
+    /** Default delay when the tooltip is shown. */
     showDelay: number;
+    /** Default delay when the tooltip is hidden. */
     hideDelay: number;
+    /** Default delay when hiding the tooltip on a touch device. */
     touchendHideDelay: number;
+    /** Default touch gesture handling for tooltips. */
     touchGestures?: TooltipTouchGestures;
+    /** Default position for tooltips. */
     position?: TooltipPosition;
+    /**
+     * Default value for whether tooltips should be positioned near the click or touch origin
+     * instead of outside the element bounding box.
+     */
+    positionAtOrigin?: boolean;
+    /** Disables the ability for the user to interact with the tooltip element. */
+    disableTooltipInteractivity?: boolean;
 }
-/** Injection token to be used to override the default options for `matTooltip`. */
-export declare const MTX_TOOLTIP_DEFAULT_OPTIONS: InjectionToken<MtxTooltipDefaultOptions>;
-/** @docs-private */
-export declare function MTX_TOOLTIP_DEFAULT_OPTIONS_FACTORY(): MtxTooltipDefaultOptions;
 /**
- * Directive that attaches a material design tooltip to the host element. Animates the showing and
- * hiding of a tooltip provided position (defaults to below the element).
- *
- * https://material.io/design/components/tooltips.html
+ * CSS class that will be attached to the overlay panel.
+ * @deprecated
+ * @breaking-change 13.0.0 remove this variable
  */
-export declare class MtxTooltip implements OnDestroy, AfterViewInit {
+export declare const TOOLTIP_PANEL_CLASS = "mtx-mdc-tooltip-panel";
+export declare abstract class _MtxTooltipBase<T extends _TooltipComponentBase> implements OnDestroy, AfterViewInit {
     private _overlay;
     private _elementRef;
     private _scrollDispatcher;
@@ -64,27 +71,38 @@ export declare class MtxTooltip implements OnDestroy, AfterViewInit {
     private _platform;
     private _ariaDescriber;
     private _focusMonitor;
-    private _dir;
+    protected _dir: Directionality;
     private _defaultOptions;
     _overlayRef: OverlayRef | null;
-    _tooltipInstance: TooltipComponent | null;
+    _tooltipInstance: T | null;
     private _portal;
     private _position;
+    private _positionAtOrigin;
     private _disabled;
     private _tooltipClass;
     private _scrollStrategy;
     private _viewInitialized;
     private _pointerExitEventsInitialized;
+    protected abstract readonly _tooltipComponent: ComponentType<T>;
+    protected _viewportMargin: number;
+    private _currentPosition;
+    protected readonly _cssClassPrefix: string;
     /** Allows the user to define the position of the tooltip relative to the parent element */
     get position(): TooltipPosition;
     set position(value: TooltipPosition);
+    get positionAtOrigin(): boolean;
+    set positionAtOrigin(value: BooleanInput);
     /** Disables the display of the tooltip. */
     get disabled(): boolean;
-    set disabled(value: boolean);
+    set disabled(value: BooleanInput);
     /** The default delay in ms before showing the tooltip after show is called */
-    showDelay: number;
+    get showDelay(): number;
+    set showDelay(value: NumberInput);
+    private _showDelay;
     /** The default delay in ms before hiding the tooltip after hide is called */
-    hideDelay: number;
+    get hideDelay(): number;
+    set hideDelay(value: NumberInput);
+    private _hideDelay;
     /**
      * How touch gestures should be handled by the tooltip. On touch devices the tooltip directive
      * uses a long press gesture to show and hide, however it can conflict with the native browser
@@ -104,6 +122,10 @@ export declare class MtxTooltip implements OnDestroy, AfterViewInit {
     get message(): string | TemplateRef<any>;
     set message(value: string | TemplateRef<any>);
     private _message;
+    /** Context to be passed to the tooltip. */
+    get tooltipContext(): any;
+    set tooltipContext(value: any);
+    private _tooltipContext;
     /** Classes to be passed to the tooltip. Supports the same syntax as `ngClass`. */
     get tooltipClass(): string | string[] | Set<string> | {
         [key: string]: any;
@@ -113,35 +135,40 @@ export declare class MtxTooltip implements OnDestroy, AfterViewInit {
     });
     /** Manually-bound passive event listeners. */
     private readonly _passiveListeners;
+    /** Reference to the current document. */
+    private _document;
     /** Timer started at the last `touchstart` event. */
     private _touchstartTimeout;
     /** Emits when the component is destroyed. */
     private readonly _destroyed;
-    constructor(_overlay: Overlay, _elementRef: ElementRef<HTMLElement>, _scrollDispatcher: ScrollDispatcher, _viewContainerRef: ViewContainerRef, _ngZone: NgZone, _platform: Platform, _ariaDescriber: AriaDescriber, _focusMonitor: FocusMonitor, scrollStrategy: any, _dir: Directionality, _defaultOptions: MtxTooltipDefaultOptions);
+    constructor(_overlay: Overlay, _elementRef: ElementRef<HTMLElement>, _scrollDispatcher: ScrollDispatcher, _viewContainerRef: ViewContainerRef, _ngZone: NgZone, _platform: Platform, _ariaDescriber: AriaDescriber, _focusMonitor: FocusMonitor, scrollStrategy: any, _dir: Directionality, _defaultOptions: MtxTooltipDefaultOptions, _document: any);
     ngAfterViewInit(): void;
     /**
      * Dispose the tooltip when destroyed.
      */
     ngOnDestroy(): void;
     /** Shows the tooltip after the delay in ms, defaults to tooltip-delay-show or 0ms if no input */
-    show(delay?: number): void;
+    show(delay?: number, origin?: {
+        x: number;
+        y: number;
+    }): void;
     /** Hides the tooltip after the delay in ms, defaults to tooltip-delay-hide or 0ms if no input */
     hide(delay?: number): void;
     /** Shows/hides the tooltip */
-    toggle(): void;
+    toggle(origin?: {
+        x: number;
+        y: number;
+    }): void;
     /** Returns true if the tooltip is currently visible to the user */
     _isTooltipVisible(): boolean;
-    /**
-     * Handles the keydown events on the host element.
-     * Needs to be an arrow function so that we can use it in addEventListener.
-     */
-    private _handleKeydown;
     /** Create the overlay config and position strategy */
     private _createOverlay;
     /** Detaches the currently-attached tooltip. */
     private _detach;
     /** Updates the position of the current tooltip. */
     private _updatePosition;
+    /** Adds the configured offset to a position. Used as a hook for child classes. */
+    protected _addOffset(position: ConnectedPosition): ConnectedPosition;
     /**
      * Returns the origin position and a fallback position based on the user's position preference.
      * The fallback position is the inverse of the origin (e.g. `'below' -> 'above'`).
@@ -157,49 +184,73 @@ export declare class MtxTooltip implements OnDestroy, AfterViewInit {
     };
     /** Updates the tooltip message and repositions the overlay according to the new message length */
     private _updateTooltipMessage;
+    /** Updates the tooltip context */
+    private _setTooltipContext;
     /** Updates the tooltip class */
     private _setTooltipClass;
     /** Inverts an overlay position. */
     private _invertPosition;
+    /** Updates the class on the overlay panel based on the current position of the tooltip. */
+    private _updateCurrentPositionClass;
     /** Binds the pointer events to the tooltip trigger. */
     private _setupPointerEnterEventsIfNeeded;
     private _setupPointerExitEventsIfNeeded;
     private _addListeners;
     private _platformSupportsMouseEvents;
+    /** Listener for the `wheel` event on the element. */
+    private _wheelListener;
     /** Disables the native browser gestures, based on how the tooltip has been configured. */
     private _disableNativeGesturesIfNecessary;
-    static ngAcceptInputType_disabled: BooleanInput;
-    static ngAcceptInputType_hideDelay: NumberInput;
-    static ngAcceptInputType_showDelay: NumberInput;
-    static ɵfac: i0.ɵɵFactoryDeclaration<MtxTooltip, [null, null, null, null, null, null, null, null, null, { optional: true; }, { optional: true; }]>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<MtxTooltip, "[mtxTooltip]", ["mtxTooltip"], { "position": "mtxTooltipPosition"; "disabled": "mtxTooltipDisabled"; "showDelay": "mtxTooltipShowDelay"; "hideDelay": "mtxTooltipHideDelay"; "touchGestures": "mtxTooltipTouchGestures"; "message": "mtxTooltip"; "tooltipClass": "mtxTooltipClass"; }, {}, never, never, false, never>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<_MtxTooltipBase<any>, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<_MtxTooltipBase<any>, never, never, { "position": "mtxTooltipPosition"; "positionAtOrigin": "mtxTooltipPositionAtOrigin"; "disabled": "mtxTooltipDisabled"; "showDelay": "mtxTooltipShowDelay"; "hideDelay": "mtxTooltipHideDelay"; "touchGestures": "mtxTooltipTouchGestures"; "message": "mtxTooltip"; "tooltipContext": "mtxTooltipContext"; "tooltipClass": "mtxTooltipClass"; }, {}, never, never, false, never>;
 }
 /**
- * Internal component that wraps the tooltip's content.
- * @docs-private
+ * Directive that attaches a material design tooltip to the host element. Animates the showing and
+ * hiding of a tooltip provided position (defaults to below the element).
+ *
+ * https://material.io/design/components/tooltips.html
  */
-export declare class TooltipComponent implements OnDestroy {
+export declare class MtxTooltip extends _MtxTooltipBase<TooltipComponent> {
+    protected readonly _tooltipComponent: typeof TooltipComponent;
+    protected readonly _cssClassPrefix = "mtx-mdc";
+    constructor(overlay: Overlay, elementRef: ElementRef<HTMLElement>, scrollDispatcher: ScrollDispatcher, viewContainerRef: ViewContainerRef, ngZone: NgZone, platform: Platform, ariaDescriber: AriaDescriber, focusMonitor: FocusMonitor, scrollStrategy: any, dir: Directionality, defaultOptions: MtxTooltipDefaultOptions, _document: any);
+    protected _addOffset(position: ConnectedPosition): ConnectedPosition;
+    static ɵfac: i0.ɵɵFactoryDeclaration<MtxTooltip, [null, null, null, null, null, null, null, null, null, { optional: true; }, { optional: true; }, null]>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<MtxTooltip, "[mtxTooltip]", ["mtxTooltip"], {}, {}, never, never, false, never>;
+}
+export declare abstract class _TooltipComponentBase implements OnDestroy {
     private _changeDetectorRef;
-    private _breakpointObserver;
     /** Message to display in the tooltip */
     message: string | TemplateRef<any>;
+    /** Context to be added to the tooltip */
+    tooltipContext: any;
     /** Classes to be added to the tooltip. Supports the same syntax as `ngClass`. */
     tooltipClass: string | string[] | Set<string> | {
         [key: string]: any;
     };
     /** The timeout ID of any current timer set to show the tooltip */
-    _showTimeoutId: number | null;
+    private _showTimeoutId;
     /** The timeout ID of any current timer set to hide the tooltip */
-    _hideTimeoutId: number | null;
-    /** Property watched by the animation framework to show or hide the tooltip */
-    _visibility: TooltipVisibility;
+    private _hideTimeoutId;
+    /** Element that caused the tooltip to open. */
+    _triggerElement: HTMLElement;
+    /** Amount of milliseconds to delay the closing sequence. */
+    _mouseLeaveHideDelay: number;
+    /** Whether animations are currently disabled. */
+    private _animationsDisabled;
+    /** Reference to the internal tooltip element. */
+    abstract _tooltip: ElementRef<HTMLElement>;
     /** Whether interactions on the page should close the tooltip */
     private _closeOnInteraction;
+    /** Whether the tooltip is currently visible. */
+    private _isVisible;
     /** Subject for notifying that the tooltip has been hidden from the view */
     private readonly _onHide;
-    /** Stream that emits whether the user has a handset-sized display.  */
-    _isHandset: Observable<BreakpointState>;
-    constructor(_changeDetectorRef: ChangeDetectorRef, _breakpointObserver: BreakpointObserver);
+    /** Name of the show animation and the class that toggles it. */
+    protected abstract readonly _showAnimation: string;
+    /** Name of the hide animation and the class that toggles it. */
+    protected abstract readonly _hideAnimation: string;
+    constructor(_changeDetectorRef: ChangeDetectorRef, animationMode?: string);
     /**
      * Shows the tooltip with an animation originating from the provided origin
      * @param delay Amount of milliseconds to the delay showing the tooltip.
@@ -215,8 +266,6 @@ export declare class TooltipComponent implements OnDestroy {
     /** Whether the tooltip is being displayed. */
     isVisible(): boolean;
     ngOnDestroy(): void;
-    _animationStart(): void;
-    _animationDone(event: AnimationEvent): void;
     /**
      * Interactions on the HTML body should close the tooltip immediately as defined in the
      * material design spec.
@@ -229,6 +278,39 @@ export declare class TooltipComponent implements OnDestroy {
      * can be problematic in components with OnPush change detection.
      */
     _markForCheck(): void;
-    static ɵfac: i0.ɵɵFactoryDeclaration<TooltipComponent, never>;
+    _handleMouseLeave({ relatedTarget }: MouseEvent): void;
+    /**
+     * Callback for when the timeout in this.show() gets completed.
+     * This method is only needed by the mdc-tooltip, and so it is only implemented
+     * in the mdc-tooltip, not here.
+     */
+    protected _onShow(): void;
+    /** Event listener dispatched when an animation on the tooltip finishes. */
+    _handleAnimationEnd({ animationName }: AnimationEvent): void;
+    /** Cancels any pending animation sequences. */
+    _cancelPendingAnimations(): void;
+    /** Handles the cleanup after an animation has finished. */
+    private _finalizeAnimation;
+    /** Toggles the visibility of the tooltip element. */
+    private _toggleVisibility;
+    static ɵfac: i0.ɵɵFactoryDeclaration<_TooltipComponentBase, [null, { optional: true; }]>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<_TooltipComponentBase, never, never, {}, {}, never, never, false, never>;
+}
+/**
+ * Internal component that wraps the tooltip's content.
+ * @docs-private
+ */
+export declare class TooltipComponent extends _TooltipComponentBase {
+    private _elementRef;
+    _isMultiline: boolean;
+    /** Reference to the internal tooltip element. */
+    _tooltip: ElementRef<HTMLElement>;
+    _showAnimation: string;
+    _hideAnimation: string;
+    constructor(changeDetectorRef: ChangeDetectorRef, _elementRef: ElementRef<HTMLElement>, animationMode?: string);
+    protected _onShow(): void;
+    /** Whether the tooltip text has overflown to the next line */
+    private _isTooltipMultiline;
+    static ɵfac: i0.ɵɵFactoryDeclaration<TooltipComponent, [null, null, { optional: true; }]>;
     static ɵcmp: i0.ɵɵComponentDeclaration<TooltipComponent, "mtx-tooltip-component", never, {}, {}, never, never, false, never>;
 }

package/tooltip/tooltip.scss

@@ -1,36 +1,100 @@
-@use '@angular/cdk' as cdk;
+@use '@material/tooltip/tooltip';
+@use '@material/tooltip/tooltip-theme';
+@use '@material/tooltip/plain-tooltip-theme';
+@use '../core/mdc-helpers/mdc-helpers';
 
-$mtx-tooltip-horizontal-padding: 8px;
-$mtx-tooltip-max-width: 250px;
-$mtx-tooltip-margin: 14px;
+@include mdc-helpers.disable-mdc-fallback-declarations {
+  // Only include the structural styles, because we handle the animation ourselves.
+  @include tooltip.static-styles($query: structure);
+  @include plain-tooltip-theme.theme-styles((
+    container-shape: tooltip-theme.$border-radius,
+    container-color: #fff,
+    supporting-text-color: #000,
+    supporting-text-font: inherit,
+    supporting-text-size: inherit,
+    supporting-text-tracking: inherit,
+    supporting-text-weight: inherit,
+  ));
+}
+
+.mtx-mdc-tooltip {
+  // We don't use MDC's positioning so this has to be relative.
+  position: relative;
+  transform: scale(0);
+
+  // Increases the area of the tooltip so the user's pointer can go from the trigger directly to it.
+  &::before {
+    $offset: -8px;
+
+    content: '';
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    z-index: -1;
+    position: absolute;
+
+    // Only set the offset on the side closest to the panel so we
+    // don't accidentally cover more content than we need to.
+    .mtx-mdc-tooltip-panel-below & {
+      top: $offset;
+    }
+
+    .mtx-mdc-tooltip-panel-above & {
+      bottom: $offset;
+    }
 
-$mtx-tooltip-handset-horizontal-padding: 16px;
-$mtx-tooltip-handset-margin: 24px;
+    // Note that here we use left/right instead of before/after
+    // so that we don't have to add extra styles for RTL.
+    .mtx-mdc-tooltip-panel-right & {
+      left: $offset;
+    }
+
+    .mtx-mdc-tooltip-panel-left & {
+      right: $offset;
+    }
+  }
+
+  &._mtx-animation-noopable {
+    animation: none;
+    transform: scale(1);
+  }
+}
 
-.mtx-tooltip-panel {
-  // The overlay reference updates the pointer-events style property directly on the HTMLElement
-  // depending on the state of the overlay. For tooltips the overlay panel should never enable
-  // pointer events. To overwrite the inline CSS from the overlay reference `!important` is needed.
-  pointer-events: none !important;
+.mtx-mdc-tooltip-panel-non-interactive {
+  pointer-events: none;
 }
 
-.mtx-tooltip {
-  color: white;
-  border-radius: 4px;
-  margin: $mtx-tooltip-margin;
-  max-width: $mtx-tooltip-max-width;
-  padding-left: $mtx-tooltip-horizontal-padding;
-  padding-right: $mtx-tooltip-horizontal-padding;
-  overflow: hidden;
-  text-overflow: ellipsis;
-
-  @include cdk.high-contrast(active, off) {
-    outline: solid 1px;
+// TODO(crisbeto): we may be able to use MDC directly for these animations.
+
+@keyframes mtx-mdc-tooltip-show {
+  0% {
+    opacity: 0;
+    transform: scale(.8);
+  }
+
+  100% {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+@keyframes mtx-mdc-tooltip-hide {
+  0% {
+    opacity: 1;
+    transform: scale(1);
+  }
+
+  100% {
+    opacity: 0;
+    transform: scale(.8);
   }
 }
 
-.mtx-tooltip-handset {
-  margin: $mtx-tooltip-handset-margin;
-  padding-left: $mtx-tooltip-handset-horizontal-padding;
-  padding-right: $mtx-tooltip-handset-horizontal-padding;
+.mtx-mdc-tooltip-show {
+  animation: mtx-mdc-tooltip-show 150ms cubic-bezier(0, 0, .2, 1) forwards;
+}
+
+.mtx-mdc-tooltip-hide {
+  animation: mtx-mdc-tooltip-hide 75ms cubic-bezier(.4, 0, 1, 1) forwards;
 }