@infineon/infineon-design-system-stencil 39.5.1--canary.1723.ff8f559ad2723273cd93183465ad335fc28571d7.0 → 39.5.2--canary.2093.6587af63bb759a16655a658c28ffa7d521cd4197.0

package/dist/infineon-design-system-stencil/p-03bdcf66.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","hours","getHours","minutes","getMinutes","ifxDate","emit","input","el","shadowRoot","querySelector","classList","add","handleInputFocusOnIconClick","focus","anyInput","showPicker","click","getBrowser","navigator","userAgent","indexOf","setFireFoxClasses","browser","contains","remove","componentDidLoad","isNestedInIfxComponent","framework","detectFramework","trackComponent","componentWillUpdate","render","h","key","class","htmlFor","_a","label","trim","undefined","ariaLabel","max","min","onChange","role","tabIndex","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: tokens.$ifxColorRed500;\n        }\n      }\n    }\n\n  }\n\n  &.disabled {\n    .label__wrapper {\n      color: tokens.$ifxColorEngineering300;\n    }\n  }\n\n  &.error {\n    .caption__wrapper {\n      color: tokens.$ifxColorRed500;\n    }\n  }\n\n  &.disabled {\n    .caption__wrapper {\n      color: tokens.$ifxColorEngineering300;\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 14px;\n    box-sizing: border-box;\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    &:disabled {\n      color: tokens.$ifxColorBaseWhite;\n    }\n\n    & ~ .icon__wrapper {\n\n      &:focus-visible::after {\n      content: '';\n      position: absolute;\n      top: -4px;\n      left: -4px;\n      right: -4px;\n      bottom: -4px;\n      border: 2px solid tokens.$ifxColorOcean500;\n      border-radius: 15%;\n      }\n    }\n\n    & ~ .icon__wrapper::before {\n      content: '';\n      position: absolute;\n      inset: -4px;\n      background-color: tokens.$ifxColorBaseWhite;\n    }\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.$ifxColorEngineering300;\n    background-color: tokens.$ifxColorEngineering300;\n    cursor: default;\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  &:disabled::-webkit-datetime-edit,\n  &:disabled::-webkit-datetime-edit-text {\n    color: tokens.$ifxColorBaseWhite;\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.$ifxColorEngineering300;\n      color: tokens.$ifxColorBaseWhite;\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    z-index: 1;\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 || this.disabled) return;\n\n    input.focus();\n\n    const anyInput = input as any;\n    if (typeof anyInput.showPicker === 'function') {\n      anyInput.showPicker();\n    } else {\n      input.click();\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\" tabIndex={ this.getBrowser() === 'Firefox' ? 0 : undefined } 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":[]}