https://clarity.design/chunk-PETVXCN3.js

1import{a as de}from"./chunk-MNZ2BLO4.js";import{a as y}from"./chunk-TDKEVZ4A.js";import{a as se}from"./chunk-OOV4P5UE.js";import"./chunk-YLGERXK5.js";import{a as v}from"./chunk-DEN33KKN.js";import"./chunk-GEXPUMUX.js";import{b as ce}from"./chunk-7ZGOLTZD.js";import{a as E,b as re,c as ae,d as me}from"./chunk-HMA3OSKG.js";import"./chunk-OBR75ZGB.js";import{a as f}from"./chunk-LB2BUUS4.js";import"./chunk-VLFEXYCY.js";import{$c as A,Ab as s,Bb as m,Ca as M,Cb as c,Da as O,Ga as B,Gh as Z,Hh as $,Ih as ee,Kg as Y,Lg as j,Mg as K,Oc as N,Og as J,Qg as Q,Rc as k,Rg as X,Ta as a,Td as U,U as T,Ua as t,Va as n,Vc as W,Wa as r,Wc as L,Yc as F,Zd as R,_d as G,ad as V,ai as te,bi as ne,ci as ie,ck as oe,d as x,f as h,h as S,jd as I,ji as le,kd as H,ld as z,md as P,od as q,pc as D,qb as _,ra as o,tb as e,ud as g}from"./chunk-MFI2B7BD.js";var pe={};h(pe,{default:()=>we});var we,ue=x(()=>{we=`<select clrSelect name="options" [(ngModel)]="selectedOption">
2  <option value="one">One</option>
3  <option value="two">Two</option>
4  <option value="three">Three</option>
5</select>`});var xe={};h(xe,{default:()=>Te});var Te,he=x(()=>{Te=`<clr-select-container>
6  <label>I've got some options</label>
7  <select clrSelect name="options" [(ngModel)]="selectedOption" required>
8    <option value="one">One</option>
9    <option value="two">Two</option>
10    <option value="three">Three</option>
11  </select>
12  <clr-control-helper>Helper text</clr-control-helper>
13  <clr-control-error>This field is required!</clr-control-error>
14</clr-select-container>`});var Se={};h(Se,{default:()=>Me});var Me,ge=x(()=>{Me=`<clr-select-container>
15  <label>I've got some options</label>
16  <select clrSelect name="options" [(ngModel)]="selectedOption">
17    <option value="one">One</option>
18    <option value="two">Two</option>
19    <option value="three">Three</option>
20  </select>
21</clr-select-container>`});var ve={};h(ve,{default:()=>Oe});var Oe,fe=x(()=>{Oe=`<div class="clr-select-wrapper">
22  <select id="select-basic" class="clr-select">
23    <option value="1">One</option>
24    <option value="2">Two</option>
25    <option value="3">Three</option>
26  </select>
27</div>`});var Ee={};h(Ee,{default:()=>Be});var Be,ye=x(()=>{Be=`<div class="clr-form-control">
28  <label for="select-error" class="clr-control-label">Basic select</label>
29  <div class="clr-control-container clr-error">
30    <div class="clr-select-wrapper">
31      <select id="select-error" class="clr-select">
32        <option value="1">One</option>
33        <option value="2">Two</option>
34        <option value="3">Three</option>
35      </select>
36    </div>
37    <div class="clr-subtext-wrapper error">
38      <cds-icon class="clr-validate-icon" shape="error-standard" status="danger"></cds-icon>
39      <span class="clr-subtext">Error message</span>
40    </div>
41  </div>
42</div>`});var be={};h(be,{default:()=>_e});var _e,Ce=x(()=>{_e=`<div class="clr-form-control">
43  <label for="select-full" class="clr-control-label">Basic select</label>
44  <div class="clr-control-container">
45    <div class="clr-select-wrapper">
46      <select id="select-full" class="clr-select">
47        <option value="1">One</option>
48        <option value="2">Two</option>
49        <option value="3">Three</option>
50      </select>
51    </div>
52    <span class="clr-subtext">Helper Text</span>
53  </div>
54</div>`});var Ne=(ue(),S(pe)),ke=(he(),S(xe)),We=(ge(),S(Se)),Le=(fe(),S(ve)),Fe=(ye(),S(Ee)),Ae=(Ce(),S(be)),C=`
55import { Component } from '@angular/core';
56import { FormsModule } from '@angular/forms';
57import { ClrSelectModule } from '@clr/angular';
58
59@Component({
60  selector: 'app-example',
61  templateUrl: './example.component.html',
62  styleUrl: './example.component.scss',
63
64  imports: [FormsModule, ClrSelectModule],
65})
66export class ExampleComponent {
67  selectedOption = '';
68}
69`,w=(()=>{class d extends me{constructor(){super("select"),this.canNestComponents="Spinner",this.cannotNestComponents="Alert, Accordion, Button, Button Group, Card, Checkbox, Combobox, Datagrid, Datalist, Date Picker, Dropdown, File Picker, Header, Input, Label, List, Login Page, Modal, Password, Progress Bar, Radio Button, Range Input, Select, Side Panel, Signpost, Stack View, Stepper, Table, Tabs, Textarea, Toggle Switch, Tooltip, Timeline, Tree View, Vertical Nav, Wizard",this.conditionalNesting=[{component:"Icon, Label",description:"Yes, non-clickable"},{component:"Badge",description:"Maybe, check your design team for assistance"}],this.patternLinks=[de],this.exampleOne="",this.exampleTwo="",this.exampleThree="",this.options="Red",this.layoutVertical="Option one",this.layoutHorizontal="Option one",this.layoutCompact="Option one",this.layoutMultiple="",this.uiBasic=Le,this.uiFull=Ae,this.uiError=Fe,this.ngBasic=Ne,this.ngBasicCode=C,this.ngLabel=We,this.ngLabelCode=C,this.ngHelpers=ke,this.ngHelpersCode=C}static{this.\u0275fac=function(p){return new(p||d)}}static{this.\u0275cmp=M({type:d,selectors:[["ng-component"]],hostVars:4,hostBindings:function(p,i){p&2&&_("content-area",!0)("dox-content-panel",!0)},features:[B],decls:382,vars:32,consts:[["tab","code"],["id","summary",1,"component-summary"],["id","forms-code-samples","cds-text","title",1,"clr-mt-48px"],["cds-text","body",1,"clr-mt-16px"],["cds-text","code"],["id","angular-basic","data-toc-item","","cds-text","section",1,"clr-mt-32px"],[1,"clr-mt-24px"],["clrSelect","","name","exampleOne",3,"ngModelChange","ngModel"],["value","one"],["value","two"],["value","three"],["name","select ng basic",3,"componentTemplate","componentClass","showComponentClass"],["

69id","labels","data-toc-item","","cds-text","section",1,"clr-mt-32px"],["clrSelect","","name","exampleTwo",3,"ngModelChange","ngModel"],["name","select ng label",3,"componentTemplate","componentClass","showComponentClass"],["id","helper-and-error","data-toc-item","","cds-text","section",1,"clr-mt-32px"],["clrSelect","","name","options","required","",3,"ngModelChange","ngModel"],["name","select ng helpers",3,"componentTemplate","componentClass","showComponentClass"],["id","css-component","cds-text","title",1,"clr-mt-48px"],[3,"clrAlertType","clrAlertClosable"],[1,"alert-text"],["id","css-basic","data-toc-item","","cds-text","section",1,"clr-mt-32px"],[1,"clr-select-wrapper","clr-mt-24px"],["id","select-basic",1,"clr-select"],["value","1"],["value","2"],["value","3"],["name","select ui basic",3,"componentTemplate"],["id","full-display","data-toc-item","","cds-text","section",1,"clr-mt-32px"],[1,"clr-form-control","clr-mt-24px"],["for","select-full",1,"clr-control-label"],[1,"clr-control-container"],[1,"clr-select-wrapper"],["id","select-full",1,"clr-select"],[1,"clr-subtext"],["name","select ui full",3,"componentTemplate"],["id","error-state","data-toc-item","","cds-text","section",1,"clr-mt-32px"],["for","select-error",1,"clr-control-label"],[1,"clr-control-container","clr-error"],["id","select-error",1,"clr-select"],[1,"clr-subtext-wrapper","error"],["shape","error-standard","status","danger",1,"clr-validate-icon"],["name","select ui error",3,"componentTemplate"],["tab","overview"],[1,"component-summary"],["id","usage","cds-text","title",1,"clr-mt-48px"],[1,"clrweb-DoxVersusBox","clr-mt-24px"],[1,"clrweb-DoxVersusBox-items","clrweb-DoxVersusBox-vsContent"],[1,"clrweb-DoxVersusBox-itemWrapper","clr-col-12","clr-col-sm-6",2,"align-items","normal"],[1,"clrweb-DoxVersusBox-item"],[1,"clrweb-DoxVersusBox-vsWrapper","clr-col-12"],[3,"lightSrc","darkSrc","imageAlt","imageStyle"],[1,"clrweb-DoxVersusBox-itemWrapper","clr-col-12","clr-col-sm-6"],[1,"clrweb-DoxVersusBox-item","clr-row"],["cds-text","body",1,"clr-mt-32px"],[3,"linkColWidth","links"],["id","states","cds-text","title",1,"clr-mt-48px"],["cds-text","section","id","enabled",1,"clr-mt-24px"],["clrForm","","clrLayout","vertical"],[1,"clr-row"],[1,"clr-col-12","clr-mt-16px","clr-ml-32px","clr-mb-16px","clr-component-no-top-margin"],["clrSelect","","name","options",3,"ngModelChange","ngModel"],["value","Red"],["value","Green"],["value","Navy Blue"],["cds-text","section","id","disabled",1,"clr-mt-24px"],["clrSelect","","name","options","disabled","",3,"ngModelChange","ngModel"],["cds-text","section","id","error",1,"clr-mt-24px"],[1,"clr-col-4","clr-mt-16px","clr-ml-32px","clr-mb-16px"],[1,"clr-form-control"],["id","select-error",1,"clr-select","clr-focus"],["value","Navi Blue"],["cds-text","section","id","success",1,"clr-mt-24px"],[1,"clr-col-12","clr-mt-16px","clr-ml-32px","clr-mb-16px"],["for","select-success",1,"clr-control-label"],[1,"clr-control-container","clr-success"],["id","select-success",1,"clr-select","clr-focus"],[1,"clr-subtext-wrapper","success"],["shape","success-standard","status","danger",1,"clr-validate-icon"],["id","layouts","cds-text","title",1,"clr-mt-48px"],["routerLink","/documentation/forms"],["cds-text","section","id","vertical",1,"clr-mt-24px"],["value","Option one"],["value","Option two"],["value","Option three"],["cds-text","section","id","horizontal",1,"clr-mt-24px"],["clrForm","","clrLayout","horizontal"],[1,"clr-col-4","clr-mt-16px","clr-ml-32px","clr-mb-16px","clr-component-no-top-margin"],["cds-text","section","id","compact",1,"clr-mt-24px"],["clrForm","","clrLayout","compact"],["cds-text","section","id","multiple",1,"clr-mt-24px"],["clrForm",""],["clrSelect","","name","options","multiple","",3,"ngModelChange","ngModel"],["value","Option four"],["value","Option five"],["value","Option six"],["tab","api"],["styleDocsKey","Select"],["tab","accessibility"],["cds-text","body",1,"clr-mt-16px","clr-mb-16px"],["componentName","Select","subComponentName","label",3,"canNestComponents","cannotNestComponents","conditionalNesting"]],template:function(p,i){p&1&&(t(0,"app-doc-tabs")(1,"app-doc-tab",0)(2,"p",1),e(3," With a select box, users can select one item from a list of values. The selected item is visible when the select box is closed. "),n(),t(4,"h2",2),e(5,"Angular Select Component"),n(),t(6,"p",3),e(7," If you are using Angular, the recommended approach is to always use the "),t(8,"code",4),e(9,"ClrSelect"),n(),e(10," directive on your selects to help manage the form control. By using "),t(11,"code",4),e(12,"ClrSelect"),n(),e(13,", you'll automatically be able to leverage built in validation, helper text, and layout features in forms. "),n(),t(14,"h3",5),e(15,"Basic select"),n(),t(16,"p",3),e(17," This is the standard way to define a select box inside of a form, without the use of a label or val

69idation. You need to add "),t(18,"code",4),e(19,"clrSelect"),n(),e(20," to your select to wire up the directive. "),n(),t(21,"div",6)(22,"select",7),c("ngModelChange",function(l){return m(i.exampleOne,l)||(i.exampleOne=l),l}),t(23,"option",8),e(24,"One"),n(),t(25,"option",9),e(26,"Two"),n(),t(27,"option",10),e(28,"Three"),n()()(),t(29,"div",6),r(30,"app-stackblitz-example",11),n(),t(31,"h3",12),e(32,"Labels"),n(),t(33,"p",3),e(34," For anything beyond a standalone select control, you'll need to wrap your select with the "),t(35,"code",4),e(36,"ClrSelectContainer"),n(),e(37," component. This is required to contain all of the logic and validation details for the individual select control. "),n(),t(38,"p",3),e(39," Then you can add a "),t(40,"code",4),e(41,"label"),n(),e(42," element and it will automatically get laid out correctly in the form. "),n(),t(43,"div",6)(44,"clr-select-container")(45,"label"),e(46,"I've got some options"),n(),t(47,"select",13),c("ngModelChange",function(l){return m(i.exampleTwo,l)||(i.exampleTwo=l),l}),t(48,"option",8),e(49,"One"),n(),t(50,"option",9),e(51,"Two"),n(),t(52,"option",10),e(53,"Three"),n()()()(),t(54,"div",6),r(55,"app-stackblitz-example",14),n(),t(56,"h3",15),e(57,"Helper and error messages"),n(),t(58,"p",3),e(59," The select form control wires up with the validations placed on an select, such as "),t(60,"code",4),e(61,"required"),n(),e(62," or even custom built validators in Angular. Under the hood, it looks at the "),t(63,"code",4),e(64,"NgControl"),n(),e(65," values to determine the control validity, and display the helper text and error message accordingly. "),n(),t(66,"p",3),e(67," Note: the validation in this example only displays an error after you focus and leave focus without selecting a value. The easiest way to do this is to highlight the text in this paragraph, and hit tab a few times to change the focus. "),n(),t(68,"div",6)(69,"clr-select-container")(70,"label"),e(71,"I've got some options"),n(),t(72,"select",16),c("ngModelChange",function(l){return m(i.exampleThree,l)||(i.exampleThree=l),l}),t(73,"option",8),e(74,"One"),n(),t(75,"option",9),e(76,"Two"),n(),t(77,"option",10),e(78,"Three"),n()(),t(79,"clr-control-helper"),e(80,"You have these choices"),n(),t(81,"clr-control-error"),e(82,"You must select something!"),n()()(),t(83,"div",6),r(84,"app-stackblitz-example",17),n(),t(85,"h2",18),e(86,"CSS Select Component"),n(),t(87,"p",3),e(88," Selects can be used without Angular, but without some of the automatic interactivity. If you intend to create your own components, here are the basic features you'll need to build out. "),n(),t(89,"div",6)(90,"clr-alert",19)(91,"clr-alert-item")(92,"span",20),e(93," Clarity uses native <select>, hence <option> has limited CSS support and does not support text spacing settings to meet the WCAG criteria for text spacing settings. "),n()()()(),t(94,"h3",21),e(95,"Basic select"),n(),t(96,"p",3),e(97," This is the minimal markup needed to style the select control by wrapping it with the an element with the "),t(98,"code",4),e(99,"clr-select-wrapper"),n(),e(100," class. Ensure you add the "),t(101,"code",4),e(102,"clr-select"),n(),e(103," class to the select as well. "),n(),t(104,"div",22)(105,"select",23)(106,"option",24),e(107,"One"),n(),t(108,"option",25),e(109,"Two"),n(),t(110,"option",26),e(111,"Three"),n()()(),t(112,"div",6),r(113,"app-stackblitz-example",27),n(),t(114,"h3",28),e(115,"Full select display"),n(),t(116,"p",3),e(117," Each form control has a "),t(118,"code",4),e(119,".clr-form-control"),n(),e(120," wrapper, as well as a specific DOM structure necessary to layout the form control as desired. This works with all layout options as well without needing to change the DOM structure in any way. "),n(),t(121,"div",29)(122,"label",30),e(123,"Basic select"),n(),t(124,"div",31)(125,"div",32)(126,"select",33)(127,"option",24),e(128,"One"),n(),t(129,"option",25),e(130,"Two"),n(),t(131,"option",26),e(132,"Three"),n()()(),t(133,"span",34),e(134,"Helper Text"),n()()(),t(135,"div",6),r(136,"app-stackblitz-example",35),n(),t(137,"h3",36),e(138,"Error state"),n(),t(139,"p",3),e(140," To signify an error state, you need to add the "),t(141,"code",4),e(142,".clr-error"),n(),e(143," class to the "),t(144,"code",4),e(145,".clr-control-container"),n(),e(146," element. Then place the error message inside a "),t(147,"code",4),e(148,".clr-subtext-wrapper"),n(),e(149," element with the "),t(150,"code",4),e(151,".error"),n(),e(152," class. This wrapper is hidden by default and only becomes visible when the parent container has "),t(153,"code",4),e(154,".clr-error"),n(),e(155,". Inside the wrapper, you may include a "),t(156,"code",4),e(157,".clr-validate-icon"),n(),e(158," and a "),t(159,"code",4),e(160,".clr-subtext"),n(),e(161," element for the error message \u2014 both will be styled in the error color automatically. Helper text placed in a plain "),t(162,"code",4),e(163,".clr-subtext-wrapper"),n(),e(164," (without the "),t(165,"code",4),e(166,".error"),n(),e(167," or "),t(168,"code",4),e(169,".success"),n(),e(170," class) remains visible regardless of the validation state. "),n(),t(171,"div",29)(172,"label",37),e(173,"Basic select"),n(),t(174,"div",38)(175,"div",32)(176,"select",39)(177,"option",24),e(178,"One"),n(),t(179,"option",25),e(180,"Two"),n(),t(181,"option",26),e(182,"Three"),n()()(),t(183,"div",40),r(184,"cds-icon",41),t(185,"span",34),e(186,"Error message"),n()()()(),t(187,"div",6),r(188,"app-stackblitz-example",42),n()(),t(189,"app-doc-tab",43)(190,"p",44),e(191," A select box is a form element that provides a drop down list of a set of choices. The box displays the user\u2019s selection after a choice is made. "),n(),t(192,"h2",45),e(193,"Usage"),n(),t(194,"p",3),e(195," Use a select box for a list of items that a user does not need to see until they view the drop down list. "),n(),t(196,"p",3),e(197," A common strategy is to combine an input field with a select box so that a user can enter a value and validate it with a menu item. For example, the user might enter a number in an input field and select the units from the select box. "),n(),t(198,"div",46)(199,"div",47)(200,"div",48)(201,"div",49)(202,"span"),e(203," Select boxes present a list of options from which the user can select and apply to an input field. "),n()()(),t(204,"div",50),r(205,"app-themed-image",51),n(),t(206,"div",52)(207,"div",53)(208,"span"),e(209," Dropdown menus present a list of options that take an immediate action or navigate the user outside of the current context. "),n()()()()(),t(210,"p",54),e(211,"See more usage guidelines in our patterns:"),n(),r(212,"app-link-cards",55),t(213,"h2",56),e(214,"States"),n(),t(215,"h3",57

69),e(216,"Enabled"),n(),t(217,"p",3),e(218,"Use when interactive and ready for input."),n(),t(219,"form",58)(220,"div",59)(221,"div",60)(222,"clr-select-container")(223,"label"),e(224,"Select Color"),n(),t(225,"select",61),c("ngModelChange",function(l){return m(i.options,l)||(i.options=l),l}),t(226,"option",62),e(227,"Red"),n(),t(228,"option",63),e(229,"Green"),n(),t(230,"option",64),e(231,"Navy Blue"),n()()()()()(),t(232,"h3",65),e(233,"Disabled"),n(),t(234,"p",3),e(235," Use when not interactive. For example, when a user does not have permissions to edit the input. "),n(),t(236,"form",58)(237,"div",59)(238,"div",60)(239,"clr-select-container")(240,"label"),e(241,"Select Color"),n(),t(242,"select",66),c("ngModelChange",function(l){return m(i.options,l)||(i.options=l),l}),t(243,"option",62),e(244,"Red"),n(),t(245,"option",63),e(246,"Green"),n(),t(247,"option",64),e(248,"Navy Blue"),n()()()()()(),t(249,"h3",67),e(250,"Error"),n(),t(251,"p",3),e(252," Use to communicate a user or system error. This validation can happen when the user moves away from the input or after attempting to submit a form. "),n(),t(253,"div",59)(254,"div",68)(255,"div",69)(256,"label",37),e(257,"Select Color"),n(),t(258,"div",38)(259,"div",32)(260,"select",70)(261,"option",62),e(262,"Red"),n(),t(263,"option",63),e(264,"Green"),n(),t(265,"option",71),e(266,"Navi Blue"),n()()(),t(267,"div",40),r(268,"cds-icon",41),t(269,"span",34),e(270,"Out of stock. Select another color"),n()()()()()(),t(271,"h3",72),e(272,"Success"),n(),t(273,"p",3),e(274," Use to provide real-time feedback immediately after a user\u2019s input. For example, the selection is available. "),n(),t(275,"div",59)(276,"div",73)(277,"div",69)(278,"label",74),e(279,"Select Color"),n(),t(280,"div",75)(281,"div",32)(282,"select",76)(283,"option",62),e(284,"Red"),n(),t(285,"option",63),e(286,"Green"),n(),t(287,"option",71),e(288,"Navi Blue"),n()()(),t(289,"div",77),r(290,"cds-icon",78),t(291,"span",34),e(292,"Changes saved"),n()()()()()(),t(293,"h2",79),e(294,"Layouts"),n(),t(295,"p",3),e(296," Select elements are available in vertical, horizontal, compact, and multiple layouts. To allow the user to view and select several items at once, use the multiple attribute. See more layout guidelines on the "),t(297,"a",80),e(298,"forms page"),n(),e(299,". "),n(),t(300,"h3",81),e(301,"Vertical"),n(),t(302,"form",58)(303,"div",59)(304,"div",60)(305,"clr-select-container")(306,"label"),e(307,"label"),n(),t(308,"select",61),c("ngModelChange",function(l){return m(i.layoutVertical,l)||(i.layoutVertical=l),l}),t(309,"option",82),e(310,"Option one"),n(),t(311,"option",83),e(312,"Option two"),n(),t(313,"option",84),e(314,"Option three"),n()(),t(315,"clr-control-helper"),e(316,"message text"),n()()()()(),t(317,"h3",85),e(318,"Horizontal"),n(),t(319,"form",86)(320,"div",59)(321,"div",87)(322,"clr-select-container")(323,"label"),e(324,"label"),n(),t(325,"select",61),c("ngModelChange",function(l){return m(i.layoutHorizontal,l)||(i.layoutHorizontal=l),l}),t(326,"option",82),e(327,"Option one"),n(),t(328,"option",83),e(329,"Option two"),n(),t(330,"option",84),e(331,"Option three"),n()(),t(332,"clr-control-helper"),e(333,"message text"),n()()()()(),t(334,"h3",88),e(335,"Compact"),n(),t(336,"form",89)(337,"div",59)(338,"div",87)(339,"clr-select-container")(340,"label"),e(341,"label"),n(),t(342,"select",61),c("ngModelChange",function(l){return m(i.layoutCompact,l)||(i.layoutCompact=l),l}),t(343,"option",82),e(344,"Option one"),n(),t(345,"option",83),e(346,"Option two"),n(),t(347,"option",84),e(348,"Option three"),n()(),t(349,"clr-control-helper"),e(350,"message text"),n()()()()(),t(351,"h3",90),e(352,"Multiple"),n(),t(353,"form",91)(354,"div",59)(355,"div",87)(356,"clr-select-container")(357,"label"),e(358,"label"),n(),t(359,"select",92),c("ngModelChange",function(l){return m(i.layoutMultiple,l)||(i.layoutMultiple=l),l}),t(360,"option",82),e(361,"Option one"),n(),t(362,"option",83),e(363,"Option two"),n(),t(364,"option",84),e(365,"Option three"),n(),t(366,"option",93),e(367,"Option four"),n(),t(368,"option",94),e(369,"Option five"),n(),t(370,"option",95),e(371,"Option six"),n()(),t(372,"clr-control-helper"),e(373,"message text"),n()()()()()(),t(374,"app-doc-tab",96),r(375,"app-style-docs",97),n(),t(376,"app-doc-tab",98)(377,"p",99),e(378," The Select component includes a native select form element (with all native limitations), a label, helper text, and status messaging. "),n(),t(379,"p",99),e(380," Avoid nesting components within helper text or error messages, as this can cause overloading. Consult your design team for guidance. "),n(),r(381,"app-nesting-table",100),n()()),p&2&&(o(22),s("ngModel",i.exampleOne),o(8),a("c

69omponentTemplate",i.ngBasic.default)("componentClass",i.ngBasicCode)("showComponentClass",!1),o(17),s("ngModel",i.exampleTwo),o(8),a("componentTemplate",i.ngLabel.default)("componentClass",i.ngLabelCode)("showComponentClass",!1),o(17),s("ngModel",i.exampleThree),o(12),a("componentTemplate",i.ngHelpers.default)("componentClass",i.ngHelpersCode)("showComponentClass",!1),o(6),a("clrAlertType","warning")("clrAlertClosable",!1),o(23),a("componentTemplate",i.uiBasic.default),o(23),a("componentTemplate",i.uiFull.default),o(52),a("componentTemplate",i.uiError.default),o(17),a("lightSrc","/assets/images/versus-icon-light.svg")("darkSrc","/assets/images/versus-icon-dark.svg")("imageAlt","versus")("imageStyle","margin: 0 auto;width: 72px;"),o(7),a("linkColWidth",4)("links",i.patternLinks),o(13),s("ngModel",i.options),o(17),s("ngModel",i.options),o(66),s("ngModel",i.layoutVertical),o(17),s("ngModel",i.layoutHorizontal),o(17),s("ngModel",i.layoutCompact),o(17),s("ngModel",i.layoutMultiple),o(22),a("canNestComponents",i.canNestComponents)("cannotNestComponents",i.cannotNestComponents)("conditionalNesting",i.conditionalNesting))},dependencies:[re,ae,g,V,H,P,I,z,W,L,q,A,F,ee,Y,j,K,J,Q,U,$,Z,v,X,le,te,ne,ie,G,R,f,E,N,se,y],encapsulation:2})}}return d})();var bt=(()=>{class d{static{this.\u0275fac=function(p){return new(p||d)}}static{this.\u0275mod=O({type:d})}static{this.\u0275inj=T({imports:[D,oe,g,k.forChild([{path:"",component:w}]),ce,f,v,y,E,w]})}}return d})();export{bt as SelectDemoModule};