+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.2.0-next.2", type: CdkListboxDisabledExample, isStandalone: true, selector: "cdk-listbox-disabled-example", exportAs: ["cdkListboxDisabledExample"], ngImport: i0, template: "<form>\n <p>\n <input type=\"checkbox\" id=\"can-drink\" [formControl]=\"canDrinkCtrl\"> \n <label for=\"can-drink\">I am 21 or older</label>\n </p>\n <section>\n <div class=\"example-listbox-container\" [class.example-disabled]=\"!canDrinkCtrl.value\">\n <!-- #docregion listbox -->\n <label class=\"example-listbox-label\" id=\"example-wine-type-label\">\n Wine Selection\n </label>\n <ul cdkListbox\n [cdkListboxDisabled]=\"!canDrinkCtrl.value\"\n aria-labelledby=\"example-wine-type-label\"\n class=\"example-listbox\">\n <li cdkOption=\"cabernet\"\n class=\"example-option\">\n Cabernet Sauvignon\n </li>\n <li cdkOption=\"syrah\"\n class=\"example-option\">\n Syrah\n </li>\n <li cdkOption=\"zinfandel\"\n cdkOptionDisabled\n class=\"example-option\">\n Zinfandel <span class=\"example-sold-out\">(sold out)</span>\n </li>\n <li cdkOption=\"riesling\"\n class=\"example-option\">\n Riesling\n </li>\n </ul>\n <!-- #enddocregion listbox -->\n </div>\n </section>\n</form>\n", styles: [".example-listbox-container {\n display: block;\n width: 250px;\n border: 1px solid black;\n}\n\n.example-disabled {\n border-color: rgba(0, 0, 0, 0.5);\n}\n\n.example-listbox-label {\n display: block;\n padding: 5px;\n}\n\n.example-disabled .example-listbox-label {\n opacity: 0.5;\n}\n\n.example-listbox {\n list-style: none;\n padding: 0;\n margin: 0;\n}\n\n.example-option {\n position: relative;\n padding: 5px 5px 5px 25px;\n}\n\n.example-option[aria-selected='true']::before {\n content: '';\n display: block;\n width: 20px;\n height: 20px;\n background-image: url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24\" width=\"24\"><path d=\"m9.55 18-5.7-5.7 1.425-1.425L9.55 15.15l9.175-9.175L20.15 7.4Z\"/></svg>'); /* stylelint-disable-line */\n background-size: cover;\n position: absolute;\n left: 2px;\n}\n\n.example-option[aria-disabled='true'] {\n opacity: 0.5;\n}\n\n.example-option[aria-disabled='false']:focus {\n background: rgba(0, 0, 0, 0.2);\n}\n\n.example-sold-out {\n color: red;\n font-size: 0.75em;\n vertical-align: super;\n}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3.NgForm, selector: "form:not([ngNoForm]):not([formGroup]):not([formArray]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: CdkListbox, selector: "[cdkListbox]", inputs: ["id", "tabindex", "cdkListboxValue", "cdkListboxMultiple", "cdkListboxDisabled", "cdkListboxUseActiveDescendant", "cdkListboxOrientation", "cdkListboxCompareWith", "cdkListboxNavigationWrapDisabled", "cdkListboxNavigatesDisabledOptions"], outputs: ["cdkListboxValueChange"], exportAs: ["cdkListbox"] }, { kind: "directive", type: CdkOption, selector: "[cdkOption]", inputs: ["id", "cdkOption", "cdkOptionTypeaheadLabel", "cdkOptionDisabled", "tabindex"], exportAs: ["cdkOption"] }] });
0 commit comments