@infineon/infineon-design-system-stencil 37.14.1--canary.2005.99ac1d98777d6916e7e421ca72db2a9a0f407149.0 → 37.14.1--canary.2009.a1675c98d08311581a1733f9e5d2d89304b688e7.0

package/dist/infineon-design-system-stencil/p-bf51fc38.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["datePickerCss","DatePicker","constructor","hostRef","this","inputId","datePickerId","size","error","success","disabled","type","required","autocomplete","getDate","e","inputValue","target","value","selectedDate","Date","day","month","getMonth","year","getFullYear","internals","setFormValue","hours","getHours","minutes","getMinutes","ifxDate","emit","input","el","shadowRoot","querySelector","classList","add","toISOString","substring","handleInputFocusOnIconClick","focus","getBrowser","navigator","userAgent","indexOf","setFireFoxClasses","browser","contains","remove","componentDidLoad","isNestedInIfxComponent","framework","detectFramework","trackComponent","componentWillUpdate","formResetCallback","render","h","key","class","htmlFor","_a","label","trim","undefined","ariaLabel","max","min","onChange","role","onClick","icon","_b","caption"],"sources":["src/components/date-picker/date-picker.scss?tag=ifx-date-picker&encapsulation=shadow","src/components/date-picker/date-picker.tsx"],"sourcesContent":["@use '~@infineon/design-system-tokens/dist/tokens';\n\n.date__picker-container {\n  display: flex;\n  flex-direction: column;\n\n  & .label__wrapper {\n    color: tokens.$ifxColorBaseBlack;\n    font: tokens.$ifxBodyBody03;\n\n    & .asterisk { \n      display: none;\n      &.required {\n        display: inline;\n        margin-left: 4px;\n        \n        &.error {\n          color: #CD002F;\n        }\n      }\n    }\n\n  }\n\n  &.disabled {\n    .label__wrapper {\n      color: tokens.$ifxColorEngineering500;\n    }\n  }\n\n  &.error {\n    .caption__wrapper {\n      color: tokens.$ifxColorRed500;\n    }\n  }\n\n  &.disabled {\n    .caption__wrapper {\n      color: tokens.$ifxColorEngineering500;\n    }\n  }\n\n  & .caption__wrapper {\n    margin-top: tokens.$ifxSpace50;\n    color: tokens.$ifxColorBaseBlack;\n    font: tokens.$ifxBodyBody05;\n  }\n}\n\n.date__picker-input {\n  font-family: 'Source Sans 3';\n  outline: none;\n  width: 100%;\n  cursor: pointer;\n  border-radius: 1px;\n  border: 1px solid tokens.$ifxColorEngineering400;\n  height: 100%;\n\n  &.firefox__classes {\n    padding: 8px 16px;\n    color: tokens.$ifxColorEngineering400;\n    font-size: 16px;\n    text-transform: uppercase;\n    font-style: normal;\n    font-weight: 400;\n    line-height: 24px;\n    cursor: pointer;\n  }\n\n  &:focus:not(.error, .success) {\n    border-color: tokens.$ifxColorOcean500;\n  }\n\n  &:hover:not(:disabled, :focus, .error, .success) {\n    border-color: tokens.$ifxColorEngineering500;\n  }\n\n  &:disabled {\n    border-color: tokens.$ifxColorEngineering500;\n    background-color: tokens.$ifxColorEngineering200;\n  }\n\n  &.error {\n    border-color: tokens.$ifxColorRed500;\n  }\n\n  &.success:not(.error) {\n    border-color: tokens.$ifxColorGreen500;\n  }\n\n  &::-webkit-datetime-edit-text {\n    color: tokens.$ifxColorEngineering400;\n    font-size: 16px;\n    font-style: normal;\n    font-weight: 400;\n    line-height: 24px;\n  }\n\n  &.has-value::-webkit-datetime-edit-text {\n    color: tokens.$ifxColorBaseBlack;\n  }\n\n  &.has-value::-webkit-datetime-edit {\n    color: tokens.$ifxColorBaseBlack;\n  }\n}\n\n::-webkit-datetime-edit {\n  color: tokens.$ifxColorEngineering400;\n  font-size: 16px;\n  text-transform: uppercase;\n  font-style: normal;\n  font-weight: 400;\n  line-height: 24px;\n}\n\n::-webkit-datetime-edit-fields-wrapper {\n  padding: 8px 16px;\n  padding-bottom: 9px;\n  transform: translateY(1px);\n}\n\n::-webkit-inner-spin-button {\n  display: none;\n}\n\n::-webkit-calendar-picker-indicator {\n  position: absolute;\n  right: 15px;\n  font-size: 19px;\n  cursor: pointer;\n  border-radius: 1px;\n  &:focus-within {\n    outline: 2px solid tokens.$ifxColorOcean500;\n    outline-offset: 2px;\n  }\n}\n\n.input__wrapper {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  align-self: stretch;\n  background: tokens.$ifxColorBaseWhite;\n  position: relative;\n  &.large {\n    height: 40px;\n  }\n\n  &.small {\n    height: 36px;\n  }\n\n  &.disabled {\n    & .icon__wrapper {\n      background-color: tokens.$ifxColorEngineering200;\n    }\n  }\n}\n\n.icon__wrapper {\n  position: absolute;\n  right: 17px;\n  padding: 2px;\n  display: flex;\n  justify-content: flex-end;\n  align-items: center;\n  pointer-events: none;\n  z-index: 100;\n  background-color: tokens.$ifxColorBaseWhite;\n  line-height: 16px;\n\n  & ifx-icon {\n    vertical-align: middle;\n  }\n}\n","import { AttachInternals } from '@stencil/core';\nimport { Component, Prop, h, Element, Event, EventEmitter } from '@stencil/core';\nimport { trackComponent } from '../../global/utils/tracking';\nimport { isNestedInIfxComponent } from '../../global/utils/dom-utils';\nimport { detectFramework } from '../../global/utils/framework-detection';\n \n@Component({\n  tag: 'ifx-date-picker',\n  styleUrl: 'date-picker.scss',\n  shadow: true,\n  // formAssociated: true,\n})\n\nexport class DatePicker {\n  private inputId: string = `ifx-date-picker-${++datePickerId}`;\n\n  @Element() el: HTMLElement;\n  @Prop() size: string = 's';\n  @Prop() error: boolean = false;\n  @Prop() success: boolean = false;\n  @Prop() disabled: boolean = false;\n  @Prop() ariaLabel: string | null;\n  @Prop() value: string;\n  @Prop() type: string = 'date'\n  @Prop() max: string;\n  @Prop() min: string;\n  @Prop() required: boolean = false;\n  @Prop() label: string;\n  @Prop() caption: string;\n  @Prop() autocomplete: string = 'on';\n\n  @AttachInternals() internals: ElementInternals;\n\n  @Event() ifxDate: EventEmitter;\n\n  getDate(e) { \n    const inputValue = e.target.value;\n    const selectedDate = new Date(inputValue);\n    const day = selectedDate.getDate();\n    const month = selectedDate.getMonth() + 1; \n    const year = selectedDate.getFullYear();\n\n \n      \n    if (!inputValue) {\n      this.internals.setFormValue(null);\n\n      if(this.type === 'datetime-local') { \n        const hours = selectedDate.getHours();\n        const minutes = selectedDate.getMinutes();\n        this.ifxDate.emit({day, month, year, hours, minutes});\n      } else { \n        this.ifxDate.emit({day, month, year});\n      }\n      return;\n    }\n\n    const input = this.el.shadowRoot.querySelector('.date__picker-input') as HTMLInputElement;\n    input.classList.add('has-value');\n\n    this.internals.setFormValue(selectedDate.toISOString().substring(0,10))\n    if(this.type === 'datetime-local') { \n      const hours = selectedDate.getHours();\n      const minutes = selectedDate.getMinutes();\n      this.ifxDate.emit({day, month, year, hours, minutes});\n    } else { \n      this.ifxDate.emit({day, month, year})\n    }\n  }\n\n  handleInputFocusOnIconClick() { \n    const input = this.el.shadowRoot.querySelector('.date__picker-input') as HTMLInputElement;\n    if(input) { \n      input.focus()\n    }\n  }\n\n getBrowser() {\n    if( navigator.userAgent.indexOf(\"Chrome\") != -1 ) {\n      return \"Chrome\";\n    } else if( navigator.userAgent.indexOf(\"Opera\") != -1 ) {\n      return \"Opera\";\n    } else if( navigator.userAgent.indexOf(\"MSIE\") != -1 ) {\n      return \"IE\";\n    } else if( navigator.userAgent.indexOf(\"Firefox\") != -1 ) {\n      return \"Firefox\";\n    } else {\n      return \"unknown\";\n    }\n  }\n\n  setFireFoxClasses() { \n    const browser = this.getBrowser()\n    const input = this.el.shadowRoot.querySelector('.date__picker-input');\n\n    if(browser === 'Firefox') { \n      input.classList.add('firefox__classes')\n    } else if(input.classList.contains('firefox__classes')) { \n      input.classList.remove('firefox__classes')\n    }\n  }\n\n  async componentDidLoad() { \n    if(!isNestedInIfxComponent(this.el)) { \n      const framework = detectFramework();\n      trackComponent('ifx-date-picker', await framework)\n    }\n    this.setFireFoxClasses()\n  }\n\n  componentWillUpdate() { \n    if (this.value) {\n      this.getDate({ target: { value: this.value } });\n    }\n  }\n\n  formResetCallback() {\n    this.internals.setFormValue(null);\n  }\n\n  render() {\n    return (\n      <div class={`date__picker-container ${this.error ? 'error' : ''} ${this.disabled ? 'disabled': ''}`}>\n\n        <label class='label__wrapper' htmlFor={ this.inputId }>\n          { this.label?.trim() }\n          <span class={`asterisk ${this.required ? 'required' : \"\"} ${this.error ? 'error' : \"\"}`}>*</span>\n        </label>\n\n        <div class={`input__wrapper ${this.size === 'l' ? 'large' : 'small'} ${this.disabled ? 'disabled' : ''}`}>\n          <input\n          type={this.type}\n          autocomplete={this.autocomplete}\n          class={`date__picker-input ${this.error ? 'error' : \"\"} ${this.success ? \"success\" : \"\"}`}\n          disabled={this.disabled ? true : undefined}\n          aria-invalid={this.error ? true : undefined}\n          aria-label={this.ariaLabel}\n          max={this.max}\n          min={this.min}\n          value={this.value}\n          required={this.required}\n          onChange={(e) => this.getDate(e)} />\n          <div class=\"icon__wrapper\" role=\"button\" onClick={() => this.handleInputFocusOnIconClick()}>\n            <ifx-icon icon='calendar16' aria-hidden=\"true\"></ifx-icon>\n          </div>\n        </div>\n\n        { this.caption?.trim() && (\n            <div class='caption__wrapper'>\n              { this.caption.trim() }\n            </div> \n          )}\n      </div>\n    )\n  }\n}\n\nlet datePickerId = 0;"],"mappings":"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","ignoreList":[]}