carbon-components-angular/docs/storybook/timepicker-timepicker-stories.7bbf1029.iframe.bundle.js

Next generation components

"use strict";(self.webpackChunkcarbon_components_angular=self.webpackChunkcarbon_components_angular||[]).push([[2371],{"./src/timepicker-select/index.ts":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{__webpack_require__.d(__webpack_exports__,{M:()=>TimePickerSelect,q:()=>TimePickerSelectModule});var tslib_es6=__webpack_require__("./node_modules/tslib/tslib.es6.js"),core=__webpack_require__("./node_modules/@angular/core/fesm2020/core.mjs"),src_select=__webpack_require__("./src/select/index.ts"),fesm2020_forms=__webpack_require__("./node_modules/@angular/forms/fesm2020/forms.mjs");let TimePickerSelect=class TimePickerSelect extends src_select.Ph{constructor(){super(...arguments),this.timeSelect=!0,this.timePickerSelect=!0,this.id="timepicker-select-"+TimePickerSelect.selectCount++,this.skeleton=!1,this.theme="dark",this.timePickerSelectSkeleton=this.skeleton}get timePickerSelectLight(){return"light"===this.theme}};TimePickerSelect.propDecorators={timeSelect:[{type:core.HostBinding,args:["class.cds--select"]}],timePickerSelect:[{type:core.HostBinding,args:["class.cds--time-picker__select"]}],id:[{type:core.Input}],ariaLabel:[{type:core.Input}],skeleton:[{type:core.Input}],theme:[{type:core.Input}],label:[{type:core.Input}],timePickerSelectSkeleton:[{type:core.HostBinding,args:["class.cds--skeleton"]}],timePickerSelectLight:[{type:core.HostBinding,args:["class.cds--select--light"]}]},TimePickerSelect=(0,tslib_es6.gn)([(0,core.Component)({selector:"cds-timepicker-select, ibm-timepicker-select",template:'\n\t\t<label *ngIf="!skeleton && label" [attr.for]="id" class="cds--label cds--visually-hidden">{{label}}</label>\n\t\t<div class="cds--select-input__wrapper">\n\t\t\t<select\n\t\t\t\t#select\n\t\t\t\t[attr.id]="id"\n\t\t\t\t[attr.aria-label]="ariaLabel"\n\t\t\t\t[disabled]="disabled"\n\t\t\t\t(change)="onChange($event)"\n\t\t\t\tclass="cds--select-input">\n\t\t\t\t<ng-content></ng-content>\n\t\t\t</select>\n\t\t\t<svg cdsIcon="chevron--down" size="16" *ngIf="!skeleton" class="cds--select__arrow"></svg>\n\t\t</div>\n\t',providers:[{provide:fesm2020_forms.JU,useExisting:TimePickerSelect,multi:!0}]})],TimePickerSelect);var common=__webpack_require__("./node_modules/@angular/common/fesm2020/common.mjs"),icon=__webpack_require__("./src/icon/index.ts");let TimePickerSelectModule=class TimePickerSelectModule{};TimePickerSelectModule=(0,tslib_es6.gn)([(0,core.NgModule)({declarations:[TimePickerSelect],exports:[TimePickerSelect],imports:[src_select.An,common.CommonModule,icon.QX]})],TimePickerSelectModule)},"./src/timepicker/timepicker.stories.ts":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,{Basic:()=>Basic,__namedExportsOrder:()=>__namedExportsOrder,default:()=>timepicker_stories});var fesm2020_forms=__webpack_require__("./node_modules/@angular/forms/fesm2020/forms.mjs"),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");let TimePicker=class TimePicker{constructor(){this.invalid=!1,this.hideLabel=!1,this.placeholder="hh:mm",this.pattern="(1[012]|[0-9]):[0-5][0-9]",this.id="timepicker-"+TimePicker.timePickerCount++,this.disabled=!1,this.maxLength=5,this.skeleton=!1,this.theme="dark",this.size="md",this.valueChange=new core.EventEmitter,this.timepickerClass=!0,this.onChangeHandler=_=>{},this.onTouchedHandler=()=>{}}writeValue(value){this.value=value}registerOnChange(callback){this.onChangeHandler=callback}registerOnTouched(callback){this.onTouchedHandler=callback}setDisabledState(isDisabled){this.disabled=isDisabled}onChange(event){this.onChangeHandler(event.target.value),this.valueChange.emit(event.target.value)}focusOut(){this.onTouchedHandler()}isTemplate(value){return value instanceof core.TemplateRef}};TimePicker.timePickerCount=0,TimePicker.propDecorators={invalid:[{type:core.Input}],invalidText:[{type:core.Input}],label:[{type:core.Input}],hideLabel:[{type:core.Input}],placeholder:[{type:core.Input}],pattern:[{type:core.Input}],id:[{type:core.Input}],disabled:[{type:core.Input}],value:[{type:core.Input}],maxLength:[{type:core.Input}],skeleton:[{type:core.Input}],theme:[{type:core.Input}],size:[{type:core.Input}],valueChange:[{type:core.Output}],timepickerClass:[{type:core.HostBinding,args:["class.cds--form-item"]}],focusOut:[{type:core.HostListener,args:["focusout"]}]},TimePicker=(0,tslib_es6.gn)([(0,core.Component)({selector:"cds-timepicker, ibm-timepicker",template:'\n\t\t<label\n\t\t*ngIf="!skeleton && label"\n\t\t[for]="id"\n\t\tclass="cds--label"\n\t\t[ngClass]="{\n\t\t\t\'cds--label--disabled\': disabled,\n\t\t\t\'cds--visually-hidden\': hideLabel\n\t\t}">\n\t\t\t<ng-container *ngIf="!isTemplate(label)">{{label}}</ng-container>\n\t\t\t<ng-template *ngIf="isTemplate(label)" [ngTemplateOutlet]="label"></ng-template>\n\t\t</label>\n\t\t<div\n\t\t\tclass="cds--time-picker"\n\t\t\t[ngClass]="{\n\t\t\t\t\'cds--time-picker--invalid\' : invalid,\n\t\t\t\t\'cds--time-picker--sm\': size === \'sm\',\n\t\t\t\t\'cds--time-picker--md\': size === \'md\',\n\t\t\t\t\'cds--time-picker--lg\': size === \'lg\',\n\t\t\t\t\'cds--time-picker--light\': theme === \'light\'\n\t\t\t}">\n\t\t\t<div class="cds--time-picker__input">\n\t\t\t\t<input\n\t\t\t\t\t[ngClass]="{\n\t\t\t\t\t\t\'cds--text-input--light\': theme === \'light\',\n\t\t\t\t\t\t\'cds--skeleton\': skeleton\n\t\t\t\t\t}"\n\t\t\t\t\t[value]="value"\n\t\t\t\t\t[placeholder]="placeholder"\n\t\t\t\t\t[attr.data-invalid]="invalid ? true : undefined"\n\t\t\t\t\t[pattern]="pattern"\n\t\t\t\t\t[attr.id]="id"\n\t\t\t\t\t[disabled]="disabled"\n\t\t\t\t\t[attr.maxlength]="maxLength"\n\t\t\t\t\t(change)="onChange($event)"\n\t\t\t\t\ttype="text"\n\t\t\t\t\tclass="cds--time-picker__input-field cds--text-input">\n\t\t\t</div>\n\t\t\t<ng-content></ng-content>\n\t\t</div>\n\t\t<div *ngIf="invalid" class="cds--form-requirement">\n\t\t\t<ng-container *ngIf="!isTemplate(invalidText)">{{invalidText}}</ng-container>\n\t\t\t<ng-template *ngIf="isTemplate(invalidText)" [ngTemplateOutlet]="invalidText"></ng-template>\n\t\t</div>\n\t',providers:[{provide:fesm2020_forms.JU,useExisting:TimePicker,multi:!0}]})],TimePicker);var common=__webpack_require__("./node_modules/@angular/common/fesm2020/common.mjs"),timepicker_select=__webpack_require__("./src/timepicker-select/index.ts");let TimePickerModule=class TimePickerModule{};TimePickerModule=(0,tslib_es6.gn)([(0,core.NgModule)({declarations:[TimePicker],exports:[TimePicker],imports:[timepicker_select.q,common.CommonModule]})],TimePickerModule);const timepicker_stories={title:"Components/Timepicker",decorators:[(0,dist.moduleMetadata)({imports:[TimePickerModule,timepicker_select.q,fesm2020_forms.u5]})],component:TimePicker},Basic=(args=>({props:args,template:'\n        <cds-timepicker\n            (valueChange)="timePickerChange($event)"\n            [(ngModel)]="model"\n            [disabled]="disableTime"\n            [invalid]="invalid"\n            [invalidText]="invalidText"\n            label="Select a time">\n            <cds-timepicker-select\n                (valueChange)="timePickerSelectChange($event)"\n                [disabled]="disabledSelect"\n                [(ngModel)]="period"\n                ariaLabel="Open list of options">\n                <option selected value="AM">AM</option>\n                <option value="PM">PM</option>\n            </cds-timepicker-select>\n            <cds-timepicker-select\n                (valueChange)="timePickerSelectChange($event)"\n                [disabled]="disabledSelect"\n                [(ngModel)]="timeZone"\n                ariaLabel="Open list of options">\n                <option selected value="Time Zone 1">Time Zone 1</option>\n                <option value="Time Zone 2">Time Zone 2</option>\n            </cds-timepicker-select>\n        </cds-timepicker>\n        <br>\n        <p> Input: {{model}} </p>\n        <p> Period: {{period}} </p>\n        <p> Time Zone: {{timeZone}} </p>\n    '})).bind({});Basic.args={model:"12:12",period:"AM",timeZone:"Time Zone 1",disableTime:!1,disabledSelect:!1,invalid:!1,invalidText:"A valid value is required!",theme:"dark"},Basic.argTypes={timePickerChange:{action:"Time picker value changed!"},timePickerSelectChange:{action:"Time picker select change fired!"},theme:{options:["light","dark"],control:"radio"}},Basic.parameters={...Basic.parameters,docs:{...Basic.parameters?.docs,source:{originalSource:'args => ({\n  props: args,\n  template: `\n        <cds-timepicker\n            (valueChange)="timePickerChange($event)"\n            [(ngModel)]="model"\n            [disabled]="disableTime"\n            [invalid]="invalid"\n            [invalidText]="invalidText"\n            label="Select a time">\n            <cds-timepicker-select\n                (valueChange)="timePickerSelectChange($event)"\n                [disabled]="disabledSelect"\n                [(ngModel)]="period"\n                ariaLabel="Open list of options">\n                <option selected value="AM">AM</option>\n                <option value="PM">PM</option>\n            </cds-timepicker-select>\n            <cds-timepicker-select\n                (valueChange)="timePickerSelectChange($event)"\n                [disabled]="disabledSelect"\n                [(ngModel)]="timeZone"\n                ariaLabel="Open list of options">\n                <option selected value="Time Zone 1">Time Zone 1</option>\n                <option value="Time Zone 2">Time Zone 2</option>\n            </cds-timepicker-select>\n        </cds-timepicker>\n        <br>\n        <p> Input: {{model}} </p>\n        <p> Period: {{period}} </p>\n        <p> Time Zone: {{timeZone}} </p>\n    `\n})',...Basic.parameters?.docs?.source}}};const __namedExportsOrder=["Basic"]}}]);