npm - carbon-components-angular - Versions diffs - 5.53.0 → 5.54.0 - Mend

carbon-components-angular 5.53.0 → 5.54.0

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.

Files changed (210) hide show

package/fesm2020/carbon-components-angular-toggle.mjs CHANGED Viewed

@@ -8,6 +8,7 @@ import * as i2 from '@angular/common';
 import { CommonModule } from '@angular/common';
 /**
+ * @deprecated since v5 - Use boolean
  * Defines the set of states for a toggle component.
  */
 var ToggleState;
@@ -122,7 +123,7 @@ class Toggle extends Checkbox {
  */
 Toggle.toggleCount = 0;
 Toggle.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: Toggle, deps: [{ token: i0.ChangeDetectorRef }, { token: i1.I18n }], target: i0.ɵɵFactoryTarget.Component });
-Toggle.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: Toggle, selector: "cds-toggle, ibm-toggle", inputs: { offText: "offText", onText: "onText", label: "label", size: "size", hideLabel: "hideLabel", skeleton: "skeleton" }, host: { properties: { "class.cds--toggle--skeleton": "this.skeleton", "class.cds--toggle": "this.toggleClass", "class.cds--toggle--disabled": "this.disabledClass", "class.cds--form-item": "this.formItem" } }, providers: [
+Toggle.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: Toggle, selector: "cds-toggle, ibm-toggle", inputs: { offText: "offText", onText: "onText", label: "label", size: "size", hideLabel: "hideLabel", ariaLabel: "ariaLabel", skeleton: "skeleton" }, host: { properties: { "class.cds--toggle--skeleton": "this.skeleton", "class.cds--toggle": "this.toggleClass", "class.cds--toggle--disabled": "this.disabledClass", "class.cds--form-item": "this.formItem" } }, providers: [
         {
             provide: NG_VALUE_ACCESSOR,
             useExisting: Toggle,
@@ -137,7 +138,8 @@ Toggle.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.
 				role="switch"
 				type="button"
 				[attr.aria-checked]="checked"
-				(click)="onClick($event)">
+				(click)="onClick($event)"
+				[attr.aria-label]="ariaLabel">
 			</button>
 			<label
 				class="cds--toggle__label"
@@ -193,7 +195,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
 				role="switch"
 				type="button"
 				[attr.aria-checked]="checked"
-				(click)="onClick($event)">
+				(click)="onClick($event)"
+				[attr.aria-label]="ariaLabel">
 			</button>
 			<label
 				class="cds--toggle__label"
@@ -254,6 +257,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
                 type: Input
             }], hideLabel: [{
                 type: Input
+            }], ariaLabel: [{
+                type: Input
             }], skeleton: [{
                 type: HostBinding,
                 args: ["class.cds--toggle--skeleton"]

package/fesm2020/carbon-components-angular-toggle.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"carbon-components-angular-toggle.mjs","sources":["../../src/toggle/toggle.component.ts","../../src/toggle/toggle.module.ts","../../src/toggle/carbon-components-angular-toggle.ts"],"sourcesContent":["import { Checkbox } from \"carbon-components-angular/checkbox\";\nimport {\n\tChangeDetectorRef,\n\tComponent,\n\tInput,\n\tHostBinding,\n\tTemplateRef\n} from \"@angular/core\";\nimport { NG_VALUE_ACCESSOR } from \"@angular/forms\";\n\nimport { I18n } from \"carbon-components-angular/i18n\";\nimport { Observable } from \"rxjs\";\n\n/*\n Defines the set of states for a toggle component.\n /\nexport enum ToggleState {\n\tInit,\n\tChecked,\n\tUnchecked\n}\n\n/\n @todo - Toggle component will no longer extend `Checkbox` component as of v6\n * Toggle is no longer repies on using checkbox, so doesn't make sense for us to continue inheriting ALL checkbox\n * component attributes.\n /\n\n/\n Get started with importing the module:\n \n ```typescript\n * import { ToggleModule } from 'carbon-components-angular';\n * ```\n \n ```html\n * <cds-toggle [(ngModel)]=\"toggleState\">Toggle</cds-toggle>\n * ```\n \n [See demo](../../?path=/story/components-toggle--basic)\n /\n@Component({\n\tselector: \"cds-toggle, ibm-toggle\",\n\ttemplate: `\n\t\t<ng-container ngIf=\"!skeleton; else skeletonTemplate;\">\n\t\t\t<button\n\t\t\t\tclass=\"cds--toggle__button\"\n\t\t\t\t[disabled]=\"disabled\"\n\t\t\t\t[id]=\"id\"\n\t\t\t\trole=\"switch\"\n\t\t\t\ttype=\"button\"\n\t\t\t\t[attr.aria-checked]=\"checked\"\n\t\t\t\t(click)=\"onClick($event)\">\n\t\t\t</button>\n\t\t\t<label\n\t\t\t\tclass=\"cds--toggle__label\"\n\t\t\t\t[for]=\"id\">\n\t\t\t\t<span\n\t\t\t\t\tclass=\"cds--toggle__label-text\"\n\t\t\t\t\t[ngClass]=\"{\n\t\t\t\t\t\t'cds--visually-hidden': hideLabel\n\t\t\t\t\t}\">\n\t\t\t\t\t<ng-container ngIf=\"!isTemplate(label)\">{{label}}</ng-container>\n\t\t\t\t\t<ng-template ngIf=\"isTemplate(label)\" [ngTemplateOutlet]=\"label\"></ng-template>\n\t\t\t\t</span>\n\t\t\t\t<div\n\t\t\t\t\tclass=\"cds--toggle__appearance\"\n\t\t\t\t\t[ngClass]=\"{\n\t\t\t\t\t\t'cds--toggle__appearance--sm': size === 'sm'\n\t\t\t\t\t}\">\n\t\t\t\t\t<div\n\t\t\t\t\t\tclass=\"cds--toggle__switch\"\n\t\t\t\t\t\t[ngClass]=\"{\n\t\t\t\t\t\t\t'cds--toggle__switch--checked': checked\n\t\t\t\t\t\t}\">\n\t\t\t\t\t\t<svg\n\t\t\t\t\t\t\tngIf=\"size === 'sm'\"\n\t\t\t\t\t\t\tclass='cds--toggle__check'\n\t\t\t\t\t\t\twidth=\"6px\"\n\t\t\t\t\t\t\theight=\"5px\"\n\t\t\t\t\t\t\tviewBox=\"0 0 6 5\">\n\t\t\t\t\t\t\t<path d=\"M2.2 2.7L5 0 6 1 2.2 5 0 2.7 1 1.5z\" />\n\t\t\t\t\t\t</svg>\n\t\t\t\t\t</div>\n\t\t\t\t\t<span class=\"cds--toggle__text\">\n\t\t\t\t\t\t{{(hideLabel ? label : (getCheckedText() \| async))}}\n\t\t\t\t\t</span>\n\t\t\t\t</div>\n\t\t\t</label>\n\t\t</ng-container>\n\t\t<ng-template #skeletonTemplate>\n\t\t\t<div class=\"cds--toggle__skeleton-circle\"></div>\n\t\t\t<div class=\"cds--toggle__skeleton-rectangle\"></div>\n\t\t</ng-template>\n\t`,\n\tproviders: [\n\t\t{\n\t\t\tprovide: NG_VALUE_ACCESSOR,\n\t\t\tuseExisting: Toggle,\n\t\t\tmulti: true\n\t\t}\n\t]\n})\nexport class Toggle extends Checkbox {\n\t/\n\t Variable used for creating unique ids for toggle components.\n\t /\n\tstatic toggleCount = 0;\n\n\t/\n\t Text that is set on the left side of the toggle.\n\t /\n\t@Input()\n\tset offText(value: string \| Observable<string>) {\n\t\tthis._offValues.override(value);\n\t}\n\n\tget offText() {\n\t\treturn this._offValues.value;\n\t}\n\n\t/\n\t Text that is set on the right side of the toggle.\n\t /\n\t@Input()\n\tset onText(value: string \| Observable<string>) {\n\t\tthis._onValues.override(value);\n\t}\n\n\tget onText() {\n\t\treturn this._onValues.value;\n\t}\n\t/\n\t Text that is set as the label of the toggle.\n\t /\n\t@Input() label: string \| TemplateRef<any>;\n\t/\n\t Size of the toggle component.\n\t /\n\t@Input() size: \"sm\" \| \"md\" = \"md\";\n\t/\n\t Set to `true` to hide the toggle label & set toggle on/off text to label.\n\t /\n\t@Input() hideLabel = false;\n\n\t@HostBinding(\"class.cds--toggle--skeleton\") @Input() skeleton = false;\n\n\t@HostBinding(\"class.cds--toggle\") toggleClass = true;\n\t@HostBinding(\"class.cds--toggle--disabled\") get disabledClass () {\n\t\treturn this.disabled;\n\t}\n\n\t@HostBinding(\"class.cds--form-item\") get formItem() {\n\t\treturn !this.skeleton;\n\t}\n\n\t/\n\t The unique id allocated to the `Toggle`.\n\t /\n\tid = \"toggle-\" + Toggle.toggleCount;\n\n\tprotected _offValues = this.i18n.getOverridable(\"TOGGLE.OFF\");\n\tprotected _onValues = this.i18n.getOverridable(\"TOGGLE.ON\");\n\t/\n\t Creates an instance of Toggle.\n\t /\n\tconstructor(protected changeDetectorRef: ChangeDetectorRef, protected i18n: I18n) {\n\t\tsuper(changeDetectorRef);\n\t\tToggle.toggleCount++;\n\t}\n\n\t/\n\t `ControlValueAccessor` method to programmatically disable the toggle input.\n\t \n\t ex: `this.formGroup.get(\"myToggle\").disable();`\n\t \n\t @param isDisabled `true` to disable the input\n\t /\n\tsetDisabledState(isDisabled: boolean) {\n\t\tthis.disabled = isDisabled;\n\t}\n\n\tgetOffText(): Observable<string> {\n\t\treturn this._offValues.subject;\n\t}\n\n\tgetOnText(): Observable<string> {\n\t\treturn this._onValues.subject;\n\t}\n\n\tgetCheckedText(): Observable<string> {\n\t\tif (this.checked) {\n\t\t\treturn this._onValues.subject;\n\t\t}\n\t\treturn this._offValues.subject;\n\t}\n\n\t/\n\t Creates instance of `ToggleChange` used to propagate the change event.\n\t /\n\temitChangeEvent() {\n\t\tthis.checkedChange.emit(this.checked);\n\t\tthis.propagateChange(this.checked);\n\t}\n\n\tpublic isTemplate(value) {\n\t\treturn value instanceof TemplateRef;\n\t}\n}\n","// modules\nimport { NgModule } from \"@angular/core\";\nimport { FormsModule } from \"@angular/forms\";\nimport { CommonModule } from \"@angular/common\";\n\n// imports\nimport { I18nModule } from \"carbon-components-angular/i18n\";\nimport { Toggle } from \"./toggle.component\";\n\n@NgModule({\n\tdeclarations: [\n\t\tToggle\n\t],\n\texports: [\n\t\tToggle\n\t],\n\timports: [\n\t\tCommonModule,\n\t\tFormsModule,\n\t\tI18nModule\n\t]\n})\nexport class ToggleModule { }\n","/\n Generated bundle index. Do not edit.\n /\n\nexport from './index';\n"],"names":[],"mappings":"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"}
1	+ {"version":3,"file":"carbon-components-angular-toggle.mjs","sources":["../../src/toggle/toggle.component.ts","../../src/toggle/toggle.module.ts","../../src/toggle/carbon-components-angular-toggle.ts"],"sourcesContent":["import { Checkbox } from \"carbon-components-angular/checkbox\";\nimport {\n\tChangeDetectorRef,\n\tComponent,\n\tInput,\n\tHostBinding,\n\tTemplateRef\n} from \"@angular/core\";\nimport { NG_VALUE_ACCESSOR } from \"@angular/forms\";\n\nimport { I18n } from \"carbon-components-angular/i18n\";\nimport { Observable } from \"rxjs\";\n\n/*\n @deprecated since v5 - Use boolean\n * Defines the set of states for a toggle component.\n /\nexport enum ToggleState {\n\tInit,\n\tChecked,\n\tUnchecked\n}\n\n/\n @todo - Toggle component will no longer extend `Checkbox` component as of v6\n * Toggle is no longer repies on using checkbox, so doesn't make sense for us to continue inheriting ALL checkbox\n * component attributes.\n /\n\n/\n Get started with importing the module:\n \n ```typescript\n * import { ToggleModule } from 'carbon-components-angular';\n * ```\n \n ```html\n * <cds-toggle [(ngModel)]=\"toggleState\">Toggle</cds-toggle>\n * ```\n \n [See demo](../../?path=/story/components-toggle--basic)\n /\n@Component({\n\tselector: \"cds-toggle, ibm-toggle\",\n\ttemplate: `\n\t\t<ng-container ngIf=\"!skeleton; else skeletonTemplate;\">\n\t\t\t<button\n\t\t\t\tclass=\"cds--toggle__button\"\n\t\t\t\t[disabled]=\"disabled\"\n\t\t\t\t[id]=\"id\"\n\t\t\t\trole=\"switch\"\n\t\t\t\ttype=\"button\"\n\t\t\t\t[attr.aria-checked]=\"checked\"\n\t\t\t\t(click)=\"onClick($event)\"\n\t\t\t\t[attr.aria-label]=\"ariaLabel\">\n\t\t\t</button>\n\t\t\t<label\n\t\t\t\tclass=\"cds--toggle__label\"\n\t\t\t\t[for]=\"id\">\n\t\t\t\t<span\n\t\t\t\t\tclass=\"cds--toggle__label-text\"\n\t\t\t\t\t[ngClass]=\"{\n\t\t\t\t\t\t'cds--visually-hidden': hideLabel\n\t\t\t\t\t}\">\n\t\t\t\t\t<ng-container ngIf=\"!isTemplate(label)\">{{label}}</ng-container>\n\t\t\t\t\t<ng-template ngIf=\"isTemplate(label)\" [ngTemplateOutlet]=\"label\"></ng-template>\n\t\t\t\t</span>\n\t\t\t\t<div\n\t\t\t\t\tclass=\"cds--toggle__appearance\"\n\t\t\t\t\t[ngClass]=\"{\n\t\t\t\t\t\t'cds--toggle__appearance--sm': size === 'sm'\n\t\t\t\t\t}\">\n\t\t\t\t\t<div\n\t\t\t\t\t\tclass=\"cds--toggle__switch\"\n\t\t\t\t\t\t[ngClass]=\"{\n\t\t\t\t\t\t\t'cds--toggle__switch--checked': checked\n\t\t\t\t\t\t}\">\n\t\t\t\t\t\t<svg\n\t\t\t\t\t\t\tngIf=\"size === 'sm'\"\n\t\t\t\t\t\t\tclass='cds--toggle__check'\n\t\t\t\t\t\t\twidth=\"6px\"\n\t\t\t\t\t\t\theight=\"5px\"\n\t\t\t\t\t\t\tviewBox=\"0 0 6 5\">\n\t\t\t\t\t\t\t<path d=\"M2.2 2.7L5 0 6 1 2.2 5 0 2.7 1 1.5z\" />\n\t\t\t\t\t\t</svg>\n\t\t\t\t\t</div>\n\t\t\t\t\t<span class=\"cds--toggle__text\">\n\t\t\t\t\t\t{{(hideLabel ? label : (getCheckedText() \| async))}}\n\t\t\t\t\t</span>\n\t\t\t\t</div>\n\t\t\t</label>\n\t\t</ng-container>\n\t\t<ng-template #skeletonTemplate>\n\t\t\t<div class=\"cds--toggle__skeleton-circle\"></div>\n\t\t\t<div class=\"cds--toggle__skeleton-rectangle\"></div>\n\t\t</ng-template>\n\t`,\n\tproviders: [\n\t\t{\n\t\t\tprovide: NG_VALUE_ACCESSOR,\n\t\t\tuseExisting: Toggle,\n\t\t\tmulti: true\n\t\t}\n\t]\n})\nexport class Toggle extends Checkbox {\n\t/\n\t Variable used for creating unique ids for toggle components.\n\t /\n\tstatic toggleCount = 0;\n\n\t/\n\t Text that is set on the left side of the toggle.\n\t /\n\t@Input()\n\tset offText(value: string \| Observable<string>) {\n\t\tthis._offValues.override(value);\n\t}\n\n\tget offText() {\n\t\treturn this._offValues.value;\n\t}\n\n\t/\n\t Text that is set on the right side of the toggle.\n\t /\n\t@Input()\n\tset onText(value: string \| Observable<string>) {\n\t\tthis._onValues.override(value);\n\t}\n\n\tget onText() {\n\t\treturn this._onValues.value;\n\t}\n\t/\n\t Text that is set as the label of the toggle.\n\t /\n\t@Input() label: string \| TemplateRef<any>;\n\t/\n\t Size of the toggle component.\n\t /\n\t@Input() size: \"sm\" \| \"md\" = \"md\";\n\t/\n\t Set to `true` to hide the toggle label & set toggle on/off text to label.\n\t /\n\t@Input() hideLabel = false;\n\n\t/\n\t Set `aria-label` property for the button when label is empty\n\t /\n\t@Input() ariaLabel: string;\n\n\t@HostBinding(\"class.cds--toggle--skeleton\") @Input() skeleton = false;\n\n\t@HostBinding(\"class.cds--toggle\") toggleClass = true;\n\t@HostBinding(\"class.cds--toggle--disabled\") get disabledClass () {\n\t\treturn this.disabled;\n\t}\n\n\t@HostBinding(\"class.cds--form-item\") get formItem() {\n\t\treturn !this.skeleton;\n\t}\n\n\t/\n\t The unique id allocated to the `Toggle`.\n\t /\n\tid = \"toggle-\" + Toggle.toggleCount;\n\n\tprotected _offValues = this.i18n.getOverridable(\"TOGGLE.OFF\");\n\tprotected _onValues = this.i18n.getOverridable(\"TOGGLE.ON\");\n\t/\n\t Creates an instance of Toggle.\n\t /\n\tconstructor(protected changeDetectorRef: ChangeDetectorRef, protected i18n: I18n) {\n\t\tsuper(changeDetectorRef);\n\t\tToggle.toggleCount++;\n\t}\n\n\t/\n\t `ControlValueAccessor` method to programmatically disable the toggle input.\n\t \n\t ex: `this.formGroup.get(\"myToggle\").disable();`\n\t \n\t @param isDisabled `true` to disable the input\n\t /\n\tsetDisabledState(isDisabled: boolean) {\n\t\tthis.disabled = isDisabled;\n\t}\n\n\tgetOffText(): Observable<string> {\n\t\treturn this._offValues.subject;\n\t}\n\n\tgetOnText(): Observable<string> {\n\t\treturn this._onValues.subject;\n\t}\n\n\tgetCheckedText(): Observable<string> {\n\t\tif (this.checked) {\n\t\t\treturn this._onValues.subject;\n\t\t}\n\t\treturn this._offValues.subject;\n\t}\n\n\t/\n\t Creates instance of `ToggleChange` used to propagate the change event.\n\t /\n\temitChangeEvent() {\n\t\tthis.checkedChange.emit(this.checked);\n\t\tthis.propagateChange(this.checked);\n\t}\n\n\tpublic isTemplate(value) {\n\t\treturn value instanceof TemplateRef;\n\t}\n}\n","// modules\nimport { NgModule } from \"@angular/core\";\nimport { FormsModule } from \"@angular/forms\";\nimport { CommonModule } from \"@angular/common\";\n\n// imports\nimport { I18nModule } from \"carbon-components-angular/i18n\";\nimport { Toggle } from \"./toggle.component\";\n\n@NgModule({\n\tdeclarations: [\n\t\tToggle\n\t],\n\texports: [\n\t\tToggle\n\t],\n\timports: [\n\t\tCommonModule,\n\t\tFormsModule,\n\t\tI18nModule\n\t]\n})\nexport class ToggleModule { }\n","/\n Generated bundle index. Do not edit.\n /\n\nexport from './index';\n"],"names":[],"mappings":";;;;;;;;;AAaA;;;AAGG;IACS,YAIX;AAJD,CAAA,UAAY,WAAW,EAAA;AACtB,IAAA,WAAA,CAAA,WAAA,CAAA,MAAA,CAAA,GAAA,CAAA,CAAA,GAAA,MAAI,CAAA;AACJ,IAAA,WAAA,CAAA,WAAA,CAAA,SAAA,CAAA,GAAA,CAAA,CAAA,GAAA,SAAO,CAAA;AACP,IAAA,WAAA,CAAA,WAAA,CAAA,WAAA,CAAA,GAAA,CAAA,CAAA,GAAA,WAAS,CAAA;AACV,CAAC,EAJW,WAAW,KAAX,WAAW,GAItB,EAAA,CAAA,CAAA,CAAA;AAED;;;;AAIG;AAEH;;;;;;;;;;;;AAYG;AAgEG,MAAO,MAAO,SAAQ,QAAQ,CAAA;AAiEnC;;AAEG;IACH,WAAsB,CAAA,iBAAoC,EAAY,IAAU,EAAA;QAC/E,KAAK,CAAC,iBAAiB,CAAC,CAAC;QADJ,IAAiB,CAAA,iBAAA,GAAjB,iBAAiB,CAAmB;QAAY,IAAI,CAAA,IAAA,GAAJ,IAAI,CAAM;AAnChF;;AAEG;QACM,IAAI,CAAA,IAAA,GAAgB,IAAI,CAAC;AAClC;;AAEG;QACM,IAAS,CAAA,SAAA,GAAG,KAAK,CAAC;QAO0B,IAAQ,CAAA,QAAA,GAAG,KAAK,CAAC;QAEpC,IAAW,CAAA,WAAA,GAAG,IAAI,CAAC;AASrD;;AAEG;AACH,QAAA,IAAA,CAAA,EAAE,GAAG,SAAS,GAAG,MAAM,CAAC,WAAW,CAAC;QAE1B,IAAU,CAAA,UAAA,GAAG,IAAI,CAAC,IAAI,CAAC,cAAc,CAAC,YAAY,CAAC,CAAC;QACpD,IAAS,CAAA,SAAA,GAAG,IAAI,CAAC,IAAI,CAAC,cAAc,CAAC,WAAW,CAAC,CAAC;QAM3D,MAAM,CAAC,WAAW,EAAE,CAAC;KACrB;AAjED;;AAEG;IACH,IACI,OAAO,CAAC,KAAkC,EAAA;AAC7C,QAAA,IAAI,CAAC,UAAU,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC;KAChC;AAED,IAAA,IAAI,OAAO,GAAA;AACV,QAAA,OAAO,IAAI,CAAC,UAAU,CAAC,KAAK,CAAC;KAC7B;AAED;;AAEG;IACH,IACI,MAAM,CAAC,KAAkC,EAAA;AAC5C,QAAA,IAAI,CAAC,SAAS,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC;KAC/B;AAED,IAAA,IAAI,MAAM,GAAA;AACT,QAAA,OAAO,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC;KAC5B;AAsBD,IAAA,IAAgD,aAAa,GAAA;QAC5D,OAAO,IAAI,CAAC,QAAQ,CAAC;KACrB;AAED,IAAA,IAAyC,QAAQ,GAAA;AAChD,QAAA,OAAO,CAAC,IAAI,CAAC,QAAQ,CAAC;KACtB;AAiBD;;;;;;AAMG;AACH,IAAA,gBAAgB,CAAC,UAAmB,EAAA;AACnC,QAAA,IAAI,CAAC,QAAQ,GAAG,UAAU,CAAC;KAC3B;IAED,UAAU,GAAA;AACT,QAAA,OAAO,IAAI,CAAC,UAAU,CAAC,OAAO,CAAC;KAC/B;IAED,SAAS,GAAA;AACR,QAAA,OAAO,IAAI,CAAC,SAAS,CAAC,OAAO,CAAC;KAC9B;IAED,cAAc,GAAA;QACb,IAAI,IAAI,CAAC,OAAO,EAAE;AACjB,YAAA,OAAO,IAAI,CAAC,SAAS,CAAC,OAAO,CAAC;AAC9B,SAAA;AACD,QAAA,OAAO,IAAI,CAAC,UAAU,CAAC,OAAO,CAAC;KAC/B;AAED;;AAEG;IACH,eAAe,GAAA;QACd,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;AACtC,QAAA,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;KACnC;AAEM,IAAA,UAAU,CAAC,KAAK,EAAA;QACtB,OAAO,KAAK,YAAY,WAAW,CAAC;KACpC;;AA5GD;;AAEG;AACI,MAAW,CAAA,WAAA,GAAG,CAAC,CAAC;mGAJX,MAAM,EAAA,IAAA,EAAA,CAAA,EAAA,KAAA,EAAA,EAAA,CAAA,iBAAA,EAAA,EAAA,EAAA,KAAA,EAAA,EAAA,CAAA,IAAA,EAAA,CAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;AAAN,MAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,MAAM,EARP,QAAA,EAAA,wBAAA,EAAA,MAAA,EAAA,EAAA,OAAA,EAAA,SAAA,EAAA,MAAA,EAAA,QAAA,EAAA,KAAA,EAAA,OAAA,EAAA,IAAA,EAAA,MAAA,EAAA,SAAA,EAAA,WAAA,EAAA,SAAA,EAAA,WAAA,EAAA,QAAA,EAAA,UAAA,EAAA,EAAA,IAAA,EAAA,EAAA,UAAA,EAAA,EAAA,6BAAA,EAAA,eAAA,EAAA,mBAAA,EAAA,kBAAA,EAAA,6BAAA,EAAA,oBAAA,EAAA,sBAAA,EAAA,eAAA,EAAA,EAAA,EAAA,SAAA,EAAA;AACV,QAAA;AACC,YAAA,OAAO,EAAE,iBAAiB;AAC1B,YAAA,WAAW,EAAE,MAAM;AACnB,YAAA,KAAK,EAAE,IAAI;AACX,SAAA;KACD,EA3DS,eAAA,EAAA,IAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,EAAA,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAoDT,CAAA,CAAA,EAAA,QAAA,EAAA,IAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,OAAA,EAAA,QAAA,EAAA,WAAA,EAAA,MAAA,EAAA,CAAA,OAAA,EAAA,SAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,IAAA,EAAA,QAAA,EAAA,QAAA,EAAA,MAAA,EAAA,CAAA,MAAA,EAAA,UAAA,EAAA,UAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,gBAAA,EAAA,QAAA,EAAA,oBAAA,EAAA,MAAA,EAAA,CAAA,yBAAA,EAAA,kBAAA,EAAA,0BAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,MAAA,EAAA,IAAA,EAAA,EAAA,CAAA,SAAA,EAAA,IAAA,EAAA,OAAA,EAAA,CAAA,EAAA,CAAA,CAAA;2FASW,MAAM,EAAA,UAAA,EAAA,CAAA;kBA/DlB,SAAS;AAAC,YAAA,IAAA,EAAA,CAAA;AACV,oBAAA,QAAQ,EAAE,wBAAwB;AAClC,oBAAA,QAAQ,EAAE,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAoDT,CAAA,CAAA;AACD,oBAAA,SAAS,EAAE;AACV,wBAAA;AACC,4BAAA,OAAO,EAAE,iBAAiB;AAC1B,4BAAA,WAAW,EAAQ,MAAA;AACnB,4BAAA,KAAK,EAAE,IAAI;AACX,yBAAA;AACD,qBAAA;AACD,iBAAA,CAAA;2HAWI,OAAO,EAAA,CAAA;sBADV,KAAK;gBAaF,MAAM,EAAA,CAAA;sBADT,KAAK;gBAWG,KAAK,EAAA,CAAA;sBAAb,KAAK;gBAIG,IAAI,EAAA,CAAA;sBAAZ,KAAK;gBAIG,SAAS,EAAA,CAAA;sBAAjB,KAAK;gBAKG,SAAS,EAAA,CAAA;sBAAjB,KAAK;gBAE+C,QAAQ,EAAA,CAAA;sBAA5D,WAAW;uBAAC,6BAA6B,CAAA;;sBAAG,KAAK;gBAEhB,WAAW,EAAA,CAAA;sBAA5C,WAAW;uBAAC,mBAAmB,CAAA;gBACgB,aAAa,EAAA,CAAA;sBAA5D,WAAW;uBAAC,6BAA6B,CAAA;gBAID,QAAQ,EAAA,CAAA;sBAAhD,WAAW;uBAAC,sBAAsB,CAAA;;;AC/JpC;MAsBa,YAAY,CAAA;;yGAAZ,YAAY,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,QAAA,EAAA,CAAA,CAAA;0GAAZ,YAAY,EAAA,YAAA,EAAA,CAXvB,MAAM,CAAA,EAAA,OAAA,EAAA,CAMN,YAAY;QACZ,WAAW;AACX,QAAA,UAAU,aALV,MAAM,CAAA,EAAA,CAAA,CAAA;AAQK,YAAA,CAAA,IAAA,GAAA,EAAA,CAAA,mBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,QAAA,EAAA,EAAA,EAAA,IAAA,EAAA,YAAY,YALvB,YAAY;QACZ,WAAW;QACX,UAAU,CAAA,EAAA,CAAA,CAAA;2FAGC,YAAY,EAAA,UAAA,EAAA,CAAA;kBAbxB,QAAQ;AAAC,YAAA,IAAA,EAAA,CAAA;AACT,oBAAA,YAAY,EAAE;wBACb,MAAM;AACN,qBAAA;AACD,oBAAA,OAAO,EAAE;wBACR,MAAM;AACN,qBAAA;AACD,oBAAA,OAAO,EAAE;wBACR,YAAY;wBACZ,WAAW;wBACX,UAAU;AACV,qBAAA;AACD,iBAAA,CAAA;;;ACrBD;;AAEG;;;;"}

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "carbon-components-angular",
-  "version": "5.53.0",
+  "version": "5.54.0",
   "description": "Next generation components",
   "main": "index.js",
   "repository": {

package/tag/index.d.ts CHANGED Viewed

@@ -20,4 +20,7 @@
 export * from "./tag-filter.component";
 export * from "./tag.component";
+export * from "./tag-icon.directive";
+export * from "./tag-selectable.component";
+export * from "./tag-operational.component";
 export * from "./tag.module";

package/tag/tag-filter.component.d.ts CHANGED Viewed

@@ -42,8 +42,12 @@ export declare class TagFilter extends Tag {
     }>;
     onClick(event: any): void;
     onClose(event: any): void;
+    /**
+     * @todo
+     * Remove `cds--tag--${this.size}` in v7
+     */
     get attrClass(): string;
     get attrAriaLabel(): string;
     static ɵfac: i0.ɵɵFactoryDeclaration<TagFilter, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<TagFilter, "cds-tag-filter, ibm-tag-filter", never, { "closeButtonLabel": "closeButtonLabel"; "disabled": "disabled"; "title": "title"; }, { "close": "close"; "click": "click"; }, never, ["*"], false>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<TagFilter, "cds-tag-filter, ibm-tag-filter", never, { "closeButtonLabel": "closeButtonLabel"; "disabled": "disabled"; "title": "title"; }, { "close": "close"; "click": "click"; }, never, ["[cdsTagIcon],[ibmTagIcon]", "*"], false>;
 }

package/tag/tag-icon.directive.d.ts ADDED Viewed

@@ -0,0 +1,26 @@
+/**
+ *
+ * carbon-angular v0.0.0 | tag-icon.directive.d.ts
+ *
+ * Copyright 2014, 2024 IBM
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import * as i0 from "@angular/core";
+export declare class TagIconDirective {
+    tagIcon: boolean;
+    static ɵfac: i0.ɵɵFactoryDeclaration<TagIconDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<TagIconDirective, "[cdsTagIcon], [ibmTagIcon]", never, {}, {}, never, never, false>;
+}

package/tag/tag-operational.component.d.ts ADDED Viewed

@@ -0,0 +1,35 @@
+/**
+ *
+ * carbon-angular v0.0.0 | tag-operational.component.d.ts
+ *
+ * Copyright 2014, 2024 IBM
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import { Tag } from "./tag.component";
+import * as i0 from "@angular/core";
+export declare class TagOperationalComponent extends Tag {
+    role: string;
+    buttonType: string;
+    tabIndex: number;
+    disabled: boolean;
+    /**
+     * @todo
+     * Remove `cds--tag--${this.size}` in v7
+     */
+    get attrClass(): string;
+    static ɵfac: i0.ɵɵFactoryDeclaration<TagOperationalComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<TagOperationalComponent, "cds-tag-operational, ibm-tag-operational", never, { "disabled": "disabled"; }, {}, never, ["[cdsTagIcon],[ibmTagIcon]", "*"], false>;
+}

package/tag/tag-selectable.component.d.ts ADDED Viewed

@@ -0,0 +1,42 @@
+/**
+ *
+ * carbon-angular v0.0.0 | tag-selectable.component.d.ts
+ *
+ * Copyright 2014, 2024 IBM
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import { EventEmitter } from "@angular/core";
+import * as i0 from "@angular/core";
+export declare class TagSelectableComponent {
+    role: string;
+    buttonType: string;
+    tabIndex: number;
+    get ariaPressed(): boolean;
+    size: "sm" | "md" | "lg";
+    skeleton: boolean;
+    disabled: boolean;
+    class: string;
+    selected: boolean;
+    selectedChange: EventEmitter<boolean>;
+    onClick(): void;
+    /**
+     * @todo
+     * Remove `cds--tag--${this.size}` in v7
+     */
+    get attrClass(): string;
+    static ɵfac: i0.ɵɵFactoryDeclaration<TagSelectableComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<TagSelectableComponent, "cds-tag-selectable, ibm-tag-selectable", never, { "size": "size"; "skeleton": "skeleton"; "disabled": "disabled"; "class": "class"; "selected": "selected"; }, { "selectedChange": "selectedChange"; }, never, ["[cdsTagIcon],[ibmTagIcon]", "*"], false>;
+}

package/tag/tag.component.d.ts CHANGED Viewed

@@ -40,9 +40,14 @@ export declare class Tag {
     /**
      * Tag render size
      */
-    size: "sm" | "md";
+    size: "sm" | "md" | "lg";
     class: string;
+    skeleton: boolean;
+    /**
+     * @todo
+     * Remove `cds--tag--${this.size}` in v7
+     */
     get attrClass(): string;
     static ɵfac: i0.ɵɵFactoryDeclaration<Tag, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<Tag, "cds-tag, ibm-tag", never, { "type": "type"; "size": "size"; "class": "class"; }, {}, never, ["*"], false>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<Tag, "cds-tag, ibm-tag", never, { "type": "type"; "size": "size"; "class": "class"; "skeleton": "skeleton"; }, {}, never, ["[cdsTagIcon],[ibmTagIcon]", "*"], false>;
 }

package/tag/tag.module.d.ts CHANGED Viewed

@@ -21,10 +21,13 @@
 import * as i0 from "@angular/core";
 import * as i1 from "./tag.component";
 import * as i2 from "./tag-filter.component";
-import * as i3 from "@angular/common";
-import * as i4 from "carbon-components-angular/icon";
+import * as i3 from "./tag-icon.directive";
+import * as i4 from "./tag-selectable.component";
+import * as i5 from "./tag-operational.component";
+import * as i6 from "@angular/common";
+import * as i7 from "carbon-components-angular/icon";
 export declare class TagModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<TagModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<TagModule, [typeof i1.Tag, typeof i2.TagFilter], [typeof i3.CommonModule, typeof i4.IconModule], [typeof i1.Tag, typeof i2.TagFilter]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<TagModule, [typeof i1.Tag, typeof i2.TagFilter, typeof i3.TagIconDirective, typeof i4.TagSelectableComponent, typeof i5.TagOperationalComponent], [typeof i6.CommonModule, typeof i7.IconModule], [typeof i1.Tag, typeof i2.TagFilter, typeof i3.TagIconDirective, typeof i4.TagSelectableComponent, typeof i5.TagOperationalComponent]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<TagModule>;
 }

package/toggle/toggle.component.d.ts CHANGED Viewed

@@ -24,6 +24,7 @@ import { I18n } from "carbon-components-angular/i18n";
 import { Observable } from "rxjs";
 import * as i0 from "@angular/core";
 /**
+ * @deprecated since v5 - Use boolean
  * Defines the set of states for a toggle component.
  */
 export declare enum ToggleState {
@@ -78,6 +79,10 @@ export declare class Toggle extends Checkbox {
      * Set to `true` to hide the toggle label & set toggle on/off text to label.
      */
     hideLabel: boolean;
+    /**
+     * Set `aria-label` property for the button when label is empty
+     */
+    ariaLabel: string;
     skeleton: boolean;
     toggleClass: boolean;
     get disabledClass(): boolean;
@@ -109,5 +114,5 @@ export declare class Toggle extends Checkbox {
     emitChangeEvent(): void;
     isTemplate(value: any): boolean;
     static ɵfac: i0.ɵɵFactoryDeclaration<Toggle, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<Toggle, "cds-toggle, ibm-toggle", never, { "offText": "offText"; "onText": "onText"; "label": "label"; "size": "size"; "hideLabel": "hideLabel"; "skeleton": "skeleton"; }, {}, never, never, false>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<Toggle, "cds-toggle, ibm-toggle", never, { "offText": "offText"; "onText": "onText"; "label": "label"; "size": "size"; "hideLabel": "hideLabel"; "ariaLabel": "ariaLabel"; "skeleton": "skeleton"; }, {}, never, never, false>;
 }

package/docs/storybook/contained-list-contained-list-stories.3c337840.iframe.bundle.js DELETED Viewed

@@ -1 +0,0 @@

- "use strict";(self.webpackChunkcarbon_components_angular=self.webpackChunkcarbon_components_angular||[]).push([[3523],{"./node_modules/@carbon/icons/es/apple/16.js":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{__webpack_require__.d(__webpack_exports__,{Z:()=>_16});var _16={elem:"svg",attrs:{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 32 32",fill:"currentColor",width:16,height:16},content:[{elem:"path",attrs:{d:"M21.7788,8a11.4843,11.4843,0,0,0-3.0547.5342,14.5665,14.5665,0,0,1-1.8225.4126A6.0054,6.0054,0,0,0,11,4V6a3.9933,3.9933,0,0,1,3.8267,2.9c-.5181-.0879-1.0569-.2207-1.6172-.3648A12.89,12.89,0,0,0,10.0317,8C6.311,8,4,11.0652,4,16c0,7.51,4.0679,11.999,8.0005,12h.0015a7.1576,7.1576,0,0,0,2.49-.59A5.0128,5.0128,0,0,1,16,27a5.0266,5.0266,0,0,1,1.5112.41A7.15,7.15,0,0,0,20,28h0c3.9307-.001,8-4.49,8-12C28,12.3094,26.3706,8,21.7788,8ZM20,26h0a5.5038,5.5038,0,0,1-1.7905-.4639A6.4168,6.4168,0,0,0,16,25a6.4043,6.4043,0,0,0-2.2061.5361A5.5343,5.5343,0,0,1,12,26h.0015C9.0513,25.9988,6,22.2586,6,16c0-1.8037.3931-6,4.0317-6a11.2363,11.2363,0,0,1,2.6807.4726A12.9819,12.9819,0,0,0,15.7612,11h.4922a11.7955,11.7955,0,0,0,2.9956-.5361A9.8483,9.8483,0,0,1,21.7788,10C25.7964,10,26,14.9978,26,16,26,22.2586,22.9482,25.9988,20,26Z"}},{elem:"path",attrs:{d:"M18,7H17V6a2.0021,2.0021,0,0,1,2-2h1V5A2.0021,2.0021,0,0,1,18,7Z"}}],name:"apple",size:16}},"./node_modules/@carbon/icons/es/fish/16.js":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{__webpack_require__.d(__webpack_exports__,{Z:()=>_16});var _16={elem:"svg",attrs:{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 32 32",fill:"currentColor",width:16,height:16},content:[{elem:"circle",attrs:{cx:"24",cy:"7",r:"1"}},{elem:"path",attrs:{d:"M26,2A16.0183,16.0183,0,0,0,10,18v2H3a1,1,0,0,0-.707,1.707l8,8A1,1,0,0,0,12,29V22h2A16.0183,16.0183,0,0,0,30,6V2ZM10,26.5857,5.4141,22H10ZM12,20V18a13.9394,13.9394,0,0,1,3.908-9.6777l7.77,7.7695A13.94,13.94,0,0,1,14,20ZM28,6a13.9163,13.9163,0,0,1-2.98,8.6055L17.3945,6.98A13.9163,13.9163,0,0,1,26,4h2Z"}}],name:"fish",size:16}},"./node_modules/@carbon/icons/es/strawberry/16.js":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{__webpack_require__.d(__webpack_exports__,{Z:()=>_16});var _16={elem:"svg",attrs:{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 32 32",fill:"currentColor",width:16,height:16},content:[{elem:"path",attrs:{d:"M9 10H11V12H9zM9 14H11V16H9zM13 12H15V14H13z"}},{elem:"path",attrs:{d:"M9 28a5.169 5.169 0 01-.7441-.054A5.0935 5.0935 0 014 22.8669V11.1985a7.1615 7.1615 0 016.31-7.1653 6.9607 6.9607 0 014.4643 1.0706l7.9688 4.9807a6.98 6.98 0 01-.6885 12.19l-10.88 5.2285A4.9765 4.9765 0 019 28zM11.002 6q-.2484 0-.5005.0241A5.1463 5.1463 0 006 11.1985V22.8669a3.0839 3.0839 0 002.5435 3.1 3.0266 3.0266 0 001.7622-.2649l10.8828-5.23a4.9807 4.9807 0 00.4887-8.6958L13.7046 6.7935A4.9687 4.9687 0 0011.002 6zM26 7H22a4.0045 4.0045 0 01-4-4V2h2V3a2.0021 2.0021 0 002 2h4z"}}],name:"strawberry",size:16}},"./node_modules/@carbon/icons/es/subtract--alt/16.js":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{__webpack_require__.d(__webpack_exports__,{Z:()=>_16});var _16={elem:"svg",attrs:{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 32 32",fill:"currentColor",width:16,height:16},content:[{elem:"path",attrs:{d:"M16,4c6.6,0,12,5.4,12,12s-5.4,12-12,12S4,22.6,4,16S9.4,4,16,4 M16,2C8.3,2,2,8.3,2,16s6.3,14,14,14s14-6.3,14-14\tS23.7,2,16,2z"}},{elem:"path",attrs:{d:"M8 15H24V17H8z"}}],name:"subtract--alt",size:16}},"./node_modules/@carbon/icons/es/wheat/16.js":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{__webpack_require__.d(__webpack_exports__,{Z:()=>_16});var _16={elem:"svg",attrs:{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 32 32",fill:"currentColor",width:16,height:16},content:[{elem:"path",attrs:{d:"M21,3V5.5857l-4,4V1H15V9.5857l-4-4V3H9V19a7.004,7.004,0,0,0,6,6.92V30h2V25.92A7.004,7.004,0,0,0,23,19V3ZM15,23.8987A5.008,5.008,0,0,1,11,19v-2.586l4,4Zm0-6.313-4-4V8.4138l4,4Zm2-5.1719,4-4v5.1719l-4,4Zm0,11.4849V20.4138l4-4V19A5.008,5.008,0,0,1,17,23.8987Z"}}],name:"wheat",size:16}},"./node_modules/@carbon/utils-position/index.js":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{var _a,PLACEMENTS;__webpack_require__.d(__webpack_exports__,{FK:()=>position,ZP:()=>__WEBPACK_DEFAULT_EXPORT__}),function(PLACEMENTS){PLACEMENTS.LEFT="left",PLACEMENTS.RIGHT="right",PLACEMENTS.TOP="top",PLACEMENTS.BOTTOM="bottom"}(PLACEMENTS||(PLACEMENTS={}));var defaultPositions=((_a={})[PLACEMENTS.LEFT]=function(referenceOffset,target,referenceRect){return{top:referenceOffset.top-Math.round(target.offsetHeight/2)+Math.round(referenceRect.height/2),left:Math.round(referenceOffset.left-target.offsetWidth)}},_a[PLACEMENTS.RIGHT]=function(referenceOffset,target,referenceRect){return{top:referenceOffset.top-Math.round(target.offsetHeight/2)+Math.round(referenceRect.height/2),left:Math.round(referenceOffset.left+referenceRect.width)}},_a[PLACEMENTS.TOP]=function(referenceOffset,target,referenceRect){return{top:Math.round(referenceOffset.top-target.offsetHeight),left:referenceOffset.left-Math.round(target.offsetWidth/2)+Math.round(referenceRect.width/2)}},_a[PLACEMENTS.BOTTOM]=function(referenceOffset,target,referenceRect){return{top:Math.round(referenceOffset.top+referenceRect.height),left:referenceOffset.left-Math.round(target.offsetWidth/2)+Math.round(referenceRect.width/2)}},_a),windowRef="undefined"!=typeof window?window:{innerHeight:0,scrollY:0,innerWidth:0,scrollX:0},Position=function(){function Position(positions){void 0===positions&&(positions={}),this.positions=defaultPositions,this.positions=Object.assign({},defaultPositions,positions)}return Position.prototype.getRelativeOffset=function(target){for(var offsets={left:target.offsetLeft,top:target.offsetTop};target.offsetParent&&"static"===getComputedStyle(target.offsetParent).position;)offsets.left+=target.offsetLeft,offsets.top+=target.offsetTop,target=target.offsetParent;return offsets},Position.prototype.getAbsoluteOffset=function(target){for(var currentNode=target,margins={top:0,left:0};currentNode.offsetParent;){var computed=getComputedStyle(currentNode.offsetParent);"static"===computed.position&&computed.marginLeft&&computed.marginTop&&(parseInt(computed.marginTop,10)&&(margins.top+=parseInt(computed.marginTop,10)),parseInt(computed.marginLeft,10)&&(margins.left+=parseInt(computed.marginLeft,10))),currentNode=currentNode.offsetParent}var targetRect=target.getBoundingClientRect(),relativeRect=document.body.getBoundingClientRect();return{top:targetRect.top-relativeRect.top+margins.top,left:targetRect.left-relativeRect.left+margins.left}},Position.prototype.findRelative=function(reference,target,placement){var referenceOffset=this.getRelativeOffset(reference),referenceRect=reference.getBoundingClientRect();return this.calculatePosition(referenceOffset,referenceRect,target,placement)},Position.prototype.findAbsolute=function(reference,target,placement){var referenceOffset=this.getAbsoluteOffset(reference),referenceRect=reference.getBoundingClientRect();return this.calculatePosition(referenceOffset,referenceRect,target,placement)},Position.prototype.findPosition=function(reference,target,placement,offsetFunction){void 0===offsetFunction&&(offsetFunction=this.getAbsoluteOffset.bind(this));var referenceOffset=offsetFunction(reference),referenceRect=reference.getBoundingClientRect();return this.calculatePosition(referenceOffset,referenceRect,target,placement)},Position.prototype.findPositionAt=function(offset,target,placement){return this.calculatePosition(offset,{top:0,left:0,height:0,width:0},target,placement)},Position.prototype.getPlacementBox=function(target,position){var targetBottom=target.offsetHeight+position.top,targetRight=target.offsetWidth+position.left;return{top:position.top,bottom:targetBottom,left:position.left,right:targetRight}},Position.prototype.addOffset=function(position,top,left){return void 0===top&&(top=0),void 0===left&&(left=0),Object.assign({},position,{top:position.top+top,left:position.left+left})},Position.prototype.setElement=function(element,position){element.style.top=position.top+"px",element.style.left=position.left+"px"},Position.prototype.findBestPlacement=function(reference,target,placements,containerFunction,positionFunction){var _this=this;void 0===containerFunction&&(containerFunction=this.defaultContainerFunction.bind(this)),void 0===positionFunction&&(positionFunction=this.findPosition.bind(this));var weightedPlacements=placements.map((function(placement){var pos=positionFunction(reference,target,placement),box=_this.getPlacementBox(target,pos),hiddenHeight=0,hiddenWidth=0,container=containerFunction();box.top<container.top?hiddenHeight=container.top-box.top:box.bottom>container.height&&(hiddenHeight=box.bottom-container.height),box.left<container.left?hiddenWidth=container.left-box.left:box.right>container.width&&(hiddenWidth=box.right-container.width),hiddenHeight&&!hiddenWidth?hiddenWidth=1:hiddenWidth&&!hiddenHeight&&(hiddenHeight=1);var area=target.offsetHeight*target.offsetWidth;return{placement,weight:(area-hiddenHeight*hiddenWidth)/area}}));return weightedPlacements.sort((function(a,b){return b.weight-a.weight})),weightedPlacements[0].placement},Position.prototype.findBestPlacementAt=function(offset,target,placements,containerFunction){var _this=this;void 0===containerFunction&&(containerFunction=this.defaultContainerFunction.bind(this));return this.findBestPlacement(null,target,placements,containerFunction,(function(_,target,placement){return _this.findPositionAt(offset,target,placement)}))},Position.prototype.defaultContainerFunction=function(){return{top:0,left:0,height:windowRef.innerHeight,width:windowRef.innerWidth}},Position.prototype.calculatePosition=function(referenceOffset,referenceRect,target,placement){return this.positions[placement]?this.positions[placement](referenceOffset,target,referenceRect):(console.error("No function found for placement, defaulting to 0,0"),{left:0,top:0})},Position}(),position=new Position;const __WEBPACK_DEFAULT_EXPORT__=Position},"./src/layer/index.ts":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{__webpack_require__.d(__webpack_exports__,{A:()=>LayerDirective,D:()=>LayerModule});var tslib_es6=__webpack_require__("./node_modules/tslib/tslib.es6.js"),core=__webpack_require__("./node_modules/@angular/core/fesm2020/core.mjs");let LayerDirective=class LayerDirective{set ibmLayer(level){this.cdsLayer=level}set cdsLayer(level){"number"==typeof level&&(this._passedLevel=level,this.layer=level)}get cdsLayer(){return this._passedLevel}set layer(level){"number"==typeof level&&(this._level=Math.max(0,Math.min(level,2)),this.layerChildren&&this.layerChildren.forEach((layer=>{layer!==this&&(layer.layer="number"==typeof layer._passedLevel?layer._passedLevel:this.layer+1)})))}get layer(){return this._level}get layerOneClass(){return 0===this.layer}get layerTwoClass(){return 1===this.layer}get layerThreeClass(){return 2===this.layer}ngAfterContentInit(){"number"!=typeof this.cdsLayer&&(this.layer=1)}};LayerDirective.propDecorators={ibmLayer:[{type:core.Input}],cdsLayer:[{type:core.Input}],layerOneClass:[{type:core.HostBinding,args:["class.cds--layer-one"]}],layerTwoClass:[{type:core.HostBinding,args:["class.cds--layer-two"]}],layerThreeClass:[{type:core.HostBinding,args:["class.cds--layer-three"]}],layerChildren:[{type:core.ContentChildren,args:[LayerDirective,{descendants:!1}]}]},LayerDirective=(0,tslib_es6.gn)([(0,core.Directive)({selector:"[cdsLayer], [ibmLayer]",exportAs:"layer"})],LayerDirective);var common=__webpack_require__("./node_modules/@angular/common/fesm2020/common.mjs");let LayerModule=class LayerModule{};LayerModule=(0,tslib_es6.gn)([(0,core.NgModule)({declarations:[LayerDirective],exports:[LayerDirective],imports:[common.CommonModule]})],LayerModule)},"./src/layout/index.ts":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{__webpack_require__.d(__webpack_exports__,{x:()=>LayoutModule,s:()=>StackDirective});var tslib_es6=__webpack_require__("./node_modules/tslib/tslib.es6.js"),core=__webpack_require__("./node_modules/@angular/core/fesm2020/core.mjs"),common=__webpack_require__("./node_modules/@angular/common/fesm2020/common.mjs");let StackDirective=class StackDirective{constructor(render,hostElement){this.render=render,this.hostElement=hostElement,this.cdsStack="vertical"}get isHorizontal(){return"horizontal"===this.cdsStack}get isVertical(){return"vertical"===this.cdsStack||!this.cdsStack}set ibmStack(type){this.cdsStack=type}set gap(num){void 0!==num&&(this.render.removeClass(this.hostElement.nativeElement,`cds--stack-scale-${this._gap}`),this.render.addClass(this.hostElement.nativeElement,`cds--stack-scale-${num}`),this._gap=num)}};StackDirective.ctorParameters=()=>[{type:core.Renderer2},{type:core.ElementRef}],StackDirective.propDecorators={isHorizontal:[{type:core.HostBinding,args:["class.cds--stack-horizontal"]}],isVertical:[{type:core.HostBinding,args:["class.cds--stack-vertical"]}],ibmStack:[{type:core.Input}],cdsStack:[{type:core.Input}],gap:[{type:core.Input}]},StackDirective=(0,tslib_es6.gn)([(0,core.Directive)({selector:"[cdsStack], [ibmStack]"})],StackDirective);let LayoutModule=class LayoutModule{};LayoutModule=(0,tslib_es6.gn)([(0,core.NgModule)({declarations:[StackDirective],exports:[StackDirective],imports:[common.CommonModule]})],LayoutModule)},"./src/search/index.ts":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{__webpack_require__.d(__webpack_exports__,{o:()=>Search,t:()=>SearchModule});var tslib_es6=__webpack_require__("./node_modules/tslib/tslib.es6.js"),search_componentngResource=__webpack_require__("./src/search/search.component.html?ngResource"),core=__webpack_require__("./node_modules/@angular/core/fesm2020/core.mjs"),fesm2020_forms=__webpack_require__("./node_modules/@angular/forms/fesm2020/forms.mjs"),i18n=__webpack_require__("./src/i18n/index.ts");let Search=class Search{constructor(elementRef,i18n){this.elementRef=elementRef,this.i18n=i18n,this.theme="dark",this.size="md",this.disabled=!1,this.toolbar=!1,this.expandable=!1,this.skeleton=!1,this.active=!1,this.tableSearch=!1,this.id=`search-${Search.searchCount}`,this.value="",this.autocomplete="on",this.label=this.i18n.get().SEARCH.LABEL,this.placeholder=this.i18n.get().SEARCH.PLACEHOLDER,this.clearButtonTitle=this.i18n.get().SEARCH.CLEAR_BUTTON,this.searchTitle="",this.fluid=!1,this.valueChange=new core.EventEmitter,this.open=new core.EventEmitter,this.clear=new core.EventEmitter,this.search=new core.EventEmitter,this.isComposing=!1,this.onTouched=()=>{},this.propagateChange=_=>{},Search.searchCount++}get containerClass(){return!(this.toolbar||this.expandable)}get fluidSkeletonClass(){return this.skeleton&&this.fluid}writeValue(value){this.value=value}registerOnChange(fn){this.propagateChange=fn}registerOnTouched(fn){this.onTouched=fn}onSearch(search){this.isComposing||(this.value=search,this.doValueChange())}onEnter(){this.search.emit(this.value)}clearSearch(){this.value="",this.clear.emit(),this.propagateChange(this.value)}doValueChange(){this.valueChange.emit(this.value),this.propagateChange(this.value)}openSearch(){this.active=!0,this.open.emit(this.active),setTimeout((()=>this.inputRef.nativeElement.focus()))}keyDown(event){(this.toolbar||this.expandable)&&("Escape"===event.key?""===this.value&&(this.active=!1,this.open.emit(this.active)):"Enter"===event.key&&this.openSearch()),"Escape"===event.key&&""!==this.value&&this.clearSearch()}focusOut(event){this.onTouched(),(this.expandable||this.toolbar)&&this.inputRef&&""===this.inputRef.nativeElement.value&&!this.elementRef.nativeElement.contains(event.relatedTarget)&&(this.active=!1,this.open.emit(this.active))}focusIn(event){this.onTouched(),!this.expandable&&!this.toolbar||!this.inputRef||event.relatedTarget||this.elementRef.nativeElement.contains(event.relatedTarget)||this.openSearch()}compositionStart(event){this.isComposing=!0}compositionEnd(event){this.isComposing=!1,this.onSearch(this.value+event.data)}};Search.searchCount=0,Search.ctorParameters=()=>[{type:core.ElementRef},{type:i18n.oc}],Search.propDecorators={containerClass:[{type:core.HostBinding,args:["class.cds--form-item"]}],fluidSkeletonClass:[{type:core.HostBinding,args:["class.cds--text-input--fluid__skeleton"]}],theme:[{type:core.Input}],size:[{type:core.Input}],disabled:[{type:core.Input}],toolbar:[{type:core.Input}],expandable:[{type:core.Input}],skeleton:[{type:core.Input}],active:[{type:core.Input}],tableSearch:[{type:core.Input}],name:[{type:core.Input}],id:[{type:core.Input}],required:[{type:core.Input}],value:[{type:core.Input}],autocomplete:[{type:core.Input}],label:[{type:core.Input}],placeholder:[{type:core.Input}],clearButtonTitle:[{type:core.Input}],searchTitle:[{type:core.Input}],ariaLabel:[{type:core.Input}],fluid:[{type:core.Input}],valueChange:[{type:core.Output}],open:[{type:core.Output}],clear:[{type:core.Output}],search:[{type:core.Output}],inputRef:[{type:core.ViewChild,args:["input"]}],keyDown:[{type:core.HostListener,args:["keydown",["$event"]]}],focusOut:[{type:core.HostListener,args:["focusout",["$event"]]}],focusIn:[{type:core.HostListener,args:["focusin",["$event"]]}],compositionStart:[{type:core.HostListener,args:["compositionstart",["$event"]]}],compositionEnd:[{type:core.HostListener,args:["compositionend",["$event"]]}]},Search=(0,tslib_es6.gn)([(0,core.Component)({selector:"cds-search, ibm-search",template:search_componentngResource,providers:[{provide:fesm2020_forms.JU,useExisting:Search,multi:!0}]})],Search);var common=__webpack_require__("./node_modules/@angular/common/fesm2020/common.mjs"),icon=__webpack_require__("./src/icon/index.ts");let SearchModule=class SearchModule{};SearchModule=(0,tslib_es6.gn)([(0,core.NgModule)({declarations:[Search],exports:[Search],imports:[fesm2020_forms.u5,common.CommonModule,i18n.LU,icon.QX]})],SearchModule)},"./src/tag/index.ts":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{__webpack_require__.d(__webpack_exports__,{Vp:()=>Tag,Wh:()=>TagModule});var tslib_es6=__webpack_require__("./node_modules/tslib/tslib.es6.js"),core=__webpack_require__("./node_modules/@angular/core/fesm2020/core.mjs");let Tag=class Tag{constructor(){this.type="gray",this.size="md",this.class=""}get attrClass(){return`cds--tag cds--tag--${this.type} cds--tag--${this.size} cds--layout--size-${this.size} ${this.class}`}};Tag.propDecorators={type:[{type:core.Input}],size:[{type:core.Input}],class:[{type:core.Input}],attrClass:[{type:core.HostBinding,args:["attr.class"]}]},Tag=(0,tslib_es6.gn)([(0,core.Component)({selector:"cds-tag, ibm-tag",template:"<ng-content></ng-content>"})],Tag);let TagFilter=class TagFilter extends Tag{constructor(){super(...arguments),this.closeButtonLabel="Clear Filter",this.close=new core.EventEmitter,this.click=new core.EventEmitter}onClick(event){event.stopImmediatePropagation(),this.disabled||this.click.emit({action:"click"})}onClose(event){event.stopImmediatePropagation(),this.click.emit({action:"close"}),this.close.emit()}get attrClass(){return`cds--tag cds--tag--filter cds--tag--${this.type} cds--tag--${this.size} cds--layout--size-${this.size} ${this.class}${this.disabled?" cds--tag--disabled":""}`}get attrAriaLabel(){return`${this.title||""} ${this.closeButtonLabel}`.trim()}};TagFilter.propDecorators={closeButtonLabel:[{type:core.Input}],disabled:[{type:core.Input}],title:[{type:core.Input}],close:[{type:core.Output}],click:[{type:core.Output}],attrClass:[{type:core.HostBinding,args:["attr.class"]}],attrAriaLabel:[{type:core.HostBinding,args:["attr.aria-label"]}]},TagFilter=(0,tslib_es6.gn)([(0,core.Component)({selector:"cds-tag-filter, ibm-tag-filter",template:'\n\t\t<span\n\t\t\tclass="cds--tag__label"\n\t\t\t[attr.title]="title ? title : null"\n\t\t\t(click)="onClick($event)">\n\t\t\t<ng-content></ng-content>\n\t\t</span>\n\t\t<button\n\t\t\tclass="cds--tag__close-icon"\n\t\t\t(click)="onClose($event)"\n\t\t\t[disabled]="disabled"\n\t\t\t[title]="closeButtonLabel">\n\t\t\t<span class="cds--visually-hidden">{{closeButtonLabel}}</span>\n\t\t\t<svg cdsIcon="close" size="16"></svg>\n\t\t</button>\n\t'})],TagFilter);var common=__webpack_require__("./node_modules/@angular/common/fesm2020/common.mjs"),icon=__webpack_require__("./src/icon/index.ts");let TagModule=class TagModule{};TagModule=(0,tslib_es6.gn)([(0,core.NgModule)({declarations:[Tag,TagFilter],exports:[Tag,TagFilter],imports:[common.CommonModule,icon.QX]})],TagModule)},"./src/contained-list/contained-list.stories.ts":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,{__namedExportsOrder:()=>__namedExportsOrder,basic:()=>basic,default:()=>contained_list_stories,disclosed:()=>disclosed,usageExamples:()=>usageExamples,withActions:()=>withActions,withActionsAndContextData:()=>withActionsAndContextData,withIcons:()=>withIcons,withInteractiveItems:()=>withInteractiveItems,withInteractiveItemsAndActions:()=>withInteractiveItemsAndActions,withLayer:()=>withLayer,withListTitleDecorators:()=>withListTitleDecorators});var ContainedListSize,ContainedListKind,dist=__webpack_require__("./node_modules/@storybook/angular/dist/index.mjs"),tslib_es6=__webpack_require__("./node_modules/tslib/tslib.es6.js"),core=__webpack_require__("./node_modules/@angular/core/fesm2020/core.mjs");!function(ContainedListSize){ContainedListSize.Small="sm",ContainedListSize.Medium="md",ContainedListSize.Large="lg",ContainedListSize.ExtraLarge="xl"}(ContainedListSize||(ContainedListSize={})),function(ContainedListKind){ContainedListKind.OnPage="on-page",ContainedListKind.Disclosed="disclosed"}(ContainedListKind||(ContainedListKind={}));let ContainedList=class ContainedList{constructor(){this.isInset=!1,this.kind=ContainedListKind.OnPage,this.size=ContainedListSize.Large,this.labelId=`contained-list-${ContainedList.count++}-header`,this.ContainedListSize=ContainedListSize,this.ContainedListKind=ContainedListKind}isTemplate(value){return value instanceof core.TemplateRef}};ContainedList.count=0,ContainedList.propDecorators={action:[{type:core.Input}],isInset:[{type:core.Input}],kind:[{type:core.Input}],label:[{type:core.Input}],size:[{type:core.Input}],labelId:[{type:core.Input}]},ContainedList=(0,tslib_es6.gn)([(0,core.Component)({selector:"cds-contained-list, ibm-contained-list",template:'\n\t\t<div\n\t\t\tclass="cds--contained-list"\n\t\t\t[ngClass]="{\n\t\t\t\t\'cds--contained-list--inset-rulers\': isInset,\n\t\t\t\t\'cds--contained-list--on-page\': kind === ContainedListKind.OnPage,\n\t\t\t\t\'cds--contained-list--disclosed\': kind === ContainedListKind.Disclosed,\n\t\t\t\t\'cds--contained-list--sm\': size === ContainedListSize.Small,\n\t\t\t\t\'cds--contained-list--md\': size === ContainedListSize.Medium,\n\t\t\t\t\'cds--contained-list--lg\': size === ContainedListSize.Large,\n\t\t\t\t\'cds--contained-list--xl\': size === ContainedListSize.ExtraLarge,\n\t\t\t\t\'cds--layout--size-sm\': size === ContainedListSize.Small,\n\t\t\t\t\'cds--layout--size-md\': size === ContainedListSize.Medium,\n\t\t\t\t\'cds--layout--size-lg\': size === ContainedListSize.Large,\n\t\t\t\t\'cds--layout--size-xl\': size === ContainedListSize.ExtraLarge\n\t\t\t}">\n\t\t\t<div class="cds--contained-list__header">\n\t\t\t\t<div [id]="labelId" class="cds--contained-list__label">\n\t\t\t\t\t<ng-container *ngIf="!isTemplate(label)">{{ label }}</ng-container>\n\t\t\t\t\t<ng-template *ngIf="isTemplate(label)" [ngTemplateOutlet]="label"></ng-template>\n\t\t\t\t</div>\n\n\t\t\t\t<div class="cds--contained-list__action" *ngIf="action">\n\t\t\t\t\t<ng-template [ngTemplateOutlet]="action"></ng-template>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t\t<div role="list" [attr.aria-labelledby]="labelId">\n\t\t\t\t<ng-content></ng-content>\n\t\t\t</div>\n\t\t</div>\n\t',changeDetection:core.ChangeDetectionStrategy.OnPush})],ContainedList);let ContainedListItem=class ContainedListItem{constructor(){this.disabled=!1,this.click=new core.EventEmitter,this.itemClass=!0,this.role="listitem"}get itemClickableClass(){return this.clickable}get itemWithIconClass(){return!!this.icon}onClick(){this.click.emit()}isTemplate(value){return value instanceof core.TemplateRef}};ContainedListItem.propDecorators={action:[{type:core.Input}],actionData:[{type:core.Input}],disabled:[{type:core.Input}],clickable:[{type:core.Input}],icon:[{type:core.Input}],click:[{type:core.Output}],itemClass:[{type:core.HostBinding,args:["class.cds--contained-list-item"]}],role:[{type:core.HostBinding,args:["attr.role"]}],itemClickableClass:[{type:core.HostBinding,args:["class.cds--contained-list-item--clickable"]}],itemWithIconClass:[{type:core.HostBinding,args:["class.cds--contained-list-item--with-icon"]}]},ContainedListItem=(0,tslib_es6.gn)([(0,core.Component)({selector:"cds-contained-list-item, ibm-contained-list-item",template:'\n\t\t<ng-container *ngIf="clickable">\n\t\t\t<button\n\t\t\t\tclass="cds--contained-list-item__content"\n\t\t\t\ttype="button"\n\t\t\t\t[disabled]="disabled"\n\t\t\t\t(click)="onClick()">\n\t\t\t\t<ng-content select="[cdsContainedListItemButton],[ibmContainedListItemButton]"></ng-content>\n\t\t\t</button>\n\t\t</ng-container>\n\t\t<ng-container *ngIf="!clickable">\n\t\t\t<div class="cds--contained-list-item__content">\n\t\t\t\t<div *ngIf="icon" class="cds--contained-list-item__icon">\n\t\t\t\t\t<ng-container *ngIf="!isTemplate(icon)"><svg [ibmIcon]="icon" size="16"></svg></ng-container>\n\t\t\t\t\t<ng-template *ngIf="isTemplate(icon)" [ngTemplateOutlet]="icon"></ng-template>\n\t\t\t\t</div>\n\t\t\t\t<ng-content></ng-content>\n\t\t\t</div>\n\t\t</ng-container>\n\t\t<div class="cds--contained-list-item__action" *ngIf="action">\n\t\t\t<ng-template [ngTemplateOutlet]="action" [ngTemplateOutletContext]="{ $implicit: actionData }"></ng-template>\n\t\t</div>\n\t',changeDetection:core.ChangeDetectionStrategy.OnPush})],ContainedListItem);var common=__webpack_require__("./node_modules/@angular/common/fesm2020/common.mjs"),icon=__webpack_require__("./src/icon/index.ts");let ContainedListModule=class ContainedListModule{};ContainedListModule=(0,tslib_es6.gn)([(0,core.NgModule)({declarations:[ContainedList,ContainedListItem],exports:[ContainedList,ContainedListItem],imports:[common.CommonModule,icon.QX]})],ContainedListModule);var src_button=__webpack_require__("./src/button/index.ts"),src_layer=__webpack_require__("./src/layer/index.ts"),layout=__webpack_require__("./src/layout/index.ts"),tag=__webpack_require__("./src/tag/index.ts"),dialog=__webpack_require__("./src/dialog/index.ts"),tooltip=__webpack_require__("./src/tooltip/index.ts"),search=__webpack_require__("./src/search/index.ts"),icon_service=__webpack_require__("./src/icon/icon.service.ts"),_16=__webpack_require__("./node_modules/@carbon/icons/es/apple/16.js"),fish_16=__webpack_require__("./node_modules/@carbon/icons/es/fish/16.js"),strawberry_16=__webpack_require__("./node_modules/@carbon/icons/es/strawberry/16.js"),subtract_alt_16=__webpack_require__("./node_modules/@carbon/icons/es/subtract--alt/16.js"),wheat_16=__webpack_require__("./node_modules/@carbon/icons/es/wheat/16.js");let ContainedListStoryModule=class ContainedListStoryModule{constructor(iconService){this.iconService=iconService,this.iconService.registerAll([_16.Z,fish_16.Z,strawberry_16.Z,subtract_alt_16.Z,wheat_16.Z])}};ContainedListStoryModule.ctorParameters=()=>[{type:icon_service.C6}],ContainedListStoryModule=(0,tslib_es6.gn)([(0,core.NgModule)({imports:[common.CommonModule]})],ContainedListStoryModule);const contained_list_stories={title:"Components/Contained List",decorators:[(0,dist.moduleMetadata)({imports:[ContainedListModule,ContainedListStoryModule,src_button.hJ,icon.QX,src_layer.D,layout.x,tag.Wh,dialog.Su,tooltip.z8,search.t]})],component:ContainedList,subcomponents:{ContainedListItem},args:{isInset:!1,kind:ContainedListKind.OnPage,label:"List title",size:ContainedListSize.Large},argTypes:{label:{type:{name:"string",required:!0}},action:{table:{disable:!0}}}},basic=(()=>({template:'\n <cds-contained-list label="List title">\n <cds-contained-list-item>List item</cds-contained-list-item>\n <cds-contained-list-item>List item</cds-contained-list-item>\n <cds-contained-list-item>List item</cds-contained-list-item>\n <cds-contained-list-item>List item</cds-contained-list-item>\n </cds-contained-list>\n <cds-contained-list label="List title">\n <cds-contained-list-item>List item</cds-contained-list-item>\n <cds-contained-list-item>List item</cds-contained-list-item>\n <cds-contained-list-item>List item</cds-contained-list-item>\n <cds-contained-list-item>List item</cds-contained-list-item>\n </cds-contained-list>\n '})).bind({}),usageExamples=(()=>({template:'\n <ng-template #add let-item>\n <ibm-icon-button\n type="button"\n kind="primary"\n align="left"\n description="Add">\n <svg class="cds--btn__icon" ibmIcon="add" size="16"></svg>\n </ibm-icon-button>\n </ng-template>\n <ng-template #overflowMenu let-item>\n <ibm-tooltip class="cds--icon-tooltip" description="Options" align="left">\n <ibm-overflow-menu [flip]="true" [customTrigger]="customTrigger" triggerClass="cds--toolbar-action" [offset]="{ x: 0, y: 0 }">\n <ibm-overflow-menu-option>View details</ibm-overflow-menu-option>\n <ibm-overflow-menu-option>Edit</ibm-overflow-menu-option>\n <ibm-overflow-menu-option [divider]="true" type="danger">Remove</ibm-overflow-menu-option>\n </ibm-overflow-menu>\n </ibm-tooltip>\n </ng-template>\n <cds-contained-list label="List title" [action]="add">\n <cds-contained-list-item [action]="overflowMenu">List item</cds-contained-list-item>\n <cds-contained-list-item [action]="overflowMenu">List item</cds-contained-list-item>\n <cds-contained-list-item [action]="overflowMenu">List item</cds-contained-list-item>\n </cds-contained-list>\n\n <ng-template #addGhost let-item>\n <ibm-icon-button\n type="button"\n kind="ghost"\n align="left"\n description="Add">\n <svg class="cds--btn__icon" ibmIcon="add" size="16"></svg>\n </ibm-icon-button>\n </ng-template>\n <cds-contained-list label="List title" [action]="addGhost">\n <cds-contained-list-item>\n List item\n <br />\n <span class="cds--label cds--label--no-margin">\n Description text\n </span>\n </cds-contained-list-item>\n <cds-contained-list-item>\n List item\n <br />\n <span class="cds--label cds--label--no-margin">\n Description text\n </span>\n </cds-contained-list-item>\n <cds-contained-list-item>\n List item\n <br />\n <span class="cds--label cds--label--no-margin">\n Description text\n </span>\n </cds-contained-list-item>\n </cds-contained-list>\n\n <cds-contained-list label="List title">\n <cds-contained-list-item>\n <div style="display: \'grid\'; gridTemplateColumns: repeat(3, 1fr); columnGap: 1rem">\n <span>List item</span>\n <span>List item details</span>\n <span>List item details</span>\n </div>\n </cds-contained-list-item>\n <cds-contained-list-item>\n <div style="display: \'grid\'; gridTemplateColumns: repeat(3, 1fr); columnGap: 1rem">\n <span>List item</span>\n <span>List item details</span>\n <span>List item details</span>\n </div>\n </cds-contained-list-item>\n <cds-contained-list-item>\n <div style="display: \'grid\'; gridTemplateColumns: repeat(3, 1fr); columnGap: 1rem">\n <span>List item</span>\n <span>List item details</span>\n <span>List item details</span>\n </div>\n </cds-contained-list-item>\n </cds-contained-list>\n '})).bind({}),disclosed=(()=>({template:'\n <cds-contained-list label="List title" kind="disclosed">\n <cds-contained-list-item>List item</cds-contained-list-item>\n <cds-contained-list-item>List item</cds-contained-list-item>\n <cds-contained-list-item>List item</cds-contained-list-item>\n <cds-contained-list-item>List item</cds-contained-list-item>\n </cds-contained-list>\n <cds-contained-list label="List title" kind="disclosed">\n <cds-contained-list-item>List item</cds-contained-list-item>\n <cds-contained-list-item>List item</cds-contained-list-item>\n <cds-contained-list-item>List item</cds-contained-list-item>\n <cds-contained-list-item>List item</cds-contained-list-item>\n </cds-contained-list>\n '})).bind({}),withActions=(()=>({template:'\n <ng-template #action let-item>\n <button\n ibmButton="ghost"\n aria-label="Action"\n iconOnly="true">\n <svg ibmIcon="subtract--alt" size="16" class="cds--btn__icon"></svg>\n </button>\n </ng-template>\n\n <cds-contained-list label="List title" [size]="size">\n <cds-contained-list-item [action]="action">List item</cds-contained-list-item>\n <cds-contained-list-item [action]="action">List item</cds-contained-list-item>\n <cds-contained-list-item [action]="action">List item</cds-contained-list-item>\n <cds-contained-list-item [action]="action">List item</cds-contained-list-item>\n </cds-contained-list>\n '})).bind({}),withActionsAndContextData=args=>({props:args={...args,items:[{id:1,label:"List Item"},{id:2,label:"List Item"},{id:3,label:"List Item"},{id:4,label:"List Item"}],onActionClick:item=>{alert(`${item.label} ${item.id} action click triggered`)}},template:'\n <ng-template #actionWithClick let-actionData>\n <button\n ibmButton="ghost"\n aria-label="Action"\n iconOnly="true"\n (click)="onActionClick(actionData)">\n <svg ibmIcon="add" size="16" class="cds--btn__icon"></svg>\n </button>\n </ng-template>\n <cds-contained-list label="List title" [size]="size">\n <cds-contained-list-item\n *ngFor="let item of items"\n [action]="actionWithClick"\n [actionData]="item">\n {{ item.label }} {{ item.id }}\n </cds-contained-list-item>\n </cds-contained-list>\n '}),withIcons=(()=>({template:'\n <ng-template #apple let-icon>\n <svg ibmIcon="apple" size="16"></svg>\n </ng-template>\n\n <ng-template #wheat let-icon>\n <svg ibmIcon="wheat" size="16"></svg>\n </ng-template>\n\n <cds-contained-list label="List title">\n <cds-contained-list-item [icon]="apple">List item</cds-contained-list-item>\n <cds-contained-list-item [icon]="wheat">List item</cds-contained-list-item>\n <cds-contained-list-item icon="strawberry">List item</cds-contained-list-item>\n <cds-contained-list-item icon="fish">List item</cds-contained-list-item>\n </cds-contained-list>\n '})).bind({}),withInteractiveItems=(()=>({template:'\n <cds-contained-list label="List title">\n <cds-contained-list-item [clickable]="true">\n <ng-container ibmContainedListItemButton>List item</ng-container>\n </cds-contained-list-item>\n <cds-contained-list-item [clickable]="true" [disabled]="true">\n <ng-container ibmContainedListItemButton>List item</ng-container>\n </cds-contained-list-item>\n <cds-contained-list-item [clickable]="true">\n <ng-container ibmContainedListItemButton>List item</ng-container>\n </cds-contained-list-item>\n <cds-contained-list-item [clickable]="true">\n <ng-container ibmContainedListItemButton>List item</ng-container>\n </cds-contained-list-item>\n </cds-contained-list>\n '})).bind({}),withInteractiveItemsAndActions=(()=>({template:'\n <ng-template #action let-item>\n <button\n aria-label="Action"\n ibmButton="ghost"\n iconOnly="true">\n <svg ibmIcon="subtract--alt" size="16" class="cds--btn__icon"></svg>\n </button>\n </ng-template>\n <ng-template #search>\n <cds-search [expandable]="true" size="lg"></cds-search>\n </ng-template>\n <cds-contained-list label="List title" [action]="search">\n <cds-contained-list-item [clickable]="true" [action]="action">\n <ng-container ibmContainedListItemButton>List item</ng-container>\n </cds-contained-list-item>\n <cds-contained-list-item [clickable]="true" [action]="action">\n <ng-container ibmContainedListItemButton>List item</ng-container>\n </cds-contained-list-item>\n <cds-contained-list-item [clickable]="true" [action]="action">\n <ng-container ibmContainedListItemButton>List item</ng-container>\n </cds-contained-list-item>\n <cds-contained-list-item [clickable]="true" [action]="action">\n <ng-container ibmContainedListItemButton>List item</ng-container>\n </cds-contained-list-item>\n </cds-contained-list>\n '})).bind({}),withLayer=(()=>({template:'\n <div ibmStack="vertical" [gap]="5">\n <cds-contained-list label="List title">\n <cds-contained-list-item>List item</cds-contained-list-item>\n <cds-contained-list-item>List item</cds-contained-list-item>\n <cds-contained-list-item>List item</cds-contained-list-item>\n <cds-contained-list-item>List item</cds-contained-list-item>\n </cds-contained-list>\n <div [ibmLayer]="1">\n <div ibmStack="vertical" [gap]="5">\n <cds-contained-list label="List title">\n <cds-contained-list-item>List item</cds-contained-list-item>\n <cds-contained-list-item>List item</cds-contained-list-item>\n </cds-contained-list>\n <div [ibmLayer]="2">\n <cds-contained-list label="List title">\n <cds-contained-list-item>List item</cds-contained-list-item>\n <cds-contained-list-item>List item</cds-contained-list-item>\n </cds-contained-list>\n </div>\n </div>\n </div>\n </div>\n '})).bind({}),withListTitleDecorators=(()=>({template:'\n <ng-template #label let-item>\n <div style="display: flex; alignItems: center; justifyContent: space-between">\n <span>List title</span>\n <ibm-tag size="sm">4</ibm-tag>\n </div>\n </ng-template>\n <cds-contained-list [label]="label">\n <cds-contained-list-item>List item</cds-contained-list-item>\n <cds-contained-list-item>List item</cds-contained-list-item>\n <cds-contained-list-item>List item</cds-contained-list-item>\n <cds-contained-list-item>List item</cds-contained-list-item>\n </cds-contained-list>\n '})).bind({});basic.parameters={...basic.parameters,docs:{...basic.parameters?.docs,source:{originalSource:'() => ({\n template: `\n <cds-contained-list label="List title">\n <cds-contained-list-item>List item</cds-contained-list-item>\n <cds-contained-list-item>List item</cds-contained-list-item>\n <cds-contained-list-item>List item</cds-contained-list-item>\n <cds-contained-list-item>List item</cds-contained-list-item>\n </cds-contained-list>\n <cds-contained-list label="List title">\n <cds-contained-list-item>List item</cds-contained-list-item>\n <cds-contained-list-item>List item</cds-contained-list-item>\n <cds-contained-list-item>List item</cds-contained-list-item>\n <cds-contained-list-item>List item</cds-contained-list-item>\n </cds-contained-list>\n `\n})',...basic.parameters?.docs?.source}}},usageExamples.parameters={...usageExamples.parameters,docs:{...usageExamples.parameters?.docs,source:{originalSource:'() => ({\n template: `\n <ng-template #add let-item>\n <ibm-icon-button\n type="button"\n kind="primary"\n align="left"\n description="Add">\n <svg class="cds--btn__icon" ibmIcon="add" size="16"></svg>\n </ibm-icon-button>\n </ng-template>\n <ng-template #overflowMenu let-item>\n <ibm-tooltip class="cds--icon-tooltip" description="Options" align="left">\n <ibm-overflow-menu [flip]="true" [customTrigger]="customTrigger" triggerClass="cds--toolbar-action" [offset]="{ x: 0, y: 0 }">\n <ibm-overflow-menu-option>View details</ibm-overflow-menu-option>\n <ibm-overflow-menu-option>Edit</ibm-overflow-menu-option>\n <ibm-overflow-menu-option [divider]="true" type="danger">Remove</ibm-overflow-menu-option>\n </ibm-overflow-menu>\n </ibm-tooltip>\n </ng-template>\n <cds-contained-list label="List title" [action]="add">\n <cds-contained-list-item [action]="overflowMenu">List item</cds-contained-list-item>\n <cds-contained-list-item [action]="overflowMenu">List item</cds-contained-list-item>\n <cds-contained-list-item [action]="overflowMenu">List item</cds-contained-list-item>\n </cds-contained-list>\n\n <ng-template #addGhost let-item>\n <ibm-icon-button\n type="button"\n kind="ghost"\n align="left"\n description="Add">\n <svg class="cds--btn__icon" ibmIcon="add" size="16"></svg>\n </ibm-icon-button>\n </ng-template>\n <cds-contained-list label="List title" [action]="addGhost">\n <cds-contained-list-item>\n List item\n <br />\n <span class="cds--label cds--label--no-margin">\n Description text\n </span>\n </cds-contained-list-item>\n <cds-contained-list-item>\n List item\n <br />\n <span class="cds--label cds--label--no-margin">\n Description text\n </span>\n </cds-contained-list-item>\n <cds-contained-list-item>\n List item\n <br />\n <span class="cds--label cds--label--no-margin">\n Description text\n </span>\n </cds-contained-list-item>\n </cds-contained-list>\n\n <cds-contained-list label="List title">\n <cds-contained-list-item>\n <div style="display: \'grid\'; gridTemplateColumns: repeat(3, 1fr); columnGap: 1rem">\n <span>List item</span>\n <span>List item details</span>\n <span>List item details</span>\n </div>\n </cds-contained-list-item>\n <cds-contained-list-item>\n <div style="display: \'grid\'; gridTemplateColumns: repeat(3, 1fr); columnGap: 1rem">\n <span>List item</span>\n <span>List item details</span>\n <span>List item details</span>\n </div>\n </cds-contained-list-item>\n <cds-contained-list-item>\n <div style="display: \'grid\'; gridTemplateColumns: repeat(3, 1fr); columnGap: 1rem">\n <span>List item</span>\n <span>List item details</span>\n <span>List item details</span>\n </div>\n </cds-contained-list-item>\n </cds-contained-list>\n `\n})',...usageExamples.parameters?.docs?.source}}},disclosed.parameters={...disclosed.parameters,docs:{...disclosed.parameters?.docs,source:{originalSource:'() => ({\n template: `\n <cds-contained-list label="List title" kind="disclosed">\n <cds-contained-list-item>List item</cds-contained-list-item>\n <cds-contained-list-item>List item</cds-contained-list-item>\n <cds-contained-list-item>List item</cds-contained-list-item>\n <cds-contained-list-item>List item</cds-contained-list-item>\n </cds-contained-list>\n <cds-contained-list label="List title" kind="disclosed">\n <cds-contained-list-item>List item</cds-contained-list-item>\n <cds-contained-list-item>List item</cds-contained-list-item>\n <cds-contained-list-item>List item</cds-contained-list-item>\n <cds-contained-list-item>List item</cds-contained-list-item>\n </cds-contained-list>\n `\n})',...disclosed.parameters?.docs?.source}}},withActions.parameters={...withActions.parameters,docs:{...withActions.parameters?.docs,source:{originalSource:'() => ({\n template: `\n <ng-template #action let-item>\n <button\n ibmButton="ghost"\n aria-label="Action"\n iconOnly="true">\n <svg ibmIcon="subtract--alt" size="16" class="cds--btn__icon"></svg>\n </button>\n </ng-template>\n\n <cds-contained-list label="List title" [size]="size">\n <cds-contained-list-item [action]="action">List item</cds-contained-list-item>\n <cds-contained-list-item [action]="action">List item</cds-contained-list-item>\n <cds-contained-list-item [action]="action">List item</cds-contained-list-item>\n <cds-contained-list-item [action]="action">List item</cds-contained-list-item>\n </cds-contained-list>\n `\n})',...withActions.parameters?.docs?.source}}},withActionsAndContextData.parameters={...withActionsAndContextData.parameters,docs:{...withActionsAndContextData.parameters?.docs,source:{originalSource:'args => {\n args = {\n ...args,\n items: [{\n id: 1,\n label: "List Item"\n }, {\n id: 2,\n label: "List Item"\n }, {\n id: 3,\n label: "List Item"\n }, {\n id: 4,\n label: "List Item"\n }],\n onActionClick: (item: any) => {\n alert(`${item.label} ${item.id} action click triggered`);\n }\n };\n return {\n props: args,\n template: `\n <ng-template #actionWithClick let-actionData>\n <button\n ibmButton="ghost"\n aria-label="Action"\n iconOnly="true"\n (click)="onActionClick(actionData)">\n <svg ibmIcon="add" size="16" class="cds--btn__icon"></svg>\n </button>\n </ng-template>\n <cds-contained-list label="List title" [size]="size">\n <cds-contained-list-item\n *ngFor="let item of items"\n [action]="actionWithClick"\n [actionData]="item">\n {{ item.label }} {{ item.id }}\n </cds-contained-list-item>\n </cds-contained-list>\n `\n };\n}',...withActionsAndContextData.parameters?.docs?.source}}},withIcons.parameters={...withIcons.parameters,docs:{...withIcons.parameters?.docs,source:{originalSource:'() => ({\n template: `\n <ng-template #apple let-icon>\n <svg ibmIcon="apple" size="16"></svg>\n </ng-template>\n\n <ng-template #wheat let-icon>\n <svg ibmIcon="wheat" size="16"></svg>\n </ng-template>\n\n <cds-contained-list label="List title">\n <cds-contained-list-item [icon]="apple">List item</cds-contained-list-item>\n <cds-contained-list-item [icon]="wheat">List item</cds-contained-list-item>\n <cds-contained-list-item icon="strawberry">List item</cds-contained-list-item>\n <cds-contained-list-item icon="fish">List item</cds-contained-list-item>\n </cds-contained-list>\n `\n})',...withIcons.parameters?.docs?.source}}},withInteractiveItems.parameters={...withInteractiveItems.parameters,docs:{...withInteractiveItems.parameters?.docs,source:{originalSource:'() => ({\n template: `\n <cds-contained-list label="List title">\n <cds-contained-list-item [clickable]="true">\n <ng-container ibmContainedListItemButton>List item</ng-container>\n </cds-contained-list-item>\n <cds-contained-list-item [clickable]="true" [disabled]="true">\n <ng-container ibmContainedListItemButton>List item</ng-container>\n </cds-contained-list-item>\n <cds-contained-list-item [clickable]="true">\n <ng-container ibmContainedListItemButton>List item</ng-container>\n </cds-contained-list-item>\n <cds-contained-list-item [clickable]="true">\n <ng-container ibmContainedListItemButton>List item</ng-container>\n </cds-contained-list-item>\n </cds-contained-list>\n `\n})',...withInteractiveItems.parameters?.docs?.source}}},withInteractiveItemsAndActions.parameters={...withInteractiveItemsAndActions.parameters,docs:{...withInteractiveItemsAndActions.parameters?.docs,source:{originalSource:'() => ({\n template: `\n <ng-template #action let-item>\n <button\n aria-label="Action"\n ibmButton="ghost"\n iconOnly="true">\n <svg ibmIcon="subtract--alt" size="16" class="cds--btn__icon"></svg>\n </button>\n </ng-template>\n <ng-template #search>\n <cds-search [expandable]="true" size="lg"></cds-search>\n </ng-template>\n <cds-contained-list label="List title" [action]="search">\n <cds-contained-list-item [clickable]="true" [action]="action">\n <ng-container ibmContainedListItemButton>List item</ng-container>\n </cds-contained-list-item>\n <cds-contained-list-item [clickable]="true" [action]="action">\n <ng-container ibmContainedListItemButton>List item</ng-container>\n </cds-contained-list-item>\n <cds-contained-list-item [clickable]="true" [action]="action">\n <ng-container ibmContainedListItemButton>List item</ng-container>\n </cds-contained-list-item>\n <cds-contained-list-item [clickable]="true" [action]="action">\n <ng-container ibmContainedListItemButton>List item</ng-container>\n </cds-contained-list-item>\n </cds-contained-list>\n `\n})',...withInteractiveItemsAndActions.parameters?.docs?.source}}},withLayer.parameters={...withLayer.parameters,docs:{...withLayer.parameters?.docs,source:{originalSource:'() => ({\n template: `\n <div ibmStack="vertical" [gap]="5">\n <cds-contained-list label="List title">\n <cds-contained-list-item>List item</cds-contained-list-item>\n <cds-contained-list-item>List item</cds-contained-list-item>\n <cds-contained-list-item>List item</cds-contained-list-item>\n <cds-contained-list-item>List item</cds-contained-list-item>\n </cds-contained-list>\n <div [ibmLayer]="1">\n <div ibmStack="vertical" [gap]="5">\n <cds-contained-list label="List title">\n <cds-contained-list-item>List item</cds-contained-list-item>\n <cds-contained-list-item>List item</cds-contained-list-item>\n </cds-contained-list>\n <div [ibmLayer]="2">\n <cds-contained-list label="List title">\n <cds-contained-list-item>List item</cds-contained-list-item>\n <cds-contained-list-item>List item</cds-contained-list-item>\n </cds-contained-list>\n </div>\n </div>\n </div>\n </div>\n `\n})',...withLayer.parameters?.docs?.source}}},withListTitleDecorators.parameters={...withListTitleDecorators.parameters,docs:{...withListTitleDecorators.parameters?.docs,source:{originalSource:'() => ({\n template: `\n <ng-template #label let-item>\n <div style="display: flex; alignItems: center; justifyContent: space-between">\n <span>List title</span>\n <ibm-tag size="sm">4</ibm-tag>\n </div>\n </ng-template>\n <cds-contained-list [label]="label">\n <cds-contained-list-item>List item</cds-contained-list-item>\n <cds-contained-list-item>List item</cds-contained-list-item>\n <cds-contained-list-item>List item</cds-contained-list-item>\n <cds-contained-list-item>List item</cds-contained-list-item>\n </cds-contained-list>\n `\n})',...withListTitleDecorators.parameters?.docs?.source}}};const __namedExportsOrder=["basic","usageExamples","disclosed","withActions","withActionsAndContextData","withIcons","withInteractiveItems","withInteractiveItemsAndActions","withLayer","withListTitleDecorators"]},"./src/search/search.component.html?ngResource":module=>{module.exports='<div\n\tclass="cds--search"\n\t[ngClass]="{\n\t\t\'cds--search--sm\': size === \'sm\',\n\t\t\'cds--search--md\': size === \'md\',\n\t\t\'cds--search--lg\': size === \'lg\',\n\t\t\'cds--search--light\': theme === \'light\',\n\t\t\'cds--skeleton\': skeleton && !fluid,\n\t\t\'cds--search--expandable\': expandable && !tableSearch,\n\t\t\'cds--search--expanded\': expandable && !tableSearch && active,\n\t\t\'cds--toolbar-search\': toolbar && !expandable,\n\t\t\'cds--toolbar-search--active\': toolbar && !expandable && active,\n\t\t\'cds--toolbar-search-container-persistent\': tableSearch && !expandable,\n\t\t\'cds--toolbar-search-container-expandable\': tableSearch && expandable,\n\t\t\'cds--toolbar-search-container-active\': tableSearch && expandable && active,\n\t\t\'cds--search--fluid\': fluid,\n\t\t\'cds--search--disabled\': disabled\n\t}"\n\trole="search"\n\t[attr.aria-label]="ariaLabel"\n\t(click)="openSearch()">\n\t<label\n\t\tclass="cds--label"\n\t\t[for]="id"\n\t\t[ngClass]="{ \'cds--skeleton\': skeleton && fluid }">\n\t\t{{ !skeleton ? label : \'\'}}\n\t</label>\n\n\t<div *ngIf="skeleton; else enableInput" class="cds--text-input cds--skeleton"></div>\n\t<ng-template #enableInput>\n\t\t<input\n\t\t\t#input\n\t\t\tclass="cds--search-input"\n\t\t\t[type]="tableSearch || !toolbar ? \'text\' : \'search\'"\n\t\t\t[id]="id"\n\t\t\t[value]="value"\n\t\t\t[autocomplete]="autocomplete"\n\t\t\t[placeholder]="placeholder"\n\t\t\t[disabled]="disabled"\n\t\t\t[required]="required"\n\t\t\t(input)="onSearch($event.target.value)"\n\t\t\t(keyup.enter)="onEnter()"/>\n\t\t<button\n\t\t\t*ngIf="!tableSearch && toolbar"\n\t\t\tclass="cds--toolbar-search__btn"\n\t\t\t(click)="openSearch()"\n\t\t\taria-label="Open search">\n\t\t\t<svg cdsIcon="search" size="16" class="cds--search-magnifier-icon"></svg>\n\t\t</button>\n\t\t<svg\n\t\t\tcdsIcon="search"\n\t\t\t*ngIf="tableSearch || !toolbar"\n\t\t\tclass="cds--search-magnifier-icon"\n\t\t\tsize="16">\n\t\t</svg>\n\t</ng-template>\n\n\t<button\n\t\t*ngIf="tableSearch || !toolbar"\n\t\tclass="cds--search-close"\n\t\t[ngClass]="{\n\t\t\t\'cds--search-close--hidden\': !value || value.length === 0\n\t\t}"\n\t\t[title]="clearButtonTitle"\n\t\t(click)="clearSearch()">\n\t\t<span class="cds--visually-hidden">{{ clearButtonTitle }}</span>\n\t\t<svg cdsIcon="close" size="16"></svg>\n\t</button>\n</div>\n'}}]);