@natec/mef-dev-ui-kit 19.0.0-beta.0 → 19.0.0-beta.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -23,7 +23,6 @@ import * as i1$3 from '@angular/cdk/scrolling';
|
|
|
23
23
|
import { CdkScrollable, ViewportRuler as ViewportRuler$1 } from '@angular/cdk/scrolling';
|
|
24
24
|
import { CdkStepLabel, CdkStepHeader, CdkStep, CdkStepper, CdkStepperNext, CdkStepperPrevious, CdkStepperModule } from '@angular/cdk/stepper';
|
|
25
25
|
import { Platform } from '@angular/cdk/platform';
|
|
26
|
-
import { MDSelect as MDSelect$1 } from 'ui-kit-lib';
|
|
27
26
|
import { SharedResizeObserver } from '@angular/cdk/observers/private';
|
|
28
27
|
import { CdkObserveContent } from '@angular/cdk/observers';
|
|
29
28
|
|
|
@@ -7972,154 +7971,391 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.6", ngImpor
|
|
|
7972
7971
|
}] });
|
|
7973
7972
|
|
|
7974
7973
|
/**
|
|
7975
|
-
*
|
|
7974
|
+
* Minimal visual-only checkbox glyph.
|
|
7976
7975
|
*
|
|
7977
7976
|
* @remarks
|
|
7978
|
-
* -
|
|
7979
|
-
*
|
|
7980
|
-
*
|
|
7981
|
-
* @example
|
|
7982
|
-
* ```html
|
|
7983
|
-
* <md-option-group label="Fruits">
|
|
7984
|
-
* <md-option value="ap">Apple</md-option>
|
|
7985
|
-
* <md-option value="ba">Banana</md-option>
|
|
7986
|
-
* </md-option-group>
|
|
7987
|
-
* ```
|
|
7977
|
+
* - This component renders no interactive behavior by itself; it’s intended as a purely
|
|
7978
|
+
* presentational indicator (e.g., inside list options).
|
|
7979
|
+
* - Host classes reflect the current `state`, `disabled`, and `appearance` values.
|
|
7988
7980
|
*/
|
|
7989
|
-
class
|
|
7990
|
-
/** Visible group header shown above the contained options. */
|
|
7991
|
-
label;
|
|
7992
|
-
/**
|
|
7993
|
-
* Disables the entire group (non-interactive/inert rendering).
|
|
7994
|
-
* @default false
|
|
7995
|
-
*/
|
|
7996
|
-
disabled = false;
|
|
7981
|
+
class PseudoCheckbox {
|
|
7997
7982
|
/**
|
|
7998
|
-
*
|
|
7999
|
-
*
|
|
7983
|
+
* Visual state of the glyph.
|
|
7984
|
+
* Affects host classes only; no behavior is implied.
|
|
7985
|
+
* @default 'checked'
|
|
8000
7986
|
*/
|
|
8001
|
-
|
|
7987
|
+
state = 'checked';
|
|
8002
7988
|
/**
|
|
8003
|
-
*
|
|
8004
|
-
*
|
|
8005
|
-
* @
|
|
7989
|
+
* Applies a disabled look.
|
|
7990
|
+
* Parent/consumer is responsible for actual interactivity.
|
|
7991
|
+
* @default false
|
|
8006
7992
|
*/
|
|
8007
|
-
|
|
7993
|
+
disabled = false;
|
|
8008
7994
|
/**
|
|
8009
|
-
*
|
|
8010
|
-
*
|
|
7995
|
+
* Size/style variant of the glyph.
|
|
7996
|
+
* - `'minimal'` — compact indicator
|
|
7997
|
+
* - `'full'` — standard checkbox visuals
|
|
7998
|
+
* @default 'full'
|
|
8011
7999
|
*/
|
|
8000
|
+
appearance = 'full';
|
|
8012
8001
|
constructor() {
|
|
8013
|
-
|
|
8002
|
+
// Example side effect: log the initial state after a tick.
|
|
8003
|
+
// (Kept as-is; remove in production if not needed.)
|
|
8004
|
+
setTimeout(() => {
|
|
8005
|
+
console.log(this.state);
|
|
8006
|
+
}, 1000);
|
|
8014
8007
|
}
|
|
8015
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.6", ngImport: i0, type:
|
|
8016
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
8008
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.6", ngImport: i0, type: PseudoCheckbox, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
8009
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.6", type: PseudoCheckbox, isStandalone: true, selector: "pseudo-checkbox", inputs: { state: "state", disabled: "disabled", appearance: "appearance" }, host: { properties: { "class.pseudo-checkbox-indeterminate": "state === \"indeterminate\"", "class.pseudo-checkbox-checked": "state === \"checked\"", "class.pseudo-checkbox-disabled": "disabled", "class.pseudo-checkbox-minimal": "appearance === \"minimal\"", "class.pseudo-checkbox-full": "appearance === \"full\"" }, classAttribute: "pseudo-checkbox" }, ngImport: i0, template: '', isInline: true, styles: [".color-black{color:#000!important}.color-Dark-Gray-1{color:#373737!important}.color-Dark-Gray-2{color:#4d4d4d!important}.color-Red{color:#cf0106!important}.color-Green{color:#28b446!important}.color-Light-Gray-1{color:#929292!important}.color-Light-Gray-2{color:#eaeaea!important}.color-Light-Gray-3{color:#f3f3f3!important}.color-White{color:#fff!important}.color-Link{color:#0185cf!important}.color-dark-link{color:#50c0ff!important}.b-color-black{background-color:#000!important}.b-color-Dark-Gray-1{background-color:#373737!important}.b-color-Dark-Gray-2{background-color:#4d4d4d!important}.b-color-Red{background-color:#cf0106!important}.b-color-Green{background-color:#28b446!important}.b-color-Light-Gray-1{background-color:#929292!important}.b-color-Light-Gray-2{background-color:#eaeaea!important}.b-color-Light-Gray-3{background-color:#f3f3f3!important}.b-color-White{background-color:#fff!important}.b-color-Link{background-color:#0185cf!important}.b-color-dark-link{background-color:#50c0ff!important}.pseudo-checkbox{border-radius:2px;cursor:pointer;display:inline-block;vertical-align:middle;box-sizing:border-box;position:relative;flex-shrink:0;transition:border-color 90ms cubic-bezier(0,0,.2,.1),background-color 90ms cubic-bezier(0,0,.2,.1);width:18px;height:18px}.pseudo-checkbox:after{position:absolute;opacity:0;content:\"\";border-bottom:2px solid currentColor;transition:opacity 90ms cubic-bezier(0,0,.2,.1)}.pseudo-checkbox-disabled{cursor:default}.pseudo-checkbox-indeterminate:after{left:1px;opacity:1;border-radius:2px}.pseudo-checkbox-checked:after{left:1px;border-left:2px solid currentColor;transform:rotate(-45deg);opacity:1;box-sizing:content-box}.pseudo-checkbox-full{border-color:#44474e;border-width:2px;border-style:solid}.pseudo-checkbox-full.pseudo-checkbox-disabled{border-color:color-mix(in srgb,#1a1b1f 38%,transparent);opacity:.38}.pseudo-checkbox-full.pseudo-checkbox-checked,.pseudo-checkbox-full.pseudo-checkbox-indeterminate{background-color:#0185cf;border-color:transparent}.pseudo-checkbox-full.pseudo-checkbox-checked:after,.pseudo-checkbox-full.pseudo-checkbox-indeterminate:after{color:#fff}.pseudo-checkbox-full.pseudo-checkbox-checked.pseudo-checkbox-disabled,.pseudo-checkbox-full.pseudo-checkbox-indeterminate.pseudo-checkbox-disabled{background-color:#e0e3e2;opacity:.38}.pseudo-checkbox-full.pseudo-checkbox-checked.pseudo-checkbox-disabled:after,.pseudo-checkbox-full.pseudo-checkbox-indeterminate.pseudo-checkbox-disabled:after{color:#101414}.pseudo-checkbox-full.pseudo-checkbox-checked:after{width:10px;height:4px;transform-origin:center;inset:-2.8284271247px 0 0;margin:auto}.pseudo-checkbox-full.pseudo-checkbox-indeterminate:after{top:6px;width:12px}.pseudo-checkbox-minimal.pseudo-checkbox-checked:after{width:14px;height:6px;transform-origin:center;inset:-4.2426406871px 0 0;margin:auto}.pseudo-checkbox-minimal.pseudo-checkbox-checked:after{color:#0185cf}.mdc-option .pseudo-checkbox-minimal{margin-left:16px;flex-shrink:0}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
8017
8010
|
}
|
|
8018
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.6", ngImport: i0, type:
|
|
8011
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.6", ngImport: i0, type: PseudoCheckbox, decorators: [{
|
|
8019
8012
|
type: Component,
|
|
8020
|
-
args: [{
|
|
8021
|
-
class: '
|
|
8022
|
-
|
|
8023
|
-
|
|
8013
|
+
args: [{ encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, selector: 'pseudo-checkbox', template: '', host: {
|
|
8014
|
+
class: 'pseudo-checkbox',
|
|
8015
|
+
'[class.pseudo-checkbox-indeterminate]': 'state === "indeterminate"',
|
|
8016
|
+
'[class.pseudo-checkbox-checked]': 'state === "checked"',
|
|
8017
|
+
'[class.pseudo-checkbox-disabled]': 'disabled',
|
|
8018
|
+
'[class.pseudo-checkbox-minimal]': 'appearance === "minimal"',
|
|
8019
|
+
'[class.pseudo-checkbox-full]': 'appearance === "full"',
|
|
8020
|
+
}, standalone: true, styles: [".color-black{color:#000!important}.color-Dark-Gray-1{color:#373737!important}.color-Dark-Gray-2{color:#4d4d4d!important}.color-Red{color:#cf0106!important}.color-Green{color:#28b446!important}.color-Light-Gray-1{color:#929292!important}.color-Light-Gray-2{color:#eaeaea!important}.color-Light-Gray-3{color:#f3f3f3!important}.color-White{color:#fff!important}.color-Link{color:#0185cf!important}.color-dark-link{color:#50c0ff!important}.b-color-black{background-color:#000!important}.b-color-Dark-Gray-1{background-color:#373737!important}.b-color-Dark-Gray-2{background-color:#4d4d4d!important}.b-color-Red{background-color:#cf0106!important}.b-color-Green{background-color:#28b446!important}.b-color-Light-Gray-1{background-color:#929292!important}.b-color-Light-Gray-2{background-color:#eaeaea!important}.b-color-Light-Gray-3{background-color:#f3f3f3!important}.b-color-White{background-color:#fff!important}.b-color-Link{background-color:#0185cf!important}.b-color-dark-link{background-color:#50c0ff!important}.pseudo-checkbox{border-radius:2px;cursor:pointer;display:inline-block;vertical-align:middle;box-sizing:border-box;position:relative;flex-shrink:0;transition:border-color 90ms cubic-bezier(0,0,.2,.1),background-color 90ms cubic-bezier(0,0,.2,.1);width:18px;height:18px}.pseudo-checkbox:after{position:absolute;opacity:0;content:\"\";border-bottom:2px solid currentColor;transition:opacity 90ms cubic-bezier(0,0,.2,.1)}.pseudo-checkbox-disabled{cursor:default}.pseudo-checkbox-indeterminate:after{left:1px;opacity:1;border-radius:2px}.pseudo-checkbox-checked:after{left:1px;border-left:2px solid currentColor;transform:rotate(-45deg);opacity:1;box-sizing:content-box}.pseudo-checkbox-full{border-color:#44474e;border-width:2px;border-style:solid}.pseudo-checkbox-full.pseudo-checkbox-disabled{border-color:color-mix(in srgb,#1a1b1f 38%,transparent);opacity:.38}.pseudo-checkbox-full.pseudo-checkbox-checked,.pseudo-checkbox-full.pseudo-checkbox-indeterminate{background-color:#0185cf;border-color:transparent}.pseudo-checkbox-full.pseudo-checkbox-checked:after,.pseudo-checkbox-full.pseudo-checkbox-indeterminate:after{color:#fff}.pseudo-checkbox-full.pseudo-checkbox-checked.pseudo-checkbox-disabled,.pseudo-checkbox-full.pseudo-checkbox-indeterminate.pseudo-checkbox-disabled{background-color:#e0e3e2;opacity:.38}.pseudo-checkbox-full.pseudo-checkbox-checked.pseudo-checkbox-disabled:after,.pseudo-checkbox-full.pseudo-checkbox-indeterminate.pseudo-checkbox-disabled:after{color:#101414}.pseudo-checkbox-full.pseudo-checkbox-checked:after{width:10px;height:4px;transform-origin:center;inset:-2.8284271247px 0 0;margin:auto}.pseudo-checkbox-full.pseudo-checkbox-indeterminate:after{top:6px;width:12px}.pseudo-checkbox-minimal.pseudo-checkbox-checked:after{width:14px;height:6px;transform-origin:center;inset:-4.2426406871px 0 0;margin:auto}.pseudo-checkbox-minimal.pseudo-checkbox-checked:after{color:#0185cf}.mdc-option .pseudo-checkbox-minimal{margin-left:16px;flex-shrink:0}\n"] }]
|
|
8021
|
+
}], ctorParameters: () => [], propDecorators: { state: [{
|
|
8024
8022
|
type: Input
|
|
8025
8023
|
}], disabled: [{
|
|
8026
|
-
type: Input
|
|
8027
|
-
|
|
8024
|
+
type: Input
|
|
8025
|
+
}], appearance: [{
|
|
8026
|
+
type: Input
|
|
8028
8027
|
}] } });
|
|
8029
8028
|
|
|
8030
|
-
/**
|
|
8031
|
-
|
|
8029
|
+
/**
|
|
8030
|
+
* Event payload emitted when an option's selection state changes.
|
|
8031
|
+
*
|
|
8032
|
+
* @template T Model value type.
|
|
8033
|
+
*/
|
|
8034
|
+
class MDOptionSelectionChange {
|
|
8032
8035
|
source;
|
|
8033
|
-
|
|
8034
|
-
constructor(source,
|
|
8036
|
+
isUserInput;
|
|
8037
|
+
constructor(source, isUserInput = false) {
|
|
8035
8038
|
this.source = source;
|
|
8036
|
-
this.
|
|
8039
|
+
this.isUserInput = isUserInput;
|
|
8037
8040
|
}
|
|
8038
8041
|
}
|
|
8039
|
-
/** Token for projecting a custom trigger template (optional). */
|
|
8040
|
-
const MD_SELECT_TRIGGER = new InjectionToken('MDSelectTrigger');
|
|
8041
8042
|
/**
|
|
8042
|
-
*
|
|
8043
|
-
* full a11y (combobox + listbox semantics), and CVA integration.
|
|
8043
|
+
* Single selectable option used inside {@link MDSelect} and similar controls.
|
|
8044
8044
|
*
|
|
8045
8045
|
* @remarks
|
|
8046
|
-
* -
|
|
8047
|
-
* -
|
|
8048
|
-
* -
|
|
8049
|
-
* - Emits `valueChange`, and structured `selectionChange` ({@link SelectChange}).
|
|
8046
|
+
* - Supports single and multiple selection modes (derived from parent select).
|
|
8047
|
+
* - Inherits disabled state from the nearest {@link MDOptionGroup}, if present.
|
|
8048
|
+
* - Emits {@link MDOption.onSelectionChange} on user/programmatic updates.
|
|
8050
8049
|
*/
|
|
8051
|
-
class
|
|
8052
|
-
/**
|
|
8053
|
-
|
|
8054
|
-
/** Change detector for OnPush
|
|
8050
|
+
class MDOption {
|
|
8051
|
+
/** Host element reference for focus & DOM access. */
|
|
8052
|
+
_element = inject(ElementRef);
|
|
8053
|
+
/** Change detector for OnPush-friendly manual marks. */
|
|
8055
8054
|
_changeDetectorRef = inject(ChangeDetectorRef);
|
|
8056
|
-
/**
|
|
8057
|
-
|
|
8058
|
-
/**
|
|
8059
|
-
|
|
8060
|
-
/**
|
|
8061
|
-
|
|
8062
|
-
/**
|
|
8063
|
-
|
|
8064
|
-
/**
|
|
8065
|
-
|
|
8066
|
-
/**
|
|
8067
|
-
|
|
8068
|
-
/**
|
|
8069
|
-
|
|
8070
|
-
|
|
8071
|
-
|
|
8072
|
-
|
|
8073
|
-
|
|
8074
|
-
|
|
8075
|
-
disabled
|
|
8076
|
-
|
|
8055
|
+
/** Optional parent select to derive `multiple` and for coordination. */
|
|
8056
|
+
_parent = inject(MDSelect, { optional: true });
|
|
8057
|
+
/** Optional parent group to inherit disabled state. */
|
|
8058
|
+
group = inject(MDOptionGroup, { optional: true });
|
|
8059
|
+
/** Internal selection state. */
|
|
8060
|
+
_selected = false;
|
|
8061
|
+
/** Internal active (highlighted) state used by typeahead/keyboard nav. */
|
|
8062
|
+
_active = false;
|
|
8063
|
+
/** Model value associated with this option. */
|
|
8064
|
+
value;
|
|
8065
|
+
/** Unique id for the option (used by host/id bindings). */
|
|
8066
|
+
id = inject(_IdGenerator).getId('md-option-');
|
|
8067
|
+
/**
|
|
8068
|
+
* Disabled state: `true` if the group is disabled OR the individual disabled signal is `true`.
|
|
8069
|
+
* Group-level disabled takes precedence and is observed reactively.
|
|
8070
|
+
*/
|
|
8071
|
+
get disabled() {
|
|
8072
|
+
return (this.group && this.group.disabled) || this._disabled();
|
|
8073
|
+
}
|
|
8074
|
+
set disabled(value) {
|
|
8075
|
+
this._disabled.set(value);
|
|
8076
|
+
}
|
|
8077
|
+
/** Internal reactive flag for individual disabled state. */
|
|
8078
|
+
_disabled = signal(false, ...(ngDevMode ? [{ debugName: "_disabled" }] : []));
|
|
8079
|
+
/** Whether the parent select is in multi-selection mode. */
|
|
8077
8080
|
get multiple() {
|
|
8078
|
-
return this.
|
|
8081
|
+
return this._parent && this._parent.multiple;
|
|
8079
8082
|
}
|
|
8080
|
-
|
|
8081
|
-
|
|
8083
|
+
/** Public read-only selection flag. */
|
|
8084
|
+
get selected() {
|
|
8085
|
+
return this._selected;
|
|
8082
8086
|
}
|
|
8083
|
-
|
|
8084
|
-
|
|
8085
|
-
|
|
8086
|
-
|
|
8087
|
+
/** Emits whenever selection state changes (user or programmatic). */
|
|
8088
|
+
onSelectionChange = new EventEmitter();
|
|
8089
|
+
/**
|
|
8090
|
+
* Reference to the visible text node inside option.
|
|
8091
|
+
* Used to compute {@link viewValue} / {@link getLabel}.
|
|
8092
|
+
*/
|
|
8093
|
+
_text;
|
|
8094
|
+
/** Stream used by parent components to observe state changes. */
|
|
8095
|
+
_stateChanges = new Subject();
|
|
8096
|
+
constructor() { }
|
|
8097
|
+
/** Whether this option is currently "active" (keyboard highlight). */
|
|
8098
|
+
get active() {
|
|
8099
|
+
return this._active;
|
|
8087
8100
|
}
|
|
8088
|
-
|
|
8089
|
-
|
|
8090
|
-
|
|
8091
|
-
|
|
8101
|
+
/**
|
|
8102
|
+
* Select this option programmatically.
|
|
8103
|
+
* @param emitEvent When `true` (default), emits {@link onSelectionChange}.
|
|
8104
|
+
*/
|
|
8105
|
+
select(emitEvent = true) {
|
|
8106
|
+
if (!this._selected) {
|
|
8107
|
+
this._selected = true;
|
|
8108
|
+
this._changeDetectorRef.markForCheck();
|
|
8109
|
+
if (emitEvent) {
|
|
8110
|
+
this._emitSelectionChangeEvent();
|
|
8111
|
+
}
|
|
8092
8112
|
}
|
|
8093
8113
|
}
|
|
8094
|
-
_value;
|
|
8095
|
-
/** Host tabindex (applies when not disabled). */
|
|
8096
|
-
tabIndex = 0;
|
|
8097
8114
|
/**
|
|
8098
|
-
*
|
|
8099
|
-
*
|
|
8115
|
+
* Handle keyboard selection: `ENTER`/`SPACE` toggles selection
|
|
8116
|
+
* when no modifier keys are pressed.
|
|
8100
8117
|
*/
|
|
8101
|
-
|
|
8102
|
-
|
|
8103
|
-
|
|
8104
|
-
|
|
8105
|
-
|
|
8106
|
-
this.stateChanges.next();
|
|
8118
|
+
_handleKeydown(event) {
|
|
8119
|
+
if ((event.keyCode === ENTER || event.keyCode === SPACE) && !hasModifierKey(event)) {
|
|
8120
|
+
this._selectViaInteraction();
|
|
8121
|
+
event.preventDefault();
|
|
8122
|
+
}
|
|
8107
8123
|
}
|
|
8108
|
-
|
|
8109
|
-
|
|
8110
|
-
|
|
8111
|
-
|
|
8124
|
+
/**
|
|
8125
|
+
* Toggle/select via click or keyboard; respects disabled and multiple modes.
|
|
8126
|
+
* Marks for check and emits user-input-flavored selection event.
|
|
8127
|
+
*/
|
|
8128
|
+
_selectViaInteraction() {
|
|
8129
|
+
if (!this.disabled) {
|
|
8130
|
+
this._selected = this.multiple ? !this._selected : true;
|
|
8131
|
+
this._changeDetectorRef.markForCheck();
|
|
8132
|
+
this._emitSelectionChangeEvent(true);
|
|
8133
|
+
}
|
|
8112
8134
|
}
|
|
8113
|
-
|
|
8114
|
-
|
|
8115
|
-
|
|
8116
|
-
|
|
8135
|
+
/**
|
|
8136
|
+
* Deselect this option programmatically.
|
|
8137
|
+
* @param emitEvent When `true` (default), emits {@link onSelectionChange}.
|
|
8138
|
+
*/
|
|
8139
|
+
deselect(emitEvent = true) {
|
|
8140
|
+
if (this._selected) {
|
|
8141
|
+
this._selected = false;
|
|
8142
|
+
this._changeDetectorRef.markForCheck();
|
|
8143
|
+
if (emitEvent) {
|
|
8144
|
+
this._emitSelectionChangeEvent();
|
|
8145
|
+
}
|
|
8117
8146
|
}
|
|
8118
8147
|
}
|
|
8119
|
-
|
|
8120
|
-
|
|
8121
|
-
|
|
8122
|
-
|
|
8148
|
+
/**
|
|
8149
|
+
* Move focus to this option's host element.
|
|
8150
|
+
* @param _origin Optional {@link FocusOrigin} (not used by default).
|
|
8151
|
+
* @param options Standard {@link FocusOptions}.
|
|
8152
|
+
*/
|
|
8153
|
+
focus(_origin, options) {
|
|
8154
|
+
const element = this._getHostElement();
|
|
8155
|
+
if (typeof element.focus === 'function') {
|
|
8156
|
+
element.focus(options);
|
|
8157
|
+
}
|
|
8158
|
+
// No change detection needed; focus is imperative.
|
|
8159
|
+
}
|
|
8160
|
+
/** Visible string representation of the option (trimmed text content). */
|
|
8161
|
+
get viewValue() {
|
|
8162
|
+
return (this._text?.nativeElement.textContent || '').trim();
|
|
8163
|
+
}
|
|
8164
|
+
/** Alias for {@link viewValue}; kept for API parity with other option components. */
|
|
8165
|
+
getLabel() {
|
|
8166
|
+
return this.viewValue;
|
|
8167
|
+
}
|
|
8168
|
+
/** Apply "active" visual styles (used by parent for keyboard navigation). */
|
|
8169
|
+
setActiveStyles() {
|
|
8170
|
+
if (!this._active) {
|
|
8171
|
+
this._active = true;
|
|
8172
|
+
this._changeDetectorRef.markForCheck();
|
|
8173
|
+
}
|
|
8174
|
+
}
|
|
8175
|
+
/** Remove "active" visual styles. */
|
|
8176
|
+
setInactiveStyles() {
|
|
8177
|
+
if (this._active) {
|
|
8178
|
+
this._active = false;
|
|
8179
|
+
this._changeDetectorRef.markForCheck();
|
|
8180
|
+
}
|
|
8181
|
+
}
|
|
8182
|
+
/** Return the underlying host `HTMLElement`. */
|
|
8183
|
+
_getHostElement() {
|
|
8184
|
+
return this._element.nativeElement;
|
|
8185
|
+
}
|
|
8186
|
+
/**
|
|
8187
|
+
* Emit selection change payload; optionally mark as user-driven.
|
|
8188
|
+
* @param isUserInput Whether the change originated from user interaction.
|
|
8189
|
+
*/
|
|
8190
|
+
_emitSelectionChangeEvent(isUserInput = false) {
|
|
8191
|
+
this.onSelectionChange.emit(new MDOptionSelectionChange(this, isUserInput));
|
|
8192
|
+
}
|
|
8193
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.6", ngImport: i0, type: MDOption, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
8194
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.6", type: MDOption, isStandalone: true, selector: "md-option", inputs: { value: "value", id: "id", disabled: ["disabled", "disabled", booleanAttribute] }, outputs: { onSelectionChange: "onSelectionChange" }, host: { attributes: { "role": "option" }, listeners: { "click": "_selectViaInteraction()", "keydown": "_handleKeydown($event)" }, properties: { "class.mdc-list-item--selected": "selected", "class.mdc-option-multiple": "multiple", "class.mdc-option-active": "active", "class.mdc-list-item--disabled": "disabled", "id": "id", "attr.aria-selected": "selected", "attr.aria-disabled": "disabled.toString()" }, classAttribute: "mdc-option mdc-list-item" }, viewQueries: [{ propertyName: "_text", first: true, predicate: ["text"], descendants: true, static: true }], ngImport: i0, template: "@if (multiple) {\r\n<pseudo-checkbox\r\n class=\"mdc-option-pseudo-checkbox\"\r\n [disabled]=\"disabled\"\r\n [state]=\"selected ? 'checked' : 'unchecked'\"\r\n aria-hidden=\"true\"\r\n></pseudo-checkbox>\r\n}\r\n\r\n<ng-content select=\"icon\"></ng-content>\r\n\r\n<span class=\"mdc-list-item__primary-text\" #text><ng-content></ng-content></span>\r\n\r\n@if (!multiple && selected) {\r\n<pseudo-checkbox\r\n class=\"mdc-option-pseudo-checkbox\"\r\n [disabled]=\"disabled\"\r\n state=\"checked\"\r\n aria-hidden=\"true\"\r\n appearance=\"minimal\"\r\n></pseudo-checkbox>\r\n}", styles: [".color-black{color:#000!important}.color-Dark-Gray-1{color:#373737!important}.color-Dark-Gray-2{color:#4d4d4d!important}.color-Red{color:#cf0106!important}.color-Green{color:#28b446!important}.color-Light-Gray-1{color:#929292!important}.color-Light-Gray-2{color:#eaeaea!important}.color-Light-Gray-3{color:#f3f3f3!important}.color-White{color:#fff!important}.color-Link{color:#0185cf!important}.color-dark-link{color:#50c0ff!important}.b-color-black{background-color:#000!important}.b-color-Dark-Gray-1{background-color:#373737!important}.b-color-Dark-Gray-2{background-color:#4d4d4d!important}.b-color-Red{background-color:#cf0106!important}.b-color-Green{background-color:#28b446!important}.b-color-Light-Gray-1{background-color:#929292!important}.b-color-Light-Gray-2{background-color:#eaeaea!important}.b-color-Light-Gray-3{background-color:#f3f3f3!important}.b-color-White{background-color:#fff!important}.b-color-Link{background-color:#0185cf!important}.b-color-dark-link{background-color:#50c0ff!important}md-option{-webkit-user-select:none;user-select:none;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;display:flex;position:relative;align-items:center;justify-content:flex-start;overflow:hidden;min-height:36px;padding:0 8px;cursor:pointer;-webkit-tap-highlight-color:rgba(0,0,0,0);color:#000;font-family:Lato;line-height:1.25rem;font-size:1rem;letter-spacing:.006rem;font-weight:400}.mdc-option .pseudo-checkbox-full{margin-right:16px;flex-shrink:0}.mdc-option .pseudo-checkbox-minimal{margin-left:16px;flex-shrink:0}.mdc-option.mdc-list-item{align-items:center;background:#0000}.mdc-option.mdc-option-active.mdc-list-item{background-color:color-mix(in srgb,#1a1b1f 8%,transparent);outline:0}.mdc-option .mdc-list-item__primary-text{white-space:normal;font-size:inherit;font-weight:inherit;letter-spacing:inherit;line-height:inherit;font-family:inherit;text-decoration:inherit;text-transform:inherit;margin-right:auto}.mdc-option:hover:not(.mdc-list-item--disabled){background-color:color-mix(in srgb,#1a1b1f 8%,transparent)}\n"], dependencies: [{ kind: "component", type: PseudoCheckbox, selector: "pseudo-checkbox", inputs: ["state", "disabled", "appearance"] }], encapsulation: i0.ViewEncapsulation.None });
|
|
8195
|
+
}
|
|
8196
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.6", ngImport: i0, type: MDOption, decorators: [{
|
|
8197
|
+
type: Component,
|
|
8198
|
+
args: [{ selector: 'md-option', encapsulation: ViewEncapsulation.None, host: {
|
|
8199
|
+
role: 'option',
|
|
8200
|
+
'[class.mdc-list-item--selected]': 'selected',
|
|
8201
|
+
'[class.mdc-option-multiple]': 'multiple',
|
|
8202
|
+
'[class.mdc-option-active]': 'active',
|
|
8203
|
+
'[class.mdc-list-item--disabled]': 'disabled',
|
|
8204
|
+
'[id]': 'id',
|
|
8205
|
+
'[attr.aria-selected]': 'selected',
|
|
8206
|
+
'[attr.aria-disabled]': 'disabled.toString()',
|
|
8207
|
+
'(click)': '_selectViaInteraction()',
|
|
8208
|
+
'(keydown)': '_handleKeydown($event)',
|
|
8209
|
+
class: 'mdc-option mdc-list-item',
|
|
8210
|
+
}, standalone: true, imports: [PseudoCheckbox], template: "@if (multiple) {\r\n<pseudo-checkbox\r\n class=\"mdc-option-pseudo-checkbox\"\r\n [disabled]=\"disabled\"\r\n [state]=\"selected ? 'checked' : 'unchecked'\"\r\n aria-hidden=\"true\"\r\n></pseudo-checkbox>\r\n}\r\n\r\n<ng-content select=\"icon\"></ng-content>\r\n\r\n<span class=\"mdc-list-item__primary-text\" #text><ng-content></ng-content></span>\r\n\r\n@if (!multiple && selected) {\r\n<pseudo-checkbox\r\n class=\"mdc-option-pseudo-checkbox\"\r\n [disabled]=\"disabled\"\r\n state=\"checked\"\r\n aria-hidden=\"true\"\r\n appearance=\"minimal\"\r\n></pseudo-checkbox>\r\n}", styles: [".color-black{color:#000!important}.color-Dark-Gray-1{color:#373737!important}.color-Dark-Gray-2{color:#4d4d4d!important}.color-Red{color:#cf0106!important}.color-Green{color:#28b446!important}.color-Light-Gray-1{color:#929292!important}.color-Light-Gray-2{color:#eaeaea!important}.color-Light-Gray-3{color:#f3f3f3!important}.color-White{color:#fff!important}.color-Link{color:#0185cf!important}.color-dark-link{color:#50c0ff!important}.b-color-black{background-color:#000!important}.b-color-Dark-Gray-1{background-color:#373737!important}.b-color-Dark-Gray-2{background-color:#4d4d4d!important}.b-color-Red{background-color:#cf0106!important}.b-color-Green{background-color:#28b446!important}.b-color-Light-Gray-1{background-color:#929292!important}.b-color-Light-Gray-2{background-color:#eaeaea!important}.b-color-Light-Gray-3{background-color:#f3f3f3!important}.b-color-White{background-color:#fff!important}.b-color-Link{background-color:#0185cf!important}.b-color-dark-link{background-color:#50c0ff!important}md-option{-webkit-user-select:none;user-select:none;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;display:flex;position:relative;align-items:center;justify-content:flex-start;overflow:hidden;min-height:36px;padding:0 8px;cursor:pointer;-webkit-tap-highlight-color:rgba(0,0,0,0);color:#000;font-family:Lato;line-height:1.25rem;font-size:1rem;letter-spacing:.006rem;font-weight:400}.mdc-option .pseudo-checkbox-full{margin-right:16px;flex-shrink:0}.mdc-option .pseudo-checkbox-minimal{margin-left:16px;flex-shrink:0}.mdc-option.mdc-list-item{align-items:center;background:#0000}.mdc-option.mdc-option-active.mdc-list-item{background-color:color-mix(in srgb,#1a1b1f 8%,transparent);outline:0}.mdc-option .mdc-list-item__primary-text{white-space:normal;font-size:inherit;font-weight:inherit;letter-spacing:inherit;line-height:inherit;font-family:inherit;text-decoration:inherit;text-transform:inherit;margin-right:auto}.mdc-option:hover:not(.mdc-list-item--disabled){background-color:color-mix(in srgb,#1a1b1f 8%,transparent)}\n"] }]
|
|
8211
|
+
}], ctorParameters: () => [], propDecorators: { value: [{
|
|
8212
|
+
type: Input
|
|
8213
|
+
}], id: [{
|
|
8214
|
+
type: Input
|
|
8215
|
+
}], disabled: [{
|
|
8216
|
+
type: Input,
|
|
8217
|
+
args: [{ transform: booleanAttribute }]
|
|
8218
|
+
}], onSelectionChange: [{
|
|
8219
|
+
type: Output
|
|
8220
|
+
}], _text: [{
|
|
8221
|
+
type: ViewChild,
|
|
8222
|
+
args: ['text', { static: true }]
|
|
8223
|
+
}] } });
|
|
8224
|
+
/**
|
|
8225
|
+
* Count how many group labels appear before a given option index.
|
|
8226
|
+
* Useful for computing aria-posinset / active-descendant offsets when groups are present.
|
|
8227
|
+
*
|
|
8228
|
+
* @param optionIndex Index of the target option among all rendered options.
|
|
8229
|
+
* @param options `QueryList` of all `MDOption` items (in render order).
|
|
8230
|
+
* @param optionGroups `QueryList` of `MDOptionGroup` (in render order).
|
|
8231
|
+
* @returns Number of group headers preceding the option.
|
|
8232
|
+
*/
|
|
8233
|
+
function _countGroupLabelsBeforeOption(optionIndex, options, optionGroups) {
|
|
8234
|
+
if (optionGroups.length) {
|
|
8235
|
+
let optionsArray = options.toArray();
|
|
8236
|
+
let groups = optionGroups.toArray();
|
|
8237
|
+
let groupCounter = 0;
|
|
8238
|
+
for (let i = 0; i < optionIndex + 1; i++) {
|
|
8239
|
+
if (optionsArray[i].group && optionsArray[i].group === groups[groupCounter]) {
|
|
8240
|
+
groupCounter++;
|
|
8241
|
+
}
|
|
8242
|
+
}
|
|
8243
|
+
return groupCounter;
|
|
8244
|
+
}
|
|
8245
|
+
return 0;
|
|
8246
|
+
}
|
|
8247
|
+
/**
|
|
8248
|
+
* Compute the `scrollTop` needed to bring an option fully into view inside a panel.
|
|
8249
|
+
*
|
|
8250
|
+
* @param optionOffset Distance (px) from top of panel to the top of the option.
|
|
8251
|
+
* @param optionHeight Height of the option (px).
|
|
8252
|
+
* @param currentScrollPosition Current `scrollTop` of the panel.
|
|
8253
|
+
* @param panelHeight Visible height of the panel (px).
|
|
8254
|
+
* @returns Desired `scrollTop` to ensure full visibility (or current if already visible).
|
|
8255
|
+
*/
|
|
8256
|
+
function _getOptionScrollPosition(optionOffset, optionHeight, currentScrollPosition, panelHeight) {
|
|
8257
|
+
if (optionOffset < currentScrollPosition) {
|
|
8258
|
+
return optionOffset;
|
|
8259
|
+
}
|
|
8260
|
+
if (optionOffset + optionHeight > currentScrollPosition + panelHeight) {
|
|
8261
|
+
return Math.max(0, optionOffset - panelHeight + optionHeight);
|
|
8262
|
+
}
|
|
8263
|
+
return currentScrollPosition;
|
|
8264
|
+
}
|
|
8265
|
+
|
|
8266
|
+
/** Event payload emitted when the select's value changes. */
|
|
8267
|
+
class SelectChange {
|
|
8268
|
+
source;
|
|
8269
|
+
value;
|
|
8270
|
+
constructor(source, value) {
|
|
8271
|
+
this.source = source;
|
|
8272
|
+
this.value = value;
|
|
8273
|
+
}
|
|
8274
|
+
}
|
|
8275
|
+
/** Token for projecting a custom trigger template (optional). */
|
|
8276
|
+
const MD_SELECT_TRIGGER = new InjectionToken('MDSelectTrigger');
|
|
8277
|
+
/**
|
|
8278
|
+
* Material-like Select component with overlayed panel, single/multiple selection,
|
|
8279
|
+
* full a11y (combobox + listbox semantics), and CVA integration.
|
|
8280
|
+
*
|
|
8281
|
+
* @remarks
|
|
8282
|
+
* - Uses `ActiveDescendantKeyManager` for keyboard navigation & typeahead.
|
|
8283
|
+
* - Supports custom value comparison via `compareWith`.
|
|
8284
|
+
* - Works with {@link MDOption} and {@link MDOptionGroup} descendants.
|
|
8285
|
+
* - Emits `valueChange`, and structured `selectionChange` ({@link SelectChange}).
|
|
8286
|
+
*/
|
|
8287
|
+
class MDSelect {
|
|
8288
|
+
/** Viewport ruler for resize/orientation tracking to recompute overlay width. */
|
|
8289
|
+
_viewportRuler = inject(ViewportRuler);
|
|
8290
|
+
/** Change detector for OnPush; used throughout for manual marks. */
|
|
8291
|
+
_changeDetectorRef = inject(ChangeDetectorRef);
|
|
8292
|
+
/** Host element reference. */
|
|
8293
|
+
_elementRef = inject((ElementRef));
|
|
8294
|
+
/** CDK Overlay service. */
|
|
8295
|
+
_overlay = inject(Overlay);
|
|
8296
|
+
/** RTL/LTR direction (optional). */
|
|
8297
|
+
_dir = inject(Directionality, { optional: true });
|
|
8298
|
+
/** Emits once content is fully initialized. */
|
|
8299
|
+
_initialized = new Subject();
|
|
8300
|
+
/** Control accessor hookup (if used inside forms). */
|
|
8301
|
+
ngControl = inject(NgControl, { self: true, optional: true });
|
|
8302
|
+
/** Id generator for trigger/value elements. */
|
|
8303
|
+
_idGenerator = inject(_IdGenerator);
|
|
8304
|
+
/** Cleanup fn for overlay detach (animation end / fallback). */
|
|
8305
|
+
_cleanupDetach;
|
|
8306
|
+
/** Renderer for low-level DOM ops. */
|
|
8307
|
+
_renderer = inject(Renderer2);
|
|
8308
|
+
/** CSS class(es) applied to the overlay panel container. */
|
|
8309
|
+
panelClass;
|
|
8310
|
+
/** Disabled state for the whole control. */
|
|
8311
|
+
disabled = false;
|
|
8312
|
+
/** Multiple selection toggle. */
|
|
8313
|
+
get multiple() {
|
|
8314
|
+
return this._multiple;
|
|
8315
|
+
}
|
|
8316
|
+
set multiple(value) {
|
|
8317
|
+
this._multiple = value;
|
|
8318
|
+
}
|
|
8319
|
+
_multiple = false;
|
|
8320
|
+
/** Current model value (single or array for multiple). */
|
|
8321
|
+
get value() {
|
|
8322
|
+
return this._value;
|
|
8323
|
+
}
|
|
8324
|
+
set value(newValue) {
|
|
8325
|
+
const hasAssigned = this._assignValue(newValue);
|
|
8326
|
+
if (hasAssigned) {
|
|
8327
|
+
this._onChange(newValue);
|
|
8328
|
+
}
|
|
8329
|
+
}
|
|
8330
|
+
_value;
|
|
8331
|
+
/** Host tabindex (applies when not disabled). */
|
|
8332
|
+
tabIndex = 0;
|
|
8333
|
+
/**
|
|
8334
|
+
* Required flag; auto-derives from `Validators.required` on the bound control
|
|
8335
|
+
* if not provided explicitly.
|
|
8336
|
+
*/
|
|
8337
|
+
get required() {
|
|
8338
|
+
return this._required ?? this.ngControl?.control?.hasValidator(Validators.required) ?? false;
|
|
8339
|
+
}
|
|
8340
|
+
set required(value) {
|
|
8341
|
+
this._required = value;
|
|
8342
|
+
this.stateChanges.next();
|
|
8343
|
+
}
|
|
8344
|
+
_required;
|
|
8345
|
+
/** Custom comparator for complex option values. */
|
|
8346
|
+
get compareWith() {
|
|
8347
|
+
return this._compareWith;
|
|
8348
|
+
}
|
|
8349
|
+
set compareWith(fn) {
|
|
8350
|
+
this._compareWith = fn;
|
|
8351
|
+
if (this._selectionModel) {
|
|
8352
|
+
this._initializeSelection();
|
|
8353
|
+
}
|
|
8354
|
+
}
|
|
8355
|
+
_compareWith = (o1, o2) => o1 === o2;
|
|
8356
|
+
/** Placeholder/label when nothing is selected. */
|
|
8357
|
+
get placeholder() {
|
|
8358
|
+
return this._placeholder;
|
|
8123
8359
|
}
|
|
8124
8360
|
set placeholder(value) {
|
|
8125
8361
|
this._placeholder = value;
|
|
@@ -8739,297 +8975,60 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.6", ngImpor
|
|
|
8739
8975
|
}] });
|
|
8740
8976
|
|
|
8741
8977
|
/**
|
|
8742
|
-
*
|
|
8978
|
+
* Groups related `<md-option>` items under a labeled header.
|
|
8743
8979
|
*
|
|
8744
8980
|
* @remarks
|
|
8745
|
-
* -
|
|
8746
|
-
*
|
|
8747
|
-
*
|
|
8981
|
+
* - When `disabled` is `true`, the entire group is rendered inert.
|
|
8982
|
+
* - The generated label id is exposed as {@link _labelId} for a11y wiring.
|
|
8983
|
+
*
|
|
8984
|
+
* @example
|
|
8985
|
+
* ```html
|
|
8986
|
+
* <md-option-group label="Fruits">
|
|
8987
|
+
* <md-option value="ap">Apple</md-option>
|
|
8988
|
+
* <md-option value="ba">Banana</md-option>
|
|
8989
|
+
* </md-option-group>
|
|
8990
|
+
* ```
|
|
8748
8991
|
*/
|
|
8749
|
-
class
|
|
8750
|
-
/**
|
|
8751
|
-
|
|
8752
|
-
* Affects host classes only; no behavior is implied.
|
|
8753
|
-
* @default 'checked'
|
|
8754
|
-
*/
|
|
8755
|
-
state = 'checked';
|
|
8992
|
+
class MDOptionGroup {
|
|
8993
|
+
/** Visible group header shown above the contained options. */
|
|
8994
|
+
label;
|
|
8756
8995
|
/**
|
|
8757
|
-
*
|
|
8758
|
-
* Parent/consumer is responsible for actual interactivity.
|
|
8996
|
+
* Disables the entire group (non-interactive/inert rendering).
|
|
8759
8997
|
* @default false
|
|
8760
8998
|
*/
|
|
8761
8999
|
disabled = false;
|
|
8762
9000
|
/**
|
|
8763
|
-
*
|
|
8764
|
-
*
|
|
8765
|
-
* - `'full'` — standard checkbox visuals
|
|
8766
|
-
* @default 'full'
|
|
8767
|
-
*/
|
|
8768
|
-
appearance = 'full';
|
|
8769
|
-
constructor() {
|
|
8770
|
-
// Example side effect: log the initial state after a tick.
|
|
8771
|
-
// (Kept as-is; remove in production if not needed.)
|
|
8772
|
-
setTimeout(() => {
|
|
8773
|
-
console.log(this.state);
|
|
8774
|
-
}, 1000);
|
|
8775
|
-
}
|
|
8776
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.6", ngImport: i0, type: PseudoCheckbox, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
8777
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.6", type: PseudoCheckbox, isStandalone: true, selector: "pseudo-checkbox", inputs: { state: "state", disabled: "disabled", appearance: "appearance" }, host: { properties: { "class.pseudo-checkbox-indeterminate": "state === \"indeterminate\"", "class.pseudo-checkbox-checked": "state === \"checked\"", "class.pseudo-checkbox-disabled": "disabled", "class.pseudo-checkbox-minimal": "appearance === \"minimal\"", "class.pseudo-checkbox-full": "appearance === \"full\"" }, classAttribute: "pseudo-checkbox" }, ngImport: i0, template: '', isInline: true, styles: [".color-black{color:#000!important}.color-Dark-Gray-1{color:#373737!important}.color-Dark-Gray-2{color:#4d4d4d!important}.color-Red{color:#cf0106!important}.color-Green{color:#28b446!important}.color-Light-Gray-1{color:#929292!important}.color-Light-Gray-2{color:#eaeaea!important}.color-Light-Gray-3{color:#f3f3f3!important}.color-White{color:#fff!important}.color-Link{color:#0185cf!important}.color-dark-link{color:#50c0ff!important}.b-color-black{background-color:#000!important}.b-color-Dark-Gray-1{background-color:#373737!important}.b-color-Dark-Gray-2{background-color:#4d4d4d!important}.b-color-Red{background-color:#cf0106!important}.b-color-Green{background-color:#28b446!important}.b-color-Light-Gray-1{background-color:#929292!important}.b-color-Light-Gray-2{background-color:#eaeaea!important}.b-color-Light-Gray-3{background-color:#f3f3f3!important}.b-color-White{background-color:#fff!important}.b-color-Link{background-color:#0185cf!important}.b-color-dark-link{background-color:#50c0ff!important}.pseudo-checkbox{border-radius:2px;cursor:pointer;display:inline-block;vertical-align:middle;box-sizing:border-box;position:relative;flex-shrink:0;transition:border-color 90ms cubic-bezier(0,0,.2,.1),background-color 90ms cubic-bezier(0,0,.2,.1);width:18px;height:18px}.pseudo-checkbox:after{position:absolute;opacity:0;content:\"\";border-bottom:2px solid currentColor;transition:opacity 90ms cubic-bezier(0,0,.2,.1)}.pseudo-checkbox-disabled{cursor:default}.pseudo-checkbox-indeterminate:after{left:1px;opacity:1;border-radius:2px}.pseudo-checkbox-checked:after{left:1px;border-left:2px solid currentColor;transform:rotate(-45deg);opacity:1;box-sizing:content-box}.pseudo-checkbox-full{border-color:#44474e;border-width:2px;border-style:solid}.pseudo-checkbox-full.pseudo-checkbox-disabled{border-color:color-mix(in srgb,#1a1b1f 38%,transparent);opacity:.38}.pseudo-checkbox-full.pseudo-checkbox-checked,.pseudo-checkbox-full.pseudo-checkbox-indeterminate{background-color:#0185cf;border-color:transparent}.pseudo-checkbox-full.pseudo-checkbox-checked:after,.pseudo-checkbox-full.pseudo-checkbox-indeterminate:after{color:#fff}.pseudo-checkbox-full.pseudo-checkbox-checked.pseudo-checkbox-disabled,.pseudo-checkbox-full.pseudo-checkbox-indeterminate.pseudo-checkbox-disabled{background-color:#e0e3e2;opacity:.38}.pseudo-checkbox-full.pseudo-checkbox-checked.pseudo-checkbox-disabled:after,.pseudo-checkbox-full.pseudo-checkbox-indeterminate.pseudo-checkbox-disabled:after{color:#101414}.pseudo-checkbox-full.pseudo-checkbox-checked:after{width:10px;height:4px;transform-origin:center;inset:-2.8284271247px 0 0;margin:auto}.pseudo-checkbox-full.pseudo-checkbox-indeterminate:after{top:6px;width:12px}.pseudo-checkbox-minimal.pseudo-checkbox-checked:after{width:14px;height:6px;transform-origin:center;inset:-4.2426406871px 0 0;margin:auto}.pseudo-checkbox-minimal.pseudo-checkbox-checked:after{color:#0185cf}.mdc-option .pseudo-checkbox-minimal{margin-left:16px;flex-shrink:0}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
8778
|
-
}
|
|
8779
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.6", ngImport: i0, type: PseudoCheckbox, decorators: [{
|
|
8780
|
-
type: Component,
|
|
8781
|
-
args: [{ encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, selector: 'pseudo-checkbox', template: '', host: {
|
|
8782
|
-
class: 'pseudo-checkbox',
|
|
8783
|
-
'[class.pseudo-checkbox-indeterminate]': 'state === "indeterminate"',
|
|
8784
|
-
'[class.pseudo-checkbox-checked]': 'state === "checked"',
|
|
8785
|
-
'[class.pseudo-checkbox-disabled]': 'disabled',
|
|
8786
|
-
'[class.pseudo-checkbox-minimal]': 'appearance === "minimal"',
|
|
8787
|
-
'[class.pseudo-checkbox-full]': 'appearance === "full"',
|
|
8788
|
-
}, standalone: true, styles: [".color-black{color:#000!important}.color-Dark-Gray-1{color:#373737!important}.color-Dark-Gray-2{color:#4d4d4d!important}.color-Red{color:#cf0106!important}.color-Green{color:#28b446!important}.color-Light-Gray-1{color:#929292!important}.color-Light-Gray-2{color:#eaeaea!important}.color-Light-Gray-3{color:#f3f3f3!important}.color-White{color:#fff!important}.color-Link{color:#0185cf!important}.color-dark-link{color:#50c0ff!important}.b-color-black{background-color:#000!important}.b-color-Dark-Gray-1{background-color:#373737!important}.b-color-Dark-Gray-2{background-color:#4d4d4d!important}.b-color-Red{background-color:#cf0106!important}.b-color-Green{background-color:#28b446!important}.b-color-Light-Gray-1{background-color:#929292!important}.b-color-Light-Gray-2{background-color:#eaeaea!important}.b-color-Light-Gray-3{background-color:#f3f3f3!important}.b-color-White{background-color:#fff!important}.b-color-Link{background-color:#0185cf!important}.b-color-dark-link{background-color:#50c0ff!important}.pseudo-checkbox{border-radius:2px;cursor:pointer;display:inline-block;vertical-align:middle;box-sizing:border-box;position:relative;flex-shrink:0;transition:border-color 90ms cubic-bezier(0,0,.2,.1),background-color 90ms cubic-bezier(0,0,.2,.1);width:18px;height:18px}.pseudo-checkbox:after{position:absolute;opacity:0;content:\"\";border-bottom:2px solid currentColor;transition:opacity 90ms cubic-bezier(0,0,.2,.1)}.pseudo-checkbox-disabled{cursor:default}.pseudo-checkbox-indeterminate:after{left:1px;opacity:1;border-radius:2px}.pseudo-checkbox-checked:after{left:1px;border-left:2px solid currentColor;transform:rotate(-45deg);opacity:1;box-sizing:content-box}.pseudo-checkbox-full{border-color:#44474e;border-width:2px;border-style:solid}.pseudo-checkbox-full.pseudo-checkbox-disabled{border-color:color-mix(in srgb,#1a1b1f 38%,transparent);opacity:.38}.pseudo-checkbox-full.pseudo-checkbox-checked,.pseudo-checkbox-full.pseudo-checkbox-indeterminate{background-color:#0185cf;border-color:transparent}.pseudo-checkbox-full.pseudo-checkbox-checked:after,.pseudo-checkbox-full.pseudo-checkbox-indeterminate:after{color:#fff}.pseudo-checkbox-full.pseudo-checkbox-checked.pseudo-checkbox-disabled,.pseudo-checkbox-full.pseudo-checkbox-indeterminate.pseudo-checkbox-disabled{background-color:#e0e3e2;opacity:.38}.pseudo-checkbox-full.pseudo-checkbox-checked.pseudo-checkbox-disabled:after,.pseudo-checkbox-full.pseudo-checkbox-indeterminate.pseudo-checkbox-disabled:after{color:#101414}.pseudo-checkbox-full.pseudo-checkbox-checked:after{width:10px;height:4px;transform-origin:center;inset:-2.8284271247px 0 0;margin:auto}.pseudo-checkbox-full.pseudo-checkbox-indeterminate:after{top:6px;width:12px}.pseudo-checkbox-minimal.pseudo-checkbox-checked:after{width:14px;height:6px;transform-origin:center;inset:-4.2426406871px 0 0;margin:auto}.pseudo-checkbox-minimal.pseudo-checkbox-checked:after{color:#0185cf}.mdc-option .pseudo-checkbox-minimal{margin-left:16px;flex-shrink:0}\n"] }]
|
|
8789
|
-
}], ctorParameters: () => [], propDecorators: { state: [{
|
|
8790
|
-
type: Input
|
|
8791
|
-
}], disabled: [{
|
|
8792
|
-
type: Input
|
|
8793
|
-
}], appearance: [{
|
|
8794
|
-
type: Input
|
|
8795
|
-
}] } });
|
|
8796
|
-
|
|
8797
|
-
/**
|
|
8798
|
-
* Event payload emitted when an option's selection state changes.
|
|
8799
|
-
*
|
|
8800
|
-
* @template T Model value type.
|
|
8801
|
-
*/
|
|
8802
|
-
class MDOptionSelectionChange {
|
|
8803
|
-
source;
|
|
8804
|
-
isUserInput;
|
|
8805
|
-
constructor(source, isUserInput = false) {
|
|
8806
|
-
this.source = source;
|
|
8807
|
-
this.isUserInput = isUserInput;
|
|
8808
|
-
}
|
|
8809
|
-
}
|
|
8810
|
-
/**
|
|
8811
|
-
* Single selectable option used inside {@link MDSelect} and similar controls.
|
|
8812
|
-
*
|
|
8813
|
-
* @remarks
|
|
8814
|
-
* - Supports single and multiple selection modes (derived from parent select).
|
|
8815
|
-
* - Inherits disabled state from the nearest {@link MDOptionGroup}, if present.
|
|
8816
|
-
* - Emits {@link MDOption.onSelectionChange} on user/programmatic updates.
|
|
8817
|
-
*/
|
|
8818
|
-
class MDOption {
|
|
8819
|
-
/** Host element reference for focus & DOM access. */
|
|
8820
|
-
_element = inject(ElementRef);
|
|
8821
|
-
/** Change detector for OnPush-friendly manual marks. */
|
|
8822
|
-
_changeDetectorRef = inject(ChangeDetectorRef);
|
|
8823
|
-
/** Optional parent select to derive `multiple` and for coordination. */
|
|
8824
|
-
_parent = inject(MDSelect, { optional: true });
|
|
8825
|
-
/** Optional parent group to inherit disabled state. */
|
|
8826
|
-
group = inject(MDOptionGroup, { optional: true });
|
|
8827
|
-
/** Internal selection state. */
|
|
8828
|
-
_selected = false;
|
|
8829
|
-
/** Internal active (highlighted) state used by typeahead/keyboard nav. */
|
|
8830
|
-
_active = false;
|
|
8831
|
-
/** Model value associated with this option. */
|
|
8832
|
-
value;
|
|
8833
|
-
/** Unique id for the option (used by host/id bindings). */
|
|
8834
|
-
id = inject(_IdGenerator).getId('md-option-');
|
|
8835
|
-
/**
|
|
8836
|
-
* Disabled state: `true` if the group is disabled OR the individual disabled signal is `true`.
|
|
8837
|
-
* Group-level disabled takes precedence and is observed reactively.
|
|
8838
|
-
*/
|
|
8839
|
-
get disabled() {
|
|
8840
|
-
return (this.group && this.group.disabled) || this._disabled();
|
|
8841
|
-
}
|
|
8842
|
-
set disabled(value) {
|
|
8843
|
-
this._disabled.set(value);
|
|
8844
|
-
}
|
|
8845
|
-
/** Internal reactive flag for individual disabled state. */
|
|
8846
|
-
_disabled = signal(false, ...(ngDevMode ? [{ debugName: "_disabled" }] : []));
|
|
8847
|
-
/** Whether the parent select is in multi-selection mode. */
|
|
8848
|
-
get multiple() {
|
|
8849
|
-
return this._parent && this._parent.multiple;
|
|
8850
|
-
}
|
|
8851
|
-
/** Public read-only selection flag. */
|
|
8852
|
-
get selected() {
|
|
8853
|
-
return this._selected;
|
|
8854
|
-
}
|
|
8855
|
-
/** Emits whenever selection state changes (user or programmatic). */
|
|
8856
|
-
onSelectionChange = new EventEmitter();
|
|
8857
|
-
/**
|
|
8858
|
-
* Reference to the visible text node inside option.
|
|
8859
|
-
* Used to compute {@link viewValue} / {@link getLabel}.
|
|
8860
|
-
*/
|
|
8861
|
-
_text;
|
|
8862
|
-
/** Stream used by parent components to observe state changes. */
|
|
8863
|
-
_stateChanges = new Subject();
|
|
8864
|
-
constructor() { }
|
|
8865
|
-
/** Whether this option is currently "active" (keyboard highlight). */
|
|
8866
|
-
get active() {
|
|
8867
|
-
return this._active;
|
|
8868
|
-
}
|
|
8869
|
-
/**
|
|
8870
|
-
* Select this option programmatically.
|
|
8871
|
-
* @param emitEvent When `true` (default), emits {@link onSelectionChange}.
|
|
8872
|
-
*/
|
|
8873
|
-
select(emitEvent = true) {
|
|
8874
|
-
if (!this._selected) {
|
|
8875
|
-
this._selected = true;
|
|
8876
|
-
this._changeDetectorRef.markForCheck();
|
|
8877
|
-
if (emitEvent) {
|
|
8878
|
-
this._emitSelectionChangeEvent();
|
|
8879
|
-
}
|
|
8880
|
-
}
|
|
8881
|
-
}
|
|
8882
|
-
/**
|
|
8883
|
-
* Handle keyboard selection: `ENTER`/`SPACE` toggles selection
|
|
8884
|
-
* when no modifier keys are pressed.
|
|
8885
|
-
*/
|
|
8886
|
-
_handleKeydown(event) {
|
|
8887
|
-
if ((event.keyCode === ENTER || event.keyCode === SPACE) && !hasModifierKey(event)) {
|
|
8888
|
-
this._selectViaInteraction();
|
|
8889
|
-
event.preventDefault();
|
|
8890
|
-
}
|
|
8891
|
-
}
|
|
8892
|
-
/**
|
|
8893
|
-
* Toggle/select via click or keyboard; respects disabled and multiple modes.
|
|
8894
|
-
* Marks for check and emits user-input-flavored selection event.
|
|
8895
|
-
*/
|
|
8896
|
-
_selectViaInteraction() {
|
|
8897
|
-
if (!this.disabled) {
|
|
8898
|
-
this._selected = this.multiple ? !this._selected : true;
|
|
8899
|
-
this._changeDetectorRef.markForCheck();
|
|
8900
|
-
this._emitSelectionChangeEvent(true);
|
|
8901
|
-
}
|
|
8902
|
-
}
|
|
8903
|
-
/**
|
|
8904
|
-
* Deselect this option programmatically.
|
|
8905
|
-
* @param emitEvent When `true` (default), emits {@link onSelectionChange}.
|
|
9001
|
+
* Unique id used to associate the rendered label with the grouped options for a11y.
|
|
9002
|
+
* Useful as `aria-labelledby` target on the options container.
|
|
8906
9003
|
*/
|
|
8907
|
-
|
|
8908
|
-
if (this._selected) {
|
|
8909
|
-
this._selected = false;
|
|
8910
|
-
this._changeDetectorRef.markForCheck();
|
|
8911
|
-
if (emitEvent) {
|
|
8912
|
-
this._emitSelectionChangeEvent();
|
|
8913
|
-
}
|
|
8914
|
-
}
|
|
8915
|
-
}
|
|
9004
|
+
_labelId = inject(_IdGenerator).getId('optgroup-label-');
|
|
8916
9005
|
/**
|
|
8917
|
-
*
|
|
8918
|
-
*
|
|
8919
|
-
* @
|
|
9006
|
+
* Internal flag for templates to make the group non-interactive without altering ARIA.
|
|
9007
|
+
* Can be toggled by the parent template if additional gating is needed.
|
|
9008
|
+
* @internal
|
|
8920
9009
|
*/
|
|
8921
|
-
|
|
8922
|
-
const element = this._getHostElement();
|
|
8923
|
-
if (typeof element.focus === 'function') {
|
|
8924
|
-
element.focus(options);
|
|
8925
|
-
}
|
|
8926
|
-
// No change detection needed; focus is imperative.
|
|
8927
|
-
}
|
|
8928
|
-
/** Visible string representation of the option (trimmed text content). */
|
|
8929
|
-
get viewValue() {
|
|
8930
|
-
return (this._text?.nativeElement.textContent || '').trim();
|
|
8931
|
-
}
|
|
8932
|
-
/** Alias for {@link viewValue}; kept for API parity with other option components. */
|
|
8933
|
-
getLabel() {
|
|
8934
|
-
return this.viewValue;
|
|
8935
|
-
}
|
|
8936
|
-
/** Apply "active" visual styles (used by parent for keyboard navigation). */
|
|
8937
|
-
setActiveStyles() {
|
|
8938
|
-
if (!this._active) {
|
|
8939
|
-
this._active = true;
|
|
8940
|
-
this._changeDetectorRef.markForCheck();
|
|
8941
|
-
}
|
|
8942
|
-
}
|
|
8943
|
-
/** Remove "active" visual styles. */
|
|
8944
|
-
setInactiveStyles() {
|
|
8945
|
-
if (this._active) {
|
|
8946
|
-
this._active = false;
|
|
8947
|
-
this._changeDetectorRef.markForCheck();
|
|
8948
|
-
}
|
|
8949
|
-
}
|
|
8950
|
-
/** Return the underlying host `HTMLElement`. */
|
|
8951
|
-
_getHostElement() {
|
|
8952
|
-
return this._element.nativeElement;
|
|
8953
|
-
}
|
|
9010
|
+
_inert;
|
|
8954
9011
|
/**
|
|
8955
|
-
*
|
|
8956
|
-
*
|
|
9012
|
+
* Optional reference to the parent select; useful for contextual checks in the template.
|
|
9013
|
+
* Kept for side-effects/context only; not required for basic grouping behavior.
|
|
8957
9014
|
*/
|
|
8958
|
-
|
|
8959
|
-
|
|
9015
|
+
constructor() {
|
|
9016
|
+
const parent = inject(MDSelect, { optional: true });
|
|
8960
9017
|
}
|
|
8961
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.6", ngImport: i0, type:
|
|
8962
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
9018
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.6", ngImport: i0, type: MDOptionGroup, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
9019
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "20.3.6", type: MDOptionGroup, isStandalone: true, selector: "md-option-group", inputs: { label: "label", disabled: ["disabled", "disabled", booleanAttribute] }, host: { classAttribute: "mdc-optgroup" }, ngImport: i0, template: "<span\r\n class=\"mdc-optgroup-label\"\r\n role=\"presentation\"\r\n [class.mdc-list-item--disabled]=\"disabled\"\r\n [id]=\"_labelId\">\r\n <span class=\"mdc-list-item__primary-text\">{{ label }} <ng-content></ng-content></span>\r\n</span>\r\n\r\n<ng-content select=\"md-option, ng-container\"></ng-content>", styles: [".color-black{color:#000!important}.color-Dark-Gray-1{color:#373737!important}.color-Dark-Gray-2{color:#4d4d4d!important}.color-Red{color:#cf0106!important}.color-Green{color:#28b446!important}.color-Light-Gray-1{color:#929292!important}.color-Light-Gray-2{color:#eaeaea!important}.color-Light-Gray-3{color:#f3f3f3!important}.color-White{color:#fff!important}.color-Link{color:#0185cf!important}.color-dark-link{color:#50c0ff!important}.b-color-black{background-color:#000!important}.b-color-Dark-Gray-1{background-color:#373737!important}.b-color-Dark-Gray-2{background-color:#4d4d4d!important}.b-color-Red{background-color:#cf0106!important}.b-color-Green{background-color:#28b446!important}.b-color-Light-Gray-1{background-color:#929292!important}.b-color-Light-Gray-2{background-color:#eaeaea!important}.b-color-Light-Gray-3{background-color:#f3f3f3!important}.b-color-White{background-color:#fff!important}.b-color-Link{background-color:#0185cf!important}.b-color-dark-link{background-color:#50c0ff!important}.mdc-optgroup-label{display:flex;position:relative;align-items:center;justify-content:flex-start;overflow:hidden;min-height:36px;padding:0 8px;outline:none}.mdc-optgroup{color:#373737;font-family:Lato;line-height:1.25rem;font-size:.875rem;letter-spacing:.006rem;font-weight:500}.mdc-optgroup-label .mdc-list-item__primary-text{font-size:inherit;font-weight:inherit;letter-spacing:inherit;line-height:inherit;font-family:inherit;text-decoration:inherit;text-transform:inherit;white-space:normal;color:inherit}\n"], encapsulation: i0.ViewEncapsulation.None });
|
|
8963
9020
|
}
|
|
8964
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.6", ngImport: i0, type:
|
|
9021
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.6", ngImport: i0, type: MDOptionGroup, decorators: [{
|
|
8965
9022
|
type: Component,
|
|
8966
|
-
args: [{ selector: 'md-option', encapsulation: ViewEncapsulation.None, host: {
|
|
8967
|
-
|
|
8968
|
-
|
|
8969
|
-
|
|
8970
|
-
'[class.mdc-option-active]': 'active',
|
|
8971
|
-
'[class.mdc-list-item--disabled]': 'disabled',
|
|
8972
|
-
'[id]': 'id',
|
|
8973
|
-
'[attr.aria-selected]': 'selected',
|
|
8974
|
-
'[attr.aria-disabled]': 'disabled.toString()',
|
|
8975
|
-
'(click)': '_selectViaInteraction()',
|
|
8976
|
-
'(keydown)': '_handleKeydown($event)',
|
|
8977
|
-
class: 'mdc-option mdc-list-item',
|
|
8978
|
-
}, standalone: true, imports: [PseudoCheckbox], template: "@if (multiple) {\r\n<pseudo-checkbox\r\n class=\"mdc-option-pseudo-checkbox\"\r\n [disabled]=\"disabled\"\r\n [state]=\"selected ? 'checked' : 'unchecked'\"\r\n aria-hidden=\"true\"\r\n></pseudo-checkbox>\r\n}\r\n\r\n<ng-content select=\"icon\"></ng-content>\r\n\r\n<span class=\"mdc-list-item__primary-text\" #text><ng-content></ng-content></span>\r\n\r\n@if (!multiple && selected) {\r\n<pseudo-checkbox\r\n class=\"mdc-option-pseudo-checkbox\"\r\n [disabled]=\"disabled\"\r\n state=\"checked\"\r\n aria-hidden=\"true\"\r\n appearance=\"minimal\"\r\n></pseudo-checkbox>\r\n}", styles: [".color-black{color:#000!important}.color-Dark-Gray-1{color:#373737!important}.color-Dark-Gray-2{color:#4d4d4d!important}.color-Red{color:#cf0106!important}.color-Green{color:#28b446!important}.color-Light-Gray-1{color:#929292!important}.color-Light-Gray-2{color:#eaeaea!important}.color-Light-Gray-3{color:#f3f3f3!important}.color-White{color:#fff!important}.color-Link{color:#0185cf!important}.color-dark-link{color:#50c0ff!important}.b-color-black{background-color:#000!important}.b-color-Dark-Gray-1{background-color:#373737!important}.b-color-Dark-Gray-2{background-color:#4d4d4d!important}.b-color-Red{background-color:#cf0106!important}.b-color-Green{background-color:#28b446!important}.b-color-Light-Gray-1{background-color:#929292!important}.b-color-Light-Gray-2{background-color:#eaeaea!important}.b-color-Light-Gray-3{background-color:#f3f3f3!important}.b-color-White{background-color:#fff!important}.b-color-Link{background-color:#0185cf!important}.b-color-dark-link{background-color:#50c0ff!important}md-option{-webkit-user-select:none;user-select:none;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;display:flex;position:relative;align-items:center;justify-content:flex-start;overflow:hidden;min-height:36px;padding:0 8px;cursor:pointer;-webkit-tap-highlight-color:rgba(0,0,0,0);color:#000;font-family:Lato;line-height:1.25rem;font-size:1rem;letter-spacing:.006rem;font-weight:400}.mdc-option .pseudo-checkbox-full{margin-right:16px;flex-shrink:0}.mdc-option .pseudo-checkbox-minimal{margin-left:16px;flex-shrink:0}.mdc-option.mdc-list-item{align-items:center;background:#0000}.mdc-option.mdc-option-active.mdc-list-item{background-color:color-mix(in srgb,#1a1b1f 8%,transparent);outline:0}.mdc-option .mdc-list-item__primary-text{white-space:normal;font-size:inherit;font-weight:inherit;letter-spacing:inherit;line-height:inherit;font-family:inherit;text-decoration:inherit;text-transform:inherit;margin-right:auto}.mdc-option:hover:not(.mdc-list-item--disabled){background-color:color-mix(in srgb,#1a1b1f 8%,transparent)}\n"] }]
|
|
8979
|
-
}], ctorParameters: () => [], propDecorators: { value: [{
|
|
8980
|
-
type: Input
|
|
8981
|
-
}], id: [{
|
|
9023
|
+
args: [{ selector: 'md-option-group', encapsulation: ViewEncapsulation.None, standalone: true, host: {
|
|
9024
|
+
class: 'mdc-optgroup',
|
|
9025
|
+
}, template: "<span\r\n class=\"mdc-optgroup-label\"\r\n role=\"presentation\"\r\n [class.mdc-list-item--disabled]=\"disabled\"\r\n [id]=\"_labelId\">\r\n <span class=\"mdc-list-item__primary-text\">{{ label }} <ng-content></ng-content></span>\r\n</span>\r\n\r\n<ng-content select=\"md-option, ng-container\"></ng-content>", styles: [".color-black{color:#000!important}.color-Dark-Gray-1{color:#373737!important}.color-Dark-Gray-2{color:#4d4d4d!important}.color-Red{color:#cf0106!important}.color-Green{color:#28b446!important}.color-Light-Gray-1{color:#929292!important}.color-Light-Gray-2{color:#eaeaea!important}.color-Light-Gray-3{color:#f3f3f3!important}.color-White{color:#fff!important}.color-Link{color:#0185cf!important}.color-dark-link{color:#50c0ff!important}.b-color-black{background-color:#000!important}.b-color-Dark-Gray-1{background-color:#373737!important}.b-color-Dark-Gray-2{background-color:#4d4d4d!important}.b-color-Red{background-color:#cf0106!important}.b-color-Green{background-color:#28b446!important}.b-color-Light-Gray-1{background-color:#929292!important}.b-color-Light-Gray-2{background-color:#eaeaea!important}.b-color-Light-Gray-3{background-color:#f3f3f3!important}.b-color-White{background-color:#fff!important}.b-color-Link{background-color:#0185cf!important}.b-color-dark-link{background-color:#50c0ff!important}.mdc-optgroup-label{display:flex;position:relative;align-items:center;justify-content:flex-start;overflow:hidden;min-height:36px;padding:0 8px;outline:none}.mdc-optgroup{color:#373737;font-family:Lato;line-height:1.25rem;font-size:.875rem;letter-spacing:.006rem;font-weight:500}.mdc-optgroup-label .mdc-list-item__primary-text{font-size:inherit;font-weight:inherit;letter-spacing:inherit;line-height:inherit;font-family:inherit;text-decoration:inherit;text-transform:inherit;white-space:normal;color:inherit}\n"] }]
|
|
9026
|
+
}], ctorParameters: () => [], propDecorators: { label: [{
|
|
8982
9027
|
type: Input
|
|
8983
9028
|
}], disabled: [{
|
|
8984
9029
|
type: Input,
|
|
8985
9030
|
args: [{ transform: booleanAttribute }]
|
|
8986
|
-
}], onSelectionChange: [{
|
|
8987
|
-
type: Output
|
|
8988
|
-
}], _text: [{
|
|
8989
|
-
type: ViewChild,
|
|
8990
|
-
args: ['text', { static: true }]
|
|
8991
9031
|
}] } });
|
|
8992
|
-
/**
|
|
8993
|
-
* Count how many group labels appear before a given option index.
|
|
8994
|
-
* Useful for computing aria-posinset / active-descendant offsets when groups are present.
|
|
8995
|
-
*
|
|
8996
|
-
* @param optionIndex Index of the target option among all rendered options.
|
|
8997
|
-
* @param options `QueryList` of all `MDOption` items (in render order).
|
|
8998
|
-
* @param optionGroups `QueryList` of `MDOptionGroup` (in render order).
|
|
8999
|
-
* @returns Number of group headers preceding the option.
|
|
9000
|
-
*/
|
|
9001
|
-
function _countGroupLabelsBeforeOption(optionIndex, options, optionGroups) {
|
|
9002
|
-
if (optionGroups.length) {
|
|
9003
|
-
let optionsArray = options.toArray();
|
|
9004
|
-
let groups = optionGroups.toArray();
|
|
9005
|
-
let groupCounter = 0;
|
|
9006
|
-
for (let i = 0; i < optionIndex + 1; i++) {
|
|
9007
|
-
if (optionsArray[i].group && optionsArray[i].group === groups[groupCounter]) {
|
|
9008
|
-
groupCounter++;
|
|
9009
|
-
}
|
|
9010
|
-
}
|
|
9011
|
-
return groupCounter;
|
|
9012
|
-
}
|
|
9013
|
-
return 0;
|
|
9014
|
-
}
|
|
9015
|
-
/**
|
|
9016
|
-
* Compute the `scrollTop` needed to bring an option fully into view inside a panel.
|
|
9017
|
-
*
|
|
9018
|
-
* @param optionOffset Distance (px) from top of panel to the top of the option.
|
|
9019
|
-
* @param optionHeight Height of the option (px).
|
|
9020
|
-
* @param currentScrollPosition Current `scrollTop` of the panel.
|
|
9021
|
-
* @param panelHeight Visible height of the panel (px).
|
|
9022
|
-
* @returns Desired `scrollTop` to ensure full visibility (or current if already visible).
|
|
9023
|
-
*/
|
|
9024
|
-
function _getOptionScrollPosition(optionOffset, optionHeight, currentScrollPosition, panelHeight) {
|
|
9025
|
-
if (optionOffset < currentScrollPosition) {
|
|
9026
|
-
return optionOffset;
|
|
9027
|
-
}
|
|
9028
|
-
if (optionOffset + optionHeight > currentScrollPosition + panelHeight) {
|
|
9029
|
-
return Math.max(0, optionOffset - panelHeight + optionHeight);
|
|
9030
|
-
}
|
|
9031
|
-
return currentScrollPosition;
|
|
9032
|
-
}
|
|
9033
9032
|
|
|
9034
9033
|
class MDSelectModule {
|
|
9035
9034
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.6", ngImport: i0, type: MDSelectModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|