@oiz/stzh-components 2.6.0 → 2.7.0-beta

package/dist/collection/components/stzh-monthyearpicker/stzh-monthyearpicker.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"stzh-monthyearpicker.js","sourceRoot":"","sources":["../../../src/components/stzh-monthyearpicker/stzh-monthyearpicker.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,SAAS,EACT,IAAI,EACJ,IAAI,EACJ,OAAO,EACP,CAAC,EACD,KAAK,EAEL,KAAK,GACN,MAAM,eAAe,CAAC;AAQvB,OAAO,EAAE,iBAAiB,EAAE,MAAM,+BAA+B,CAAC;AAGlE;GACG;AAMH,MAAM,OAAO,mBAAmB;;IA0ItB,gBAAW,GAAG,GAAG,EAAE;MACzB,IAAI,IAAI,CAAC,cAAc,EAAE;QACvB,IAAI,CAAC,cAAc,CAAC,QAAQ,EAAE,CAAC;OAChC;IACH,CAAC,CAAA;IAEO,2BAAsB,GAAG,CAAC,KAA2C,EAAE,EAAE;MAC/E,MAAM,IAAI,GAAG,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,IAAI,MAAM,CAAC;MAChD,MAAM,KAAK,GAAG,KAAK,CAAC,MAAM,CAAC,KAAK,IAAI,IAAI,CAAC;MACzC,IAAI,CAAC,QAAQ,CAAC,IAAI,EAAE,KAAK,CAAC,CAAC;IAC7B,CAAC,CAAA;IAEO,0BAAqB,GAAG,CAAC,KAA2C,EAAE,EAAE;MAC9E,MAAM,IAAI,GAAG,KAAK,CAAC,MAAM,CAAC,KAAK,IAAI,MAAM,CAAC;MAC1C,MAAM,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,IAAI,IAAI,CAAC;MAC/C,IAAI,CAAC,QAAQ,CAAC,IAAI,EAAE,KAAK,CAAC,CAAC;IAC7B,CAAC,CAAA;;;;;;;kBAxH2D,SAAS;gBAG7B,EAAE;iBAGD,SAAS;4BAGyE,QAAQ;sBAGtG,EAAE;qBAGH,EAAE;oBAGe,KAAK;oBAGL,KAAK;oBAGL,KAAK;sBAGH,KAAK;gBAGC,SAAS;;;;;;;wBAqBb,KAAK;uBAGN,KAAK;gCAGmB,EAAE;+BAGH,EAAE;;;EAWzE,aAAa,CAAC,QAA2B;IACvC,IAAI,OAAO,QAAQ,KAAK,QAAQ,EAAE;MAChC,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC;KACrC;SAAM;MACL,IAAI,CAAC,OAAO,GAAG,QAAQ,CAAC;KACzB;IAED,IAAI,CAAC,kBAAkB,EAAE,CAAC;EAC5B,CAAC;EAGD,YAAY,CAAC,QAA2B;IACtC,IAAI,OAAO,QAAQ,KAAK,QAAQ,EAAE;MAChC,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC;KACpC;SAAM;MACL,IAAI,CAAC,MAAM,GAAG,QAAQ,CAAC;KACxB;IAED,IAAI,CAAC,iBAAiB,EAAE,CAAC;EAC3B,CAAC;EAKD,aAAa;IACX,IAAI,CAAC,kBAAkB,EAAE,CAAC;IAC1B,IAAI,CAAC,iBAAiB,EAAE,CAAC;EAC3B,CAAC;EAwBO,QAAQ,CAAC,IAAI,EAAE,KAAK;IAC1B,IAAI,CAAC,KAAK,GAAG,GAAG,IAAI,IAAI,KAAK,EAAE,CAAC;IAChC,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC;MACnB,SAAS,EAAE,sBAAsB;MACjC,KAAK,EAAE,IAAI,CAAC,KAAK;MACjB,UAAU,EAAE,KAAK;MACjB,SAAS,EAAE,IAAI;KAChB,CAAC,CAAC;EACL,CAAC;EAEO,kBAAkB;IACxB,MAAM,OAAO,GAAG,EAAE,CAAC;IACnB,IAAI,MAAM,GAAG,EAAE,CAAC;IAEhB,IAAI,IAAI,CAAC,OAAO,EAAE;MAChB,MAAM,GAAG,IAAI,CAAC,OAAO,CAAC;KACvB;SAAM;MACL,MAAM,WAAW,GAAG,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,IAAI,MAAM,CAAC,CAAC;MAE/D,IAAI,QAAQ,GAAG,CAAC,CAAC;MACjB,IAAI,QAAQ,GAAG,EAAE,CAAC;MAElB,IAAI,IAAI,CAAC,GAAG,EAAE;QACZ,MAAM,OAAO,GAAG,IAAI,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;QAEnC,IAAI,WAAW,KAAK,OAAO,CAAC,WAAW,EAAE,EAAE;UACzC,QAAQ,GAAG,OAAO,CAAC,QAAQ,EAAE,GAAG,CAAC,CAAC;SACnC;OACF;MAED,IAAI,IAAI,CAAC,GAAG,EAAE;QACZ,MAAM,OAAO,GAAG,IAAI,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;QAEnC,IAAI,WAAW,KAAK,OAAO,CAAC,WAAW,EAAE,EAAE;UACzC,QAAQ,GAAG,OAAO,CAAC,QAAQ,EAAE,GAAG,CAAC,CAAC;SACnC;OACF;MAED,KAAK,IAAI,CAAC,GAAG,QAAQ,EAAE,CAAC,IAAI,QAAQ,EAAE,CAAC,EAAE,EAAE;QACzC,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC;OAChB;KACF;IAED,MAAM,CAAC,OAAO,CAAC,CAAC,KAAK,EAAE,EAAE;MACvB,MAAM,WAAW,GAAG,CAAC,IAAI,GAAG,KAAK,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC;MAC7C,MAAM,SAAS,GAAG,IAAI,CAAC,YAAY,CAAC,QAAQ,CAAC,UAAU,CAAC,KAAK,GAAG,CAAC,CAAC,CAAC;MAEnE,OAAO,CAAC,IAAI,CAAC;QACX,IAAI,EAAE,IAAI,CAAC,MAAM,KAAK,YAAY;UAChC,CAAC,CAAC,GAAG,WAAW,KAAK,SAAS,GAAG;UACjC,CAAC,CAAC,SAAS;QACb,KAAK,EAAE,WAAW;OACnB,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;IAEH,IAAI,CAAC,oBAAoB,GAAG,OAAO,CAAC;EACtC,CAAC;EAEO,iBAAiB;IACvB,MAAM,OAAO,GAAG,EAAE,CAAC;IACnB,IAAI,KAAK,GAAG,EAAE,CAAC;IAEf,IAAI,IAAI,CAAC,MAAM,EAAE;MACf,KAAK,GAAG,IAAI,CAAC,MAAM,CAAC;KACrB;SAAM;MACL,MAAM,YAAY,GAAG,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,IAAI,IAAI,CAAC,CAAC;MAE9D,MAAM,OAAO,GAAG,IAAI,IAAI,EAAE,CAAC,WAAW,EAAE,CAAC;MACzC,IAAI,OAAO,GAAG,IAAI,CAAC,OAAO,IAAI,CAAC,OAAO,GAAG,EAAE,CAAC,CAAC;MAC7C,IAAI,OAAO,GAAG,IAAI,CAAC,OAAO,IAAI,CAAC,OAAO,GAAG,EAAE,CAAC,CAAC;MAE7C,IAAI,IAAI,CAAC,GAAG,EAAE;QACZ,MAAM,OAAO,GAAG,IAAI,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;QAEnC,IAAI,YAAY,IAAI,YAAY,GAAG,OAAO,CAAC,QAAQ,EAAE,GAAG,CAAC,EAAE;UACzD,OAAO,GAAG,OAAO,CAAC,WAAW,EAAE,GAAG,CAAC,CAAC;SACrC;aAAM;UACL,OAAO,GAAG,OAAO,CAAC,WAAW,EAAE,CAAC;SACjC;OACF;MAED,IAAI,IAAI,CAAC,GAAG,EAAE;QACZ,MAAM,OAAO,GAAG,IAAI,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;QAEnC,IAAI,YAAY,IAAI,YAAY,GAAG,OAAO,CAAC,QAAQ,EAAE,GAAG,CAAC,EAAE;UACzD,OAAO,GAAG,OAAO,CAAC,WAAW,EAAE,GAAG,CAAC,CAAC;SACrC;aAAM;UACL,OAAO,GAAG,OAAO,CAAC,WAAW,EAAE,CAAC;SACjC;OACF;MAED,KAAK,IAAI,CAAC,GAAG,OAAO,EAAE,CAAC,IAAI,OAAO,EAAE,CAAC,EAAE,EAAE;QACvC,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC;OACf;KACF;IAED,KAAK,CAAC,OAAO,CAAC,CAAC,IAAI,EAAE,EAAE;MACrB,OAAO,CAAC,IAAI,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,IAAI,EAAE,CAAC,CAAC;IAC5C,CAAC,CAAC,CAAC;IAEH,IAAI,CAAC,mBAAmB,GAAG,OAAO,CAAC;EACrC,CAAC;EAED,KAAK,CAAC,iBAAiB;IACrB,IAAI,CAAC,IAAI,CAAC,YAAY,EAAE;MACtB,IAAI,CAAC,YAAY,GAAG,MAAM,iBAAiB,CAAC,IAAI,CAAC,OAAO,EAAE,iBAAiB,CAAC,CAAC;KAC9E;IAED,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;IAChC,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;EAChC,CAAC;EAED,MAAM;IACJ,MAAM,OAAO,GAAG;MACd,sBAAsB,EAAE,IAAI;KAC7B,CAAC;IAEF,OAAO,CACL,EAAC,IAAI,IAAC,QAAQ,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,EAAE,OAAO,EAAE,IAAI,CAAC,WAAW;MACpE,WAAK,KAAK,EAAE,OAAO;QACjB,aACE,IAAI,EAAC,QAAQ,EACb,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,KAAK,EAAE,IAAI,CAAC,KAAK,GACjB;QAEF,WAAK,KAAK,EAAC,+BAA+B;UACxC,qBACE,IAAI,EAAE,GAAG,IAAI,CAAC,IAAI,QAAQ,EAC1B,KAAK,EAAC,uCAAuC,EAC7C,KAAK,EAAE,IAAI,CAAC,UAAU,IAAI,IAAI,CAAC,YAAY,CAAC,UAAU,EACtD,GAAG,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,cAAc,GAAG,EAA6B,CAAC,EAClE,YAAY,EAAE,IAAI,CAAC,sBAAsB,EACzC,OAAO,EAAE,IAAI,CAAC,oBAAoB,EAClC,KAAK,EAAE,CAAC,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,EACjC,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,UAAU,EAAE,IAAI,CAAC,UAAU,EAC3B,gBAAgB,EAAE,IAAI,CAAC,gBAAgB,EACvC,WAAW,EAAE,IAAI,CAAC,gBAAgB,EAClC,eAAe,EAAE,IAAI,CAAC,oBAAoB,EAC1C,KAAK,EAAE,IAAI,CAAC,UAAU,EACtB,eAAe,EAAE,IAAI,CAAC,oBAAoB,EAC1C,OAAO,EAAE,IAAI,CAAC,YAAY,GACX;UAEjB,WAAK,KAAK,EAAC,iCAAiC,QAAQ;UAEpD,qBACE,IAAI,EAAE,GAAG,IAAI,CAAC,IAAI,OAAO,EACzB,KAAK,EAAC,sCAAsC,EAC5C,KAAK,EAAE,IAAI,CAAC,SAAS,IAAI,IAAI,CAAC,YAAY,CAAC,SAAS,EACpD,YAAY,EAAE,IAAI,CAAC,qBAAqB,EACxC,OAAO,EAAE,IAAI,CAAC,mBAAmB,EACjC,KAAK,EAAE,CAAC,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,EACjC,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,UAAU,EAAE,IAAI,CAAC,UAAU,EAC3B,gBAAgB,EAAE,IAAI,CAAC,gBAAgB,EACvC,WAAW,EAAE,IAAI,CAAC,eAAe,EACjC,eAAe,EAAE,IAAI,CAAC,mBAAmB,EACzC,KAAK,EAAE,IAAI,CAAC,SAAS,EACrB,eAAe,EAAE,IAAI,CAAC,mBAAmB,EACzC,OAAO,EAAE,IAAI,CAAC,WAAW,GACV,CACb,CACF,CACD,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import {\n  Component,\n  Prop,\n  Host,\n  Element,\n  h,\n  Event,\n  EventEmitter,\n  Watch,\n} from \"@stencil/core\";\n\nimport {\n  StzhDropdownOption,\n  StzhDropdownChangeEvent,\n  StzhMonthyearpickerChangeEvent\n} from \"../../index\";\n\nimport { fetchTranslations } from \"../../utils/translation-utils\";\nimport { StzhMonthyearpickerLocalizedText } from \"./stzh-monthyearpicker.localization\";\n\n/**\n */\n@Component({\n  tag: \"stzh-monthyearpicker\",\n  styleUrl: \"stzh-monthyearpicker.scss\",\n  scoped: true\n})\nexport class StzhMonthyearpicker {\n  /** Set which months to show (overwrites months from min/max) */\n  @Prop() months: number[] | string;\n  private _months: number[];\n\n  /** Set which years to show (overwrites years from min/max) */\n  @Prop() years: number[] | string;\n  private _years: number[];\n\n  /**\n   * Minimum month and year allowed to be picked in `YYYY-MM` format.\n   * This setting can be used alone or together with the `max` property.\n   */\n  @Prop() min: string;\n\n  /**\n   * Maximum month and year allowed to be picked in `YYYY-MM` format.\n   * This setting can be used alone or together with the `min` property.\n   */\n  @Prop() max: string;\n\n  /**\n   * Minimum year (will be overwritten if `min` is used).\n   * This setting can be used alone or together with the `maxYear` property.\n   */\n  @Prop() minYear: number;\n\n  /**\n   * Maximum year (will be overwritten if `max` is used).\n   * This setting can be used alone or together with the `minYear` property.\n   */\n  @Prop() maxYear: number;\n\n  /** Picker format. */\n  @Prop({ reflect: true }) format: \"default\" | \"creditcard\" = \"default\";\n\n  /** Name of the hidden date picker input. */\n  @Prop({ reflect: true }) name: string = \"\";\n\n  /** Value of hidden input (current selected year and month YYYY-MM). */\n  @Prop({ mutable: true }) value: string = \"0000-00\";\n\n  /** Popover placement for the dropdown (if applicable) */\n  @Prop({ reflect: true }) popoverPlacement:  \"bottom\" | \"bottom-end\" | \"bottom-center\" | \"top\" | \"top-end\" | \"top-center\" = \"bottom\";\n\n  /** Month dropdown label */\n  @Prop() monthLabel: string = \"\";\n\n  /** Year dropdown label */\n  @Prop() yearLabel: string = \"\";\n\n  /** Whether the element is readonly or not */\n  @Prop({ reflect: true }) readonly: boolean = false;\n\n  /** Whether the element is disabled or not */\n  @Prop({ reflect: true }) disabled: boolean = false;\n\n  /** Required status */\n  @Prop({ reflect: true }) required: boolean = false;\n\n  /** Append text to label depending if field is optional/required. true -> show \"(optional)\", false -> show nothing */\n  @Prop({ reflect: true }) showMarker: boolean = false;\n\n  /** Size variant */\n  @Prop({ reflect: true }) size: \"default\" | \"small\" = \"default\";\n\n  /** Description message for month */\n  @Prop() descriptionMonth: string;\n\n  /** Description message for year */\n  @Prop() descriptionYear: string;\n\n  /** Long description message appearing in a popover for month */\n  @Prop() descriptionLongMonth: string;\n\n  /** Long description message appearing in a popover for year */\n  @Prop() descriptionLongYear: string;\n\n  /** One or multiple error message for month */\n  @Prop() errorMonth: string | string[];\n\n  /** One or multiple error message for year */\n  @Prop() errorYear: string | string[];\n\n  /** Invalid status for month */\n  @Prop({ reflect: true }) invalidMonth: boolean = false;\n\n  /** Invalid status for year */\n  @Prop({ reflect: true }) invalidYear: boolean = false;\n\n  /** Id of the element which describes the month dropdown */\n  @Prop({ attribute: \"a11y-describedby\" }) a11yDescribedbyMonth: string = \"\";\n\n  /** Id of the element which describes the year dropdown */\n  @Prop({ attribute: \"a11y-describedby\" }) a11yDescribedbyYear: string = \"\";\n\n  /**  Translation strings. */\n  @Prop() localization: StzhMonthyearpickerLocalizedText;\n\n  /** Monthyearpicker change event */\n  @Event() stzhChange: EventEmitter<StzhMonthyearpickerChangeEvent>;\n\n  @Element() element: HTMLStzhMonthyearpickerElement;\n\n  @Watch(\"months\")\n  monthsWatcher(newValue: number[] | string) {\n    if (typeof newValue === \"string\") {\n      this._months = JSON.parse(newValue);\n    } else {\n      this._months = newValue;\n    }\n\n    this.updateMonthOptions();\n  }\n\n  @Watch(\"years\")\n  yearsWatcher(newValue: number[] | string) {\n    if (typeof newValue === \"string\") {\n      this._years = JSON.parse(newValue);\n    } else {\n      this._years = newValue;\n    }\n\n    this.updateYearOptions();\n  }\n\n  @Watch(\"value\")\n  @Watch(\"min\")\n  @Watch(\"max\")\n  minMaxWatcher() {\n    this.updateMonthOptions();\n    this.updateYearOptions();\n  }\n\n  private monthsDropdown: HTMLStzhDropdownElement;\n  private dropdownMonthOptions: StzhDropdownOption[];\n  private dropdownYearOptions: StzhDropdownOption[];\n\n  private onRootFocus = () => {\n    if (this.monthsDropdown) {\n      this.monthsDropdown.setFocus();\n    }\n  }\n\n  private onMonthsDropdownChange = (event: CustomEvent<StzhDropdownChangeEvent>) => {\n    const year = this.value.split(\"-\")[0] || \"0000\";\n    const month = event.detail.value || \"00\";\n    this.onChange(year, month);\n  }\n\n  private onYearsDropdownChange = (event: CustomEvent<StzhDropdownChangeEvent>) => {\n    const year = event.detail.value || \"0000\";\n    const month = this.value.split(\"-\")[1] || \"00\";\n    this.onChange(year, month);\n  }\n\n  private onChange(year, month) {\n    this.value = `${year}-${month}`;\n    this.stzhChange.emit({\n      component: \"stzh-monthyearpicker\",\n      value: this.value,\n      valueMonth: month,\n      valueYear: year\n    });\n  }\n\n  private updateMonthOptions() {\n    const options = [];\n    let months = [];\n\n    if (this._months) {\n      months = this._months;\n    } else {\n      const currentYear = Number(this.value.split(\"-\")[0] || \"0000\");\n\n      let minMonth = 1;\n      let maxMonth = 12;\n\n      if (this.min) {\n        const minDate = new Date(this.min);\n\n        if (currentYear === minDate.getFullYear()) {\n          minMonth = minDate.getMonth() + 1;\n        }\n      }\n\n      if (this.max) {\n        const maxDate = new Date(this.max);\n\n        if (currentYear === maxDate.getFullYear()) {\n          maxMonth = maxDate.getMonth() + 1;\n        }\n      }\n\n      for (let i = minMonth; i <= maxMonth; i++) {\n        months.push(i);\n      }\n    }\n\n    months.forEach((month) => {\n      const paddedMonth = (\"00\" + month).slice(-2);\n      const monthName = this.localization.$globals.monthNames[month - 1];\n\n      options.push({\n        text: this.format === \"creditcard\"\n          ? `${paddedMonth} (${monthName})`\n          : monthName,\n        value: paddedMonth\n      });\n    });\n\n    this.dropdownMonthOptions = options;\n  }\n\n  private updateYearOptions(): void {\n    const options = [];\n    let years = [];\n\n    if (this._years) {\n      years = this._years;\n    } else {\n      const currentMonth = Number(this.value.split(\"-\")[1] || \"00\");\n\n      const yearNow = new Date().getFullYear();\n      let minYear = this.minYear || (yearNow - 10);\n      let maxYear = this.maxYear || (yearNow + 10);\n\n      if (this.min) {\n        const minDate = new Date(this.min);\n\n        if (currentMonth && currentMonth < minDate.getMonth() + 1) {\n          minYear = minDate.getFullYear() + 1;\n        } else {\n          minYear = minDate.getFullYear();\n        }\n      }\n\n      if (this.max) {\n        const maxDate = new Date(this.max);\n\n        if (currentMonth && currentMonth > maxDate.getMonth() + 1) {\n          maxYear = maxDate.getFullYear() - 1;\n        } else {\n          maxYear = maxDate.getFullYear();\n        }\n      }\n\n      for (let i = minYear; i <= maxYear; i++) {\n        years.push(i);\n      }\n    }\n\n    years.forEach((year) => {\n      options.push({ text: year, value: year });\n    });\n\n    this.dropdownYearOptions = options;\n  }\n\n  async componentWillLoad() {\n    if (!this.localization) {\n      this.localization = await fetchTranslations(this.element, \"monthyearpicker\");\n    }\n\n    this.monthsWatcher(this.months);\n    this.yearsWatcher(this.years);\n  }\n\n  render() {\n    const classes = {\n      \"stzh-monthyearpicker\": true\n    };\n\n    return (\n      <Host tabindex={this.disabled ? null : \"-1\"} onFocus={this.onRootFocus}>\n        <div class={classes}>\n          <input\n            type=\"hidden\"\n            name={this.name}\n            value={this.value}\n          />\n\n          <div class=\"stzh-monthyearpicker__wrapper\">\n            <stzh-dropdown\n              name={`${this.name}-month`}\n              class=\"stzh-monthyearpicker__months-dropdown\"\n              label={this.monthLabel || this.localization.monthLabel}\n              ref={(el) => (this.monthsDropdown = el as HTMLStzhDropdownElement)}\n              onStzhChange={this.onMonthsDropdownChange}\n              options={this.dropdownMonthOptions}\n              items={[this.value.split(\"-\")[1]]}\n              required={this.required}\n              disabled={this.disabled}\n              size={this.size}\n              showMarker={this.showMarker}\n              popoverPlacement={this.popoverPlacement}\n              description={this.descriptionMonth}\n              descriptionLong={this.descriptionLongMonth}\n              error={this.errorMonth}\n              a11yDescribedby={this.a11yDescribedbyMonth}\n              invalid={this.invalidMonth}\n            ></stzh-dropdown>\n\n            <div class=\"stzh-monthyearpicker__separator\">/</div>\n\n            <stzh-dropdown\n              name={`${this.name}-year`}\n              class=\"stzh-monthyearpicker__years-dropdown\"\n              label={this.yearLabel || this.localization.yearLabel}\n              onStzhChange={this.onYearsDropdownChange}\n              options={this.dropdownYearOptions}\n              items={[this.value.split(\"-\")[0]]}\n              required={this.required}\n              disabled={this.disabled}\n              size={this.size}\n              showMarker={this.showMarker}\n              popoverPlacement={this.popoverPlacement}\n              description={this.descriptionYear}\n              descriptionLong={this.descriptionLongYear}\n              error={this.errorYear}\n              a11yDescribedby={this.a11yDescribedbyYear}\n              invalid={this.invalidYear}\n            ></stzh-dropdown>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/stzh-monthyearpicker/stzh-monthyearpicker.localization.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=stzh-monthyearpicker.localization.js.map

package/dist/collection/components/stzh-monthyearpicker/stzh-monthyearpicker.localization.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"stzh-monthyearpicker.localization.js","sourceRoot":"","sources":["../../../src/components/stzh-monthyearpicker/stzh-monthyearpicker.localization.ts"],"names":[],"mappings":"","sourcesContent":["import { StzhLocaleComponent } from \"../../utils/translation-utils\";\n\nexport type StzhMonthyearpickerLocalizedText = StzhLocaleComponent & {\n  monthLabel: string\n  yearLabel: string\n}\n"]}

package/dist/collection/components/stzh-monthyearpicker/stzh-monthyearpicker.stories.js

@@ -0,0 +1,61 @@
+import { createComponentStory } from '../../utils/story-utils';
+import { withActions } from '@storybook/addon-actions/decorator';
+import readme from './readme.md?raw';
+import { withDesign } from 'storybook-addon-designs';
+import { getFigmaLink } from '../../../figma';
+import { fullwidthCentered } from '../../utils/decorators';
+
+const COMPONENT_NAME = 'stzh-monthyearpicker';
+const story = createComponentStory(COMPONENT_NAME);
+
+const TEMPLATE = `
+<stzh-monthyearpicker></stzh-monthyearpicker>
+`;
+
+export default {
+  title: 'Components/Monthyearpicker',
+  component: COMPONENT_NAME,
+  parameters: {
+    actions: {
+      handles: ['stzhChange']
+    },
+    docs: {
+      description: {
+        component: readme
+      }
+    },
+    design: {
+      type: 'figma',
+      url: getFigmaLink('monthyearpicker'),
+      allowFullscreen: true
+    }
+  },
+  decorators: [
+    withActions,
+    withDesign,
+    fullwidthCentered
+  ]
+};
+
+export const Default = {
+  render: (args) => story(args, TEMPLATE),
+  args: {}
+};
+
+export const Creditcard = {
+  render: (args) => story(args, TEMPLATE),
+  args: {
+    'format': 'creditcard',
+    'min-year': new Date().getFullYear(),
+    'max-year': new Date().getFullYear() + 5
+  }
+};
+
+export const WithMinMax = {
+  render: (args) => story(args, TEMPLATE),
+  args: {
+    min: "2022-03",
+    max: "2023-05"
+  }
+};
+

package/dist/collection/components/stzh-pagetitle/stzh-pagetitle.css

@@ -142,4 +142,7 @@
 .stzh-pagetitle__actions {
   display: flex;
   justify-content: space-between;
+}
+.stzh-pagetitle__actions:empty {
+  display: none;
 }

package/dist/collection/components/stzh-skin-portal-mitwirken/stzh-skin-portal-mitwirken.css

@@ -520,7 +520,7 @@ the .has-focus class is used by the focus target */
 
   --stzh-button-text-hover-background: rgba(195, 0, 36, 0.08);
   --stzh-link-color: var(--stzh-color-scienceblue);
-  --stzh-heading-color: var(--stzh-color-black);
+  --stzh-heading-color: var(--stzh-color-grey70);
 }
 
 .stzh-theme-pkzh {

package/dist/collection/components/stzh-timepicker/stzh-timepicker.css

@@ -0,0 +1,109 @@
+/**
+ * Colors
+ */
+/*
+ * Base
+ */
+/**
+ * Flyingfocus
+ */
+/**
+ * Link
+ */
+/**
+ * Text
+ */
+/**
+ * Richtext
+ */
+/**
+ * Section
+ */
+/**
+ * Header
+ */
+/**
+ * Appnav
+ */
+/**
+ * Progressbar
+ */
+/**
+ * Loader
+ */
+/**
+ * Table
+ */
+/**
+ * Heading
+ */
+/**
+ * Menu (Item)
+ */
+/**
+ * Form Elements (Input / Checkbox / Radio / Select / Datepicker)
+ */
+/**
+ * Popover
+ */
+/**
+ * Tooltips
+ */
+/**
+ * Accordions
+ */
+/**
+ * Buttons
+ */
+/**
+ * Box Shadows
+ */
+/**
+ * Z-Indexes
+ * Inspired by https://www.duetds.com/tokens/#z-index
+ */
+/**
+ * Icon sizes
+ */
+/**
+ * Grid
+ */
+/**
+ * Breakpoints
+ */
+/**
+ * Container
+ */
+/**
+ * Spaces
+ */
+/**
+ * Fonts
+ */
+:host {
+  font-family: var(--stzh-font-family-regular);
+  font-weight: var(--stzh-font-weight-regular);
+  font-style: normal;
+  color: var(--stzh-base-color);
+  box-sizing: border-box;
+  display: block;
+}
+:host[hidden] {
+  display: none;
+}
+:host *,
+:host *::before,
+:host *::after {
+  box-sizing: border-box;
+  text-underline-offset: var(--stzh-link-text-underline-offset);
+  text-decoration-thickness: var(--stzh-link-text-decoration-thickness);
+}
+
+:host {
+  width: 100%;
+}
+
+.stzh-timepicker__dropdown {
+  --icon-angle-size: var(--stzh-icon-size-small);
+  --active-icon-angle-transform: rotate(0deg) translateY(-50%);
+}

package/dist/collection/components/stzh-timepicker/stzh-timepicker.js

@@ -0,0 +1,438 @@
+import { Host, h, } from "@stencil/core";
+import { fetchTranslations } from "../../utils/translation-utils";
+/**
+ */
+export class StzhTimepicker {
+  constructor() {
+    this.onRootFocus = () => {
+      if (this.input) {
+        this.input.setFocus();
+      }
+    };
+    this.onDropdownChange = (event) => {
+      this.value = event.detail.value;
+      this.stzhChange.emit({
+        component: "stzh-timepicker",
+        value: this.value
+      });
+    };
+    this.min = 0;
+    this.max = 1439;
+    this.step = 15;
+    this.name = "";
+    this.value = "";
+    this.popoverPlacement = "bottom";
+    this.label = "";
+    this.readonly = false;
+    this.disabled = false;
+    this.description = undefined;
+    this.descriptionLong = undefined;
+    this.error = undefined;
+    this.invalid = false;
+    this.required = false;
+    this.showMarker = false;
+    this.size = "default";
+    this.a11yDescribedby = '';
+    this.localization = undefined;
+  }
+  minMaxWatcher() {
+    this.updateDropdownOptions();
+  }
+  updateDropdownOptions() {
+    const options = [];
+    for (let i = this.min; i <= this.max; i = i + this.step) {
+      let hours = Math.floor(i / 60);
+      let minutes = i % 60;
+      let paddedHours = ('00' + hours).slice(-2);
+      let paddedMinutes = ('00' + minutes).slice(-2);
+      let time = `${paddedHours}.${paddedMinutes}`;
+      options.push({ text: time, value: time });
+    }
+    this._dropdownOptions = options;
+  }
+  async componentWillLoad() {
+    this.minMaxWatcher();
+    if (!this.localization) {
+      this.localization = await fetchTranslations(this.element, "timepicker");
+    }
+  }
+  render() {
+    const classes = {
+      "stzh-timepicker": true
+    };
+    return (h(Host, { tabindex: this.disabled ? null : "-1", onFocus: this.onRootFocus }, h("div", { class: classes }, h("stzh-dropdown", { class: "stzh-timepicker__dropdown", iconAngle: "clock", label: this.label, ref: (el) => (this.input = el), onStzhChange: this.onDropdownChange, options: this._dropdownOptions, items: [this.value], required: this.required, disabled: this.disabled, description: this.description, descriptionLong: this.descriptionLong, error: this.error, popoverPlacement: this.popoverPlacement, a11yDescribedby: this.a11yDescribedby, name: this.name, size: this.size, invalid: this.invalid, showMarker: this.showMarker }))));
+  }
+  static get is() { return "stzh-timepicker"; }
+  static get encapsulation() { return "scoped"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["stzh-timepicker.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["stzh-timepicker.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "min": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Minimum time allowed to be picked in minutes. Can not be lower than 0.\nThis setting can be used alone or together with the max property."
+        },
+        "attribute": "min",
+        "reflect": false,
+        "defaultValue": "0"
+      },
+      "max": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Maximum time allowed to be picked in minutes. Can not be higher than 1440 (24h * 60).\nThis setting can be used alone or together with the min property."
+        },
+        "attribute": "max",
+        "reflect": false,
+        "defaultValue": "1439"
+      },
+      "step": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Time added for each step in minutes."
+        },
+        "attribute": "step",
+        "reflect": false,
+        "defaultValue": "15"
+      },
+      "name": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Name of the hidden date picker input."
+        },
+        "attribute": "name",
+        "reflect": true,
+        "defaultValue": "\"\""
+      },
+      "value": {
+        "type": "string",
+        "mutable": true,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Value of hidden date picker input (current selected date in ISO format)."
+        },
+        "attribute": "value",
+        "reflect": false,
+        "defaultValue": "\"\""
+      },
+      "popoverPlacement": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "\"bottom\" | \"bottom-end\" | \"bottom-center\" | \"top\" | \"top-end\" | \"top-center\"",
+          "resolved": "\"bottom\" | \"bottom-center\" | \"bottom-end\" | \"top\" | \"top-center\" | \"top-end\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Popover placement for the dropdown (if applicable)"
+        },
+        "attribute": "popover-placement",
+        "reflect": true,
+        "defaultValue": "\"bottom\""
+      },
+      "label": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Label for dropdown"
+        },
+        "attribute": "label",
+        "reflect": false,
+        "defaultValue": "\"\""
+      },
+      "readonly": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Whether the element is readonly or not"
+        },
+        "attribute": "readonly",
+        "reflect": true,
+        "defaultValue": "false"
+      },
+      "disabled": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Whether the element is disabled or not"
+        },
+        "attribute": "disabled",
+        "reflect": true,
+        "defaultValue": "false"
+      },
+      "description": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Description message (use description slot as alternative)"
+        },
+        "attribute": "description",
+        "reflect": false
+      },
+      "descriptionLong": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Long description message appearing in a popover (use description-long slot as alternative)"
+        },
+        "attribute": "description-long",
+        "reflect": false
+      },
+      "error": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string | string[]",
+          "resolved": "string | string[]",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "One or multiple error message (use error slot as alternative)"
+        },
+        "attribute": "error",
+        "reflect": false
+      },
+      "invalid": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Invalid status"
+        },
+        "attribute": "invalid",
+        "reflect": true,
+        "defaultValue": "false"
+      },
+      "required": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Required status"
+        },
+        "attribute": "required",
+        "reflect": true,
+        "defaultValue": "false"
+      },
+      "showMarker": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Append text to label depending if field is optional/required. true -> show \"(optional)\", false -> show nothing"
+        },
+        "attribute": "show-marker",
+        "reflect": true,
+        "defaultValue": "false"
+      },
+      "size": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "\"default\" | \"small\"",
+          "resolved": "\"default\" | \"small\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Size variant"
+        },
+        "attribute": "size",
+        "reflect": true,
+        "defaultValue": "\"default\""
+      },
+      "a11yDescribedby": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Id of the element which describes the input"
+        },
+        "attribute": "a11y-describedby",
+        "reflect": false,
+        "defaultValue": "''"
+      },
+      "localization": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "StzhTimepickerLocalizedText",
+          "resolved": "{ $locale: \"de\" | \"en\"; $formats: StzhLocaleFormats; $globals: StzhLocaleGlobals; }",
+          "references": {
+            "StzhTimepickerLocalizedText": {
+              "location": "import",
+              "path": "./stzh-timepicker.localization"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Translation strings."
+        }
+      }
+    };
+  }
+  static get events() {
+    return [{
+        "method": "stzhChange",
+        "name": "stzhChange",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Timepicker change event"
+        },
+        "complexType": {
+          "original": "StzhTimepickerChangeEvent",
+          "resolved": "{ component: \"stzh-timepicker\"; value: string; }",
+          "references": {
+            "StzhTimepickerChangeEvent": {
+              "location": "import",
+              "path": "../../index"
+            }
+          }
+        }
+      }];
+  }
+  static get elementRef() { return "element"; }
+  static get watchers() {
+    return [{
+        "propName": "min",
+        "methodName": "minMaxWatcher"
+      }, {
+        "propName": "max",
+        "methodName": "minMaxWatcher"
+      }];
+  }
+}
+//# sourceMappingURL=stzh-timepicker.js.map