@siemens/ix 2.0.0 → 2.0.1

package/components/card.js

@@ -0,0 +1,36 @@
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+
+const cardCss = ":host{display:flex;position:relative;flex-direction:column;align-items:flex-start;align-self:flex-start;overflow:hidden;width:20rem;border:1px solid var(--ix-card-border-color, var(--theme-color-soft-bdr));border-radius:var(--theme-default-border-radius)}:host *,:host *::after,:host *::before{box-sizing:border-box}:host ::-webkit-scrollbar-button{display:none}:host ::-webkit-scrollbar{width:0.5rem;height:0.5rem}:host ::-webkit-scrollbar-track{border-radius:5px;background:var(--theme-scrollbar-track--background)}:host ::-webkit-scrollbar-track:hover{background:var(--theme-scrollbar-track--background--hover)}:host ::-webkit-scrollbar-thumb{border-radius:5px;background:var(--theme-scrollbar-thumb--background)}:host ::-webkit-scrollbar-thumb:hover{background:var(--theme-scrollbar-thumb--background--hover)}:host ::-webkit-scrollbar-corner{display:none}:host .card-content{display:block;position:relative;flex-shrink:0;flex-grow:1;width:100%;height:calc(100% - 2rem);background-color:var(--ix-card-background, transparent);border-top-left-radius:var(--theme-default-border-radius);border-top-right-radius:var(--theme-default-border-radius)}:host .card-footer{display:flex;position:relative;width:100%}:host(.card-insight){--ix-card-background:transparent;--ix-card-border-color:var(--theme-color-soft-bdr)}:host(.card-notification){--ix-card-background:var(--theme-color-component-1)}:host(.card-alarm){--ix-card-background:var(--theme-color-alarm);color:var(--theme-color-alarm--contrast)}:host(.card-critical){--ix-card-background:var(--theme-color-critical);color:var(--theme-color-critical--contrast)}:host(.card-warning){--ix-card-background:var(--theme-color-warning);color:var(--theme-color-warning--contrast)}:host(.card-success){--ix-card-background:var(--theme-color-success);color:var(--theme-color-success--contrast)}:host(.card-info){--ix-card-background:var(--theme-color-info);color:var(--theme-color-info--contrast)}:host(.card-neutral){--ix-card-background:var(--theme-color-neutral);color:var(--theme-color-neutral--contrast)}:host(.card-primary){--ix-card-background:var(--theme-color-primary);color:var(--theme-color-neutral--contrast)}:host(:not(.card-insight)){--ix-card-border-color:transparent}";
+
+const Card = /*@__PURE__*/ proxyCustomElement(class Card extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.variant = 'insight';
+  }
+  render() {
+    return (h(Host, { class: `card-${this.variant}` }, h("div", { class: "card-content" }, h("slot", null)), h("div", { class: "card-footer" }, h("slot", { name: "card-accordion" }))));
+  }
+  get hostElement() { return this; }
+  static get style() { return cardCss; }
+}, [1, "ix-card", {
+    "variant": [1]
+  }]);
+function defineCustomElement() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["ix-card"];
+  components.forEach(tagName => { switch (tagName) {
+    case "ix-card":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, Card);
+      }
+      break;
+  } });
+}
+
+export { Card as C, defineCustomElement as d };
+
+//# sourceMappingURL=card.js.map

package/components/card.js.map

@@ -0,0 +1 @@
+{"file":"card.js","mappings":";;AAAA,MAAM,OAAO,GAAG,krEAAkrE;;MCqBrrE,IAAI;;;;;mBAMgB,SAAS;;EAExC,MAAM;IACJ,QACE,EAAC,IAAI,IAAC,KAAK,EAAE,QAAQ,IAAI,CAAC,OAAO,EAAE,IACjC,WAAK,KAAK,EAAC,cAAc,IACvB,eAAa,CACT,EACN,WAAK,KAAK,EAAC,aAAa,IACtB,YAAM,IAAI,EAAC,gBAAgB,GAAQ,CAC/B,CACD,EACP;GACH;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["./src/components/card/card.scss?tag=ix-card&encapsulation=shadow","./src/components/card/card.tsx"],"sourcesContent":["/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n@import 'mixins/shadow-dom/component';\n\n:host {\n  @include ix-component;\n  display: flex;\n  position: relative;\n  flex-direction: column;\n  align-items: flex-start;\n  align-self: flex-start;\n  overflow: hidden;\n\n  width: 20rem;\n\n  border: 1px solid var(--ix-card-border-color, var(--theme-color-soft-bdr));\n  border-radius: var(--theme-default-border-radius);\n\n  .card-content {\n    display: block;\n    position: relative;\n    flex-shrink: 0;\n    flex-grow: 1;\n    width: 100%;\n    height: calc(100% - 2rem);\n    background-color: var(--ix-card-background, transparent);\n    border-top-left-radius: var(--theme-default-border-radius);\n    border-top-right-radius: var(--theme-default-border-radius);\n  }\n\n  .card-footer {\n    display: flex;\n    position: relative;\n    width: 100%;\n  }\n}\n\n:host(.card-insight) {\n  --ix-card-background: transparent;\n  --ix-card-border-color: var(--theme-color-soft-bdr);\n}\n\n:host(.card-notification) {\n  --ix-card-background: var(--theme-color-component-1);\n}\n\n:host(.card-alarm) {\n  --ix-card-background: var(--theme-color-alarm);\n  color: var(--theme-color-alarm--contrast);\n}\n\n:host(.card-critical) {\n  --ix-card-background: var(--theme-color-critical);\n  color: var(--theme-color-critical--contrast);\n}\n\n:host(.card-warning) {\n  --ix-card-background: var(--theme-color-warning);\n  color: var(--theme-color-warning--contrast);\n}\n\n:host(.card-success) {\n  --ix-card-background: var(--theme-color-success);\n  color: var(--theme-color-success--contrast);\n}\n\n:host(.card-info) {\n  --ix-card-background: var(--theme-color-info);\n  color: var(--theme-color-info--contrast);\n}\n\n:host(.card-neutral) {\n  --ix-card-background: var(--theme-color-neutral);\n  color: var(--theme-color-neutral--contrast);\n}\n\n:host(.card-primary) {\n  --ix-card-background: var(--theme-color-primary);\n  color: var(--theme-color-neutral--contrast);\n}\n\n:host(:not(.card-insight)) {\n  --ix-card-border-color: transparent;\n}\n","import { Component, Element, h, Host, Prop } from '@stencil/core';\n\nexport type CardVariant =\n  | 'insight'\n  | 'notification'\n  | 'alarm'\n  | 'critical'\n  | 'warning'\n  | 'info'\n  | 'neutral'\n  | 'success'\n  | 'primary';\n\n/**\n * @since 1.6.0\n */\n@Component({\n  tag: 'ix-card',\n  styleUrl: 'card.scss',\n  shadow: true,\n})\nexport class Card {\n  @Element() hostElement: HTMLIxCardElement;\n\n  /**\n   * Card variant\n   */\n  @Prop() variant: CardVariant = 'insight';\n\n  render() {\n    return (\n      <Host class={`card-${this.variant}`}>\n        <div class=\"card-content\">\n          <slot></slot>\n        </div>\n        <div class=\"card-footer\">\n          <slot name=\"card-accordion\"></slot>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/components/context.js

@@ -0,0 +1,101 @@
+import { T as TypedEvent } from './typed-event.js';
+
+/*
+ * SPDX-FileCopyrightText: 2023 Siemens AG
+ *
+ * SPDX-License-Identifier: MIT
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+/**
+ * A function which creates a Context value object
+ */
+function createContext(name, initialValue) {
+  return {
+    name,
+    initialValue,
+  };
+}
+/**
+ * An event fired by a context requester to signal it desires a named context.
+ *
+ * A provider should inspect the `context` property of the event to determine if it has a value that can
+ * satisfy the request, calling the `callback` with the requested value if so.
+ *
+ * If the requested context event contains a truthy `subscribe` value, then a provider can call the callback
+ * multiple times if the value is changed, if this is the case the provider should pass an `unsubscribe`
+ * function to the callback which requesters can invoke to indicate they no longer wish to receive these updates.
+ */
+class ContextEvent extends Event {
+  constructor(context, callback, subscribe) {
+    super('context-request', { bubbles: true, composed: true });
+    this.context = context;
+    this.callback = callback;
+    this.subscribe = subscribe;
+  }
+}
+function useContextConsumer(hostElement, context, onContextReceived, subscribe) {
+  let _unsubscribe;
+  hostElement.dispatchEvent(new ContextEvent(context, (ctx, unSub) => {
+    onContextReceived(ctx, unSub);
+    _unsubscribe = unSub;
+  }, subscribe));
+  return {
+    unsubscribe: () => {
+      _unsubscribe();
+    },
+  };
+}
+function useContextProvider(hostElement, context, contextPayload) {
+  const requestContext = new TypedEvent();
+  const updateContext = new TypedEvent();
+  const requests = new Set();
+  hostElement.addEventListener('context-request', (requestContextEvent) => {
+    if ((requestContextEvent === null || requestContextEvent === void 0 ? void 0 : requestContextEvent.context.name) !== context.name) {
+      return;
+    }
+    requestContextEvent.stopPropagation();
+    if (requestContextEvent.subscribe) {
+      requests.add(requestContextEvent);
+    }
+    requestContext.emit(requestContextEvent);
+    if (contextPayload) {
+      requestContextEvent.callback(contextPayload, () => {
+        requests.delete(requestContextEvent);
+      });
+    }
+  });
+  updateContext.on((context) => {
+    requests.forEach((r) => r.callback(context, () => {
+      requests.delete(r);
+    }));
+  });
+  return {
+    emit: (context) => {
+      updateContext.emit(context);
+    },
+  };
+}
+
+/*
+ * SPDX-FileCopyrightText: 2023 Siemens AG
+ *
+ * SPDX-License-Identifier: MIT
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+const closestIxMenu = (element) => {
+  const menuElement = element.closest('ix-menu');
+  return menuElement;
+};
+const ApplicationLayoutContext = createContext('application-layout-context', {
+  hideHeader: false,
+  host: null,
+  sidebar: false,
+});
+
+export { ApplicationLayoutContext as A, useContextConsumer as a, closestIxMenu as c, useContextProvider as u };
+
+//# sourceMappingURL=context.js.map

package/components/context.js.map

@@ -0,0 +1 @@
+{"file":"context.js","mappings":";;AAAA;;;;;;;;AA+BA;;;SAGgB,aAAa,CAC3B,IAAY,EACZ,YAAgB;EAEhB,OAAO;IACL,IAAI;IACJ,YAAY;GACb,CAAC;AACJ,CAAC;AAWD;;;;;;;;;;MAUa,YAAuC,SAAQ,KAAK;EAC/D,YACkB,OAAU,EACV,QAAyC,EACzC,SAAmB;IAEnC,KAAK,CAAC,iBAAiB,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC,CAAC;IAJ5C,YAAO,GAAP,OAAO,CAAG;IACV,aAAQ,GAAR,QAAQ,CAAiC;IACzC,cAAS,GAAT,SAAS,CAAU;GAGpC;CACF;SAgBe,kBAAkB,CAIhC,WAAc,EACd,OAAU,EACV,iBAGS,EACT,SAAmB;EAEnB,IAAI,YAAwB,CAAC;EAC7B,WAAW,CAAC,aAAa,CACvB,IAAI,YAAY,CACd,OAAO,EACP,CAAC,GAAG,EAAE,KAAK;IACT,iBAAiB,CAAC,GAAG,EAAE,KAAK,CAAC,CAAC;IAC9B,YAAY,GAAG,KAAK,CAAC;GACtB,EACD,SAAS,CACV,CACF,CAAC;EAEF,OAAO;IACL,WAAW,EAAE;MACX,YAAY,EAAE,CAAC;KAChB;GACF,CAAC;AACJ,CAAC;SAKe,kBAAkB,CAKhC,WAAc,EACd,OAAU,EACV,cAA+B;EAE/B,MAAM,cAAc,GAAG,IAAI,UAAU,EAAmB,CAAC;EACzD,MAAM,aAAa,GAAG,IAAI,UAAU,EAAkB,CAAC;EAEvD,MAAM,QAAQ,GAAG,IAAI,GAAG,EAAgC,CAAC;EAEzD,WAAW,CAAC,gBAAgB,CAC1B,iBAAiB,EACjB,CAAC,mBAAoC;IACnC,IAAI,CAAA,mBAAmB,aAAnB,mBAAmB,uBAAnB,mBAAmB,CAAE,OAAO,CAAC,IAAI,MAAK,OAAO,CAAC,IAAI,EAAE;MACtD,OAAO;KACR;IAED,mBAAmB,CAAC,eAAe,EAAE,CAAC;IAEtC,IAAI,mBAAmB,CAAC,SAAS,EAAE;MACjC,QAAQ,CAAC,GAAG,CAAC,mBAAmB,CAAC,CAAC;KACnC;IACD,cAAc,CAAC,IAAI,CAAC,mBAAmB,CAAC,CAAC;IAEzC,IAAI,cAAc,EAAE;MAClB,mBAAmB,CAAC,QAAQ,CAAC,cAAc,EAAE;QAC3C,QAAQ,CAAC,MAAM,CAAC,mBAAmB,CAAC,CAAC;OACtC,CAAC,CAAC;KACJ;GACF,CACF,CAAC;EAEF,aAAa,CAAC,EAAE,CAAC,CAAC,OAAuB;IACvC,QAAQ,CAAC,OAAO,CAAC,CAAC,CAAC,KACjB,CAAC,CAAC,QAAQ,CAAC,OAAO,EAAE;MAClB,QAAQ,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC;KACpB,CAAC,CACH,CAAC;GACH,CAAC,CAAC;EAEH,OAAO;IACL,IAAI,EAAE,CAAC,OAAuB;MAC5B,aAAa,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;KAC7B;GACF,CAAC;AACJ;;AC1KA;;;;;;;;MAWa,aAAa,GAAG,CAAC,OAAgB;EAC5C,MAAM,WAAW,GAAG,OAAO,CAAC,OAAO,CAAC,SAAS,CAAC,CAAC;EAC/C,OAAO,WAAW,CAAC;AACrB,EAAE;MAEW,wBAAwB,GAAG,aAAa,CAIlD,4BAA4B,EAAE;EAC/B,UAAU,EAAE,KAAK;EACjB,IAAI,EAAE,IAAI;EACV,OAAO,EAAE,KAAK;CACf;;;;","names":[],"sources":["./src/components/utils/context.ts","./src/components/utils/application-layout/context.ts"],"sourcesContent":["/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { TypedEvent } from './typed-event';\n\n/**\n * A Context object defines an optional initial value for a Context, as well as a name identifier for debugging purposes.\n */\nexport type Context<T> = {\n  name: string;\n  initialValue?: T;\n};\n\n/**\n * An unknown context type\n */\nexport type UnknownContext = Context<unknown>;\n\n/**\n * A helper type which can extract a Context value type from a Context type\n */\nexport type ContextType<T extends UnknownContext> = T extends Context<infer Y>\n  ? Y\n  : never;\n\n/**\n * A function which creates a Context value object\n */\nexport function createContext<T>(\n  name: string,\n  initialValue?: T\n): Readonly<Context<T>> {\n  return {\n    name,\n    initialValue,\n  };\n}\n\n/**\n * A callback which is provided by a context requester and is called with the value satisfying the request.\n * This callback can be called multiple times by context providers as the requested value is changed.\n */\nexport type ContextCallback<ValueType> = (\n  value: ValueType,\n  unsubscribe?: () => void\n) => void;\n\n/**\n * An event fired by a context requester to signal it desires a named context.\n *\n * A provider should inspect the `context` property of the event to determine if it has a value that can\n * satisfy the request, calling the `callback` with the requested value if so.\n *\n * If the requested context event contains a truthy `subscribe` value, then a provider can call the callback\n * multiple times if the value is changed, if this is the case the provider should pass an `unsubscribe`\n * function to the callback which requesters can invoke to indicate they no longer wish to receive these updates.\n */\nexport class ContextEvent<T extends UnknownContext> extends Event {\n  public constructor(\n    public readonly context: T,\n    public readonly callback: ContextCallback<ContextType<T>>,\n    public readonly subscribe?: boolean\n  ) {\n    super('context-request', { bubbles: true, composed: true });\n  }\n}\n\ndeclare global {\n  interface HTMLElementEventMap {\n    /**\n     * A 'context-request' event can be emitted by any element which desires\n     * a context value to be injected by an external provider.\n     */\n    'context-request': ContextEvent<UnknownContext>;\n  }\n}\n\nexport type ContextConsumerSubscription = {\n  unsubscribe: () => void;\n};\n\nexport function useContextConsumer<\n  T extends HTMLElement,\n  C extends UnknownContext\n>(\n  hostElement: T,\n  context: C,\n  onContextReceived: (\n    context: ContextType<C>,\n    unsubscribe?: () => void\n  ) => void,\n  subscribe?: boolean\n): ContextConsumerSubscription {\n  let _unsubscribe: () => void;\n  hostElement.dispatchEvent(\n    new ContextEvent(\n      context,\n      (ctx, unSub) => {\n        onContextReceived(ctx, unSub);\n        _unsubscribe = unSub;\n      },\n      subscribe\n    )\n  );\n\n  return {\n    unsubscribe: () => {\n      _unsubscribe();\n    },\n  };\n}\nexport type ContextProvider<C extends Context<{}> = Context<unknown>> = {\n  emit: (context: ContextType<C>) => void;\n};\n\nexport function useContextProvider<\n  X extends {},\n  C extends Context<X>,\n  T extends HTMLElement = HTMLElement\n>(\n  hostElement: T,\n  context: C,\n  contextPayload?: ContextType<C>\n): ContextProvider<C> {\n  const requestContext = new TypedEvent<ContextEvent<C>>();\n  const updateContext = new TypedEvent<ContextType<C>>();\n\n  const requests = new Set<ContextEvent<UnknownContext>>();\n\n  hostElement.addEventListener(\n    'context-request',\n    (requestContextEvent: ContextEvent<C>) => {\n      if (requestContextEvent?.context.name !== context.name) {\n        return;\n      }\n\n      requestContextEvent.stopPropagation();\n\n      if (requestContextEvent.subscribe) {\n        requests.add(requestContextEvent);\n      }\n      requestContext.emit(requestContextEvent);\n\n      if (contextPayload) {\n        requestContextEvent.callback(contextPayload, () => {\n          requests.delete(requestContextEvent);\n        });\n      }\n    }\n  );\n\n  updateContext.on((context: ContextType<C>) => {\n    requests.forEach((r) =>\n      r.callback(context, () => {\n        requests.delete(r);\n      })\n    );\n  });\n\n  return {\n    emit: (context: ContextType<C>) => {\n      updateContext.emit(context);\n    },\n  };\n}\n","/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { createContext } from '../context';\n\nexport const closestIxMenu = (element: Element) => {\n  const menuElement = element.closest('ix-menu');\n  return menuElement;\n};\n\nexport const ApplicationLayoutContext = createContext<{\n  hideHeader: boolean;\n  host: 'basic-navigation' | 'map-navigation' | null;\n  sidebar?: boolean;\n}>('application-layout-context', {\n  hideHeader: false,\n  host: null,\n  sidebar: false,\n});\n"],"version":3}

package/components/custom-elements.d.ts

@@ -0,0 +1,10 @@
+/*
+ * SPDX-FileCopyrightText: 2023 Siemens AG
+ *
+ * SPDX-License-Identifier: MIT
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+export * from '../dist/types/index';
+export * from './index';

package/components/date-picker.js

@@ -0,0 +1,372 @@
+import { proxyCustomElement, HTMLElement, createEvent, h, Host, Fragment } from '@stencil/core/internal/client';
+import { l as luxon } from './luxon.js';
+import { d as defineCustomElement$5 } from './button.js';
+import { d as defineCustomElement$4 } from './date-time-card.js';
+import { d as defineCustomElement$3 } from './dropdown.js';
+import { d as defineCustomElement$2 } from './icon-button.js';
+import { d as defineCustomElement$1 } from './spinner.js';
+
+const datePickerCss = ":host{display:block;position:relative;width:22rem}:host *,:host *::after,:host *::before{box-sizing:border-box}:host ::-webkit-scrollbar-button{display:none}:host ::-webkit-scrollbar{width:0.5rem;height:0.5rem}:host ::-webkit-scrollbar-track{border-radius:5px;background:var(--theme-scrollbar-track--background)}:host ::-webkit-scrollbar-track:hover{background:var(--theme-scrollbar-track--background--hover)}:host ::-webkit-scrollbar-thumb{border-radius:5px;background:var(--theme-scrollbar-thumb--background)}:host ::-webkit-scrollbar-thumb:hover{background:var(--theme-scrollbar-thumb--background--hover)}:host ::-webkit-scrollbar-corner{display:none}:host .header{display:flex;align-items:center;justify-content:space-between}:host .selector{flex-basis:100%;display:flex;align-items:center;justify-content:center;padding:0.25rem 1rem}:host .selector .dropdown{color:var(--theme-menu-item--color);font-size:14px;line-height:20px}:host .selector .fontSize{font-size:16px}:host .selector .capitalize{text-transform:capitalize}:host .selector .arrowYear{display:flex;position:relative;padding:0.75rem 2rem;align-items:center;cursor:pointer}:host .selector .arrowYear:hover{background-color:var(--theme-select-list-item--background--hover)}:host .selector .arrowYear.selected{background-color:var(--theme-select-list-item--background--selected)}:host .selector .arrowYear .arrowPosition{position:absolute;left:calc(1rem - 6px);top:calc(50% - 6px)}:host .selector .arrowYear .checkPosition{position:absolute;left:calc(1rem - 6px);top:calc(50% - 8px)}:host .selector .arrowYear .monthMargin{margin-left:10px}:host .wrapper{display:flex}:host .wrapper .overflow{overflow-y:scroll;max-height:250px}:host .grid{display:grid;grid-template-columns:repeat(8, 40px);grid-template-rows:repeat(7, 40px);align-items:center;justify-items:center;justify-content:center;color:var(--theme-datepicker-today--color)}:host .grid .calendar-item{position:relative;display:flex;justify-content:center;align-items:center;background-color:var(--theme-datepicker-day--background);border:1px solid var(--theme-datepicker-day--background);width:40px;height:40px;cursor:pointer}:host .grid .calendar-item.today{border:1px solid var(--theme-datepicker-today--border-color)}:host .grid .calendar-item.today:hover{background-color:var(--theme-datepicker-day--background--hover)}:host .grid .calendar-item.today:active{background-color:var(--theme-datepicker-day--background--active)}:host .grid .calendar-item.today.selected{box-shadow:inset 0 0 0 1px white}:host .grid .calendar-item.today.selected:hover{background-color:var(--theme-datepicker-day--background--selected-hover)}:host .grid .calendar-item.today.selected:active{background-color:var(--theme-datepicker-day--background--selected-active)}:host .grid .calendar-item.today.selected.disabled{pointer-events:none;background-color:var(--theme-datepicker-day--background--selected-disabled);border:1px solid var(--theme-datepicker-day--background--selected-disabled);color:var(--theme-datepicker-day--color--selected-disabled)}:host .grid .calendar-item.today.range{background-color:var(--theme-datepicker-day--background--range);color:var(--theme-datepicker-day--color--range);border:1px solid var(--theme-datepicker-today--border-color--range);box-shadow:inset 0 0 0 1px white}:host .grid .calendar-item.today.range:hover{background-color:var(--theme-datepicker-day--background--range-hover);border:1px solid var(--theme-datepicker-today--border-color--range-hover)}:host .grid .calendar-item.today.range:active{background-color:var(--theme-datepicker-day--background--range-active);border:1px solid var(--theme-datepicker-today--border-color--range-active)}:host .grid .calendar-item.today.range.disabled{background-color:var(--theme-datepicker-day--background--range-disabled);color:var(--theme-datepicker-day--color--range-disabled);border:1px solid var(--theme-datepicker-today--border-color--range-disabled)}:host .grid .calendar-item.today.disabled{pointer-events:none;background-color:var(--theme-datepicker-day--background--disabled);color:var(--theme-datepicker-day--color--disabled);cursor:default;pointer-events:none}:host .grid .calendar-item:hover{background-color:var(--theme-datepicker-day--background--hover)}:host .grid .calendar-item:active{background-color:var(--theme-datepicker-day--background--active)}:host .grid .calendar-item.selected{background-color:var(--theme-datepicker-day--background--selected);color:var(--theme-datepicker-day--color--selected);border:1px solid var(--theme-datepicker-day--background--selected)}:host .grid .calendar-item.selected:hover{background-color:var(--theme-datepicker-day--background--selected-hover)}:host .grid .calendar-item.selected:active{background-color:var(--theme-datepicker-day--background--selected-active)}:host .grid .calendar-item.selected.disabled{pointer-events:none;background-color:var(--theme-datepicker-day--background--selected-disabled);color:var(--theme-datepicker-day--color--selected-disabled)}:host .grid .calendar-item.range{background-color:var(--theme-datepicker-day--background--range);color:var(--theme-datepicker-day--color--range)}:host .grid .calendar-item.range:hover{background-color:var(--theme-datepicker-day--background--range-hover)}:host .grid .calendar-item.range:active{background-color:var(--theme-datepicker-day--background--range-active)}:host .grid .calendar-item.range.disabled{pointer-events:none;background-color:var(--theme-datepicker-day--background--range-disabled);color:var(--theme-datepicker-day--color--range-disabled)}:host .grid .calendar-item.disabled{pointer-events:none;background-color:var(--theme-datepicker-day--background--disabled);color:var(--theme-datepicker-day--color--disabled)}:host .grid .calendar-item.week-day{color:var(--theme-datepicker-weekday--color);font-size:12px;line-height:20px;border:none;background:none;cursor:initial}:host .grid .calendar-item.empty-day{border:none;background:none;cursor:initial}:host .grid .calendar-item.week-number{font-size:10px;line-height:14px;color:var(--theme-datepicker-ix--color);border:none;background:none;cursor:initial}:host .grid .calendar-item:focus-visible{background-color:var(--theme-datepicker-day--background--selected);border:inset 1px solid var(--theme-datepicker-day--border-color--selected);color:var(--theme-datepicker-day--color--selected);font-size:14px;line-height:20px;letter-spacing:0}:host .button{display:flex;justify-content:flex-end}:host .hidden{display:none}";
+
+const DatePicker = /*@__PURE__*/ proxyCustomElement(class DatePicker extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.dateChange = createEvent(this, "dateChange", 7);
+    this.dateRangeChange = createEvent(this, "dateRangeChange", 7);
+    this.done = createEvent(this, "done", 7);
+    this.dateSelect = createEvent(this, "dateSelect", 7);
+    this.daysInWeek = 7;
+    this.dayNames = luxon.Info.weekdays();
+    this.monthNames = luxon.Info.months();
+    this.format = 'yyyy/LL/dd';
+    this.range = true;
+    this.individual = true;
+    this.corners = 'rounded';
+    this.from = luxon.DateTime.now().toFormat(this.format);
+    this.to = null;
+    this.minDate = undefined;
+    this.maxDate = undefined;
+    this.eventDelimiter = ' - ';
+    this.textSelectDate = 'Done';
+    this.yearValue = this.year;
+    this.today = luxon.DateTime.now();
+    this.monthValue = this.month;
+    this.calendar = [];
+    this.years = [...Array(10).keys()].map((year) => year + this.year - 5);
+    this.tempYear = this.yearValue;
+    this.tempMonth = this.monthValue;
+    this.start = luxon.DateTime.fromObject({
+      year: this.year,
+      month: this.month,
+      day: this.day,
+    });
+    this.end = this.to
+      ? luxon.DateTime.fromFormat(this.to, this.format)
+      : null;
+    this.dropdownButtonRef = undefined;
+    this.yearContainerRef = undefined;
+  }
+  get year() {
+    if (this.from !== null) {
+      return luxon.DateTime.fromFormat(this.from, this.format).year;
+    }
+    return luxon.DateTime.now().year;
+  }
+  get day() {
+    if (this.from !== null) {
+      return luxon.DateTime.fromFormat(this.from, this.format).day;
+    }
+    return null;
+  }
+  get month() {
+    if (this.from !== null) {
+      return luxon.DateTime.fromFormat(this.from, this.format).month;
+    }
+    return luxon.DateTime.now().month;
+  }
+  onDone() {
+    var _a, _b;
+    this.done.emit(this.getOutputFormat());
+    this.dateSelect.emit({
+      from: (_a = this.start) === null || _a === void 0 ? void 0 : _a.toFormat(this.format),
+      to: (_b = this.end) === null || _b === void 0 ? void 0 : _b.toFormat(this.format),
+    });
+  }
+  onDateChange() {
+    var _a, _b;
+    const from = (_a = this.start) === null || _a === void 0 ? void 0 : _a.toFormat(this.format);
+    const to = (_b = this.end) === null || _b === void 0 ? void 0 : _b.toFormat(this.format);
+    this.from = from;
+    this.to = to;
+    if (this.eventDelimiter) {
+      this.dateChange.emit(this.getOutputFormat());
+    }
+    else {
+      this.dateChange.emit({
+        from,
+        to,
+      });
+    }
+    if (this.range) {
+      this.dateRangeChange.emit({
+        from,
+        to,
+      });
+    }
+  }
+  getStartOfMonth(year = luxon.DateTime.local().get('year'), month = luxon.DateTime.local().get('month')) {
+    return luxon.DateTime.local(year, month).startOf('month');
+  }
+  getEndOfMonth(year = luxon.DateTime.local().get('year'), month = luxon.DateTime.local().get('month')) {
+    return luxon.DateTime.local(year, month).endOf('month');
+  }
+  getDaysInMonth(start = this.getStartOfMonth(), end = this.getEndOfMonth()) {
+    return Math.ceil(end.diff(start, 'days').days);
+  }
+  calculateCalendar() {
+    const start = this.getStartOfMonth(this.yearValue, this.monthValue);
+    const end = this.getEndOfMonth(this.yearValue, this.monthValue);
+    const totalDays = this.getDaysInMonth(start, end);
+    const totalWeeks = 6;
+    const totalDaysInWeeks = totalWeeks * this.daysInWeek;
+    const startWeekDay = start.weekday;
+    const prependDays = startWeekDay - 1;
+    const appendDays = totalDaysInWeeks - totalDays - prependDays;
+    let weekdays = [];
+    const calendar = [];
+    // create list of days
+    let days = [...new Array(totalDaysInWeeks).keys()].map((day) => day + 1);
+    // add start empty days
+    days.unshift(...new Array(prependDays));
+    // remove & add end days
+    days = days.slice(0, days.length - prependDays - appendDays);
+    days.push(...new Array(appendDays));
+    // make weeks
+    weekdays = days.reduce((result, item, index) => {
+      const weekIndex = Math.floor(index / this.daysInWeek);
+      if (!result[weekIndex])
+        result[weekIndex] = [];
+      result[weekIndex].push(item);
+      return result;
+    }, []);
+    for (let index = 1; index <= totalWeeks; index++) {
+      const week = weekdays[index - 1];
+      const firstWeekDay = week.find((day) => day !== undefined);
+      const weekNumber = firstWeekDay
+        ? luxon.DateTime.local(this.yearValue, this.monthValue, weekdays[index - 1][0]).weekNumber
+        : undefined;
+      calendar.push([weekNumber, week]);
+    }
+    this.calendar = calendar;
+  }
+  changeMonth(number) {
+    if (this.monthValue + number < 1) {
+      this.yearValue--;
+      this.monthValue = 12;
+    }
+    else if (this.monthValue + number > 12) {
+      this.yearValue++;
+      this.monthValue = 1;
+    }
+    else {
+      this.monthValue += number;
+    }
+    this.calculateCalendar();
+  }
+  selectMonth(month) {
+    this.monthValue = month;
+    this.yearValue = this.tempYear;
+    this.tempMonth = month;
+  }
+  infiniteScrollYears() {
+    const scroll = this.yearContainerRef.scrollTop;
+    const maxScroll = this.yearContainerRef.scrollHeight;
+    const atTop = scroll === 0;
+    const atBottom = scroll + this.yearContainerRef.getBoundingClientRect().height ===
+      maxScroll;
+    const limit = 200;
+    if (this.years.length > limit)
+      return;
+    if (atTop) {
+      this.years = [
+        ...[...Array(5).keys()].map((year) => year + this.years[0] - 5),
+        ...this.years,
+      ];
+      this.yearContainerRef.scroll({ behavior: 'smooth', top: scroll + 100 });
+    }
+    if (atBottom) {
+      this.years = [
+        ...this.years,
+        ...[...Array(5).keys()].map((year) => year + this.years[this.years.length - 1]),
+      ];
+      this.yearContainerRef.scroll({ behavior: 'smooth', top: scroll - 50 });
+    }
+  }
+  selectTempYear(event, year) {
+    event.stopPropagation();
+    this.tempYear = year;
+  }
+  getDayClasses(day) {
+    var _a, _b;
+    if (!day) {
+      return;
+    }
+    const todayLocal = luxon.DateTime.local();
+    const dayLocal = luxon.DateTime.local(this.yearValue, this.monthValue, day);
+    const dayIso = dayLocal.toISO();
+    const startIso = (_a = this.start) === null || _a === void 0 ? void 0 : _a.toISO();
+    const endIso = (_b = this.end) === null || _b === void 0 ? void 0 : _b.toISO();
+    const isToday = Math.ceil(dayLocal.diff(todayLocal, 'days').days) === 0;
+    return {
+      'calendar-item': true,
+      'empty-day': day === undefined,
+      today: isToday,
+      selected: (this.start && dayIso === startIso) || (this.end && dayIso === endIso),
+      range: this.start && this.end && dayIso > startIso && dayIso < endIso,
+      disabled: !this.isWithinMinMax(dayLocal),
+    };
+  }
+  selectDay(day) {
+    const date = luxon.DateTime.local(this.yearValue, this.monthValue, day);
+    const isStartBeforeEnd = this.start && this.start.toISO() < date.toISO();
+    const isSameDay = this.start && !this.end && this.start.toISO() === date.toISO();
+    if (day === undefined)
+      return;
+    if (isSameDay) {
+      this.start = null;
+      this.onDateChange();
+      return;
+    }
+    if (this.range) {
+      if (this.start === null) {
+        this.start = date;
+      }
+      else if (this.end === null) {
+        if (isStartBeforeEnd) {
+          this.end = date;
+        }
+        else {
+          this.end = this.start;
+          this.start = date;
+        }
+      }
+      else {
+        this.start = date;
+        this.end = null;
+      }
+    }
+    else {
+      this.start = date;
+    }
+    this.onDateChange();
+  }
+  getOutputFormat() {
+    if (!this.start) {
+      return null;
+    }
+    if (!this.end) {
+      return this.start.toFormat(this.format);
+    }
+    return [
+      this.start.toFormat(this.format),
+      this.end.toFormat(this.format),
+    ].join(this.eventDelimiter);
+  }
+  isWithinMinMax(date) {
+    const dateIso = date.toISO();
+    const _minDate = this.minDate
+      ? luxon.DateTime.fromFormat(this.minDate, this.format)
+      : null;
+    const _maxDate = this.maxDate
+      ? luxon.DateTime.fromFormat(this.maxDate, this.format)
+      : null;
+    return ((!_minDate || _minDate.toISO() <= dateIso) &&
+      (!_maxDate || _maxDate.toISO() >= dateIso));
+  }
+  componentWillLoad() {
+    if (this.from === null) {
+      this.start = null;
+    }
+    if (this.year !== null) {
+      this.yearValue = this.year;
+    }
+    if (this.month) {
+      this.monthValue = this.month;
+    }
+  }
+  componentWillRender() {
+    this.calculateCalendar();
+  }
+  /**
+   * Get the current DateTime
+   */
+  async getCurrentDate() {
+    var _a, _b;
+    return {
+      start: (_a = this.start) === null || _a === void 0 ? void 0 : _a.toFormat(this.format),
+      end: (_b = this.end) === null || _b === void 0 ? void 0 : _b.toFormat(this.format),
+    };
+  }
+  render() {
+    return (h(Host, null, h("ix-date-time-card", { individual: this.individual, corners: this.corners }, h("div", { class: "header", slot: "header" }, h("ix-icon-button", { onClick: () => this.changeMonth(-1), ghost: true, icon: 'chevron-left', variant: "primary", class: "arrows" }), h("div", { class: "selector" }, h("ix-button", { ghost: true, ref: (ref) => (this.dropdownButtonRef = ref) }, h("span", { class: "fontSize capitalize" }, this.monthNames[this.monthValue - 1], " ", this.yearValue)), h("ix-dropdown", { class: "dropdown", trigger: this.dropdownButtonRef, placement: "bottom-start" }, h("div", { class: "wrapper" }, h("div", { class: "overflow", onScroll: () => this.infiniteScrollYears(), ref: (ref) => (this.yearContainerRef = ref) }, this.years.map((year) => (h("div", { key: year, class: { arrowYear: true }, onClick: (event) => this.selectTempYear(event, year) }, h("ix-icon", { class: {
+        hidden: this.tempYear !== year,
+        arrowPosition: true,
+      }, name: 'chevron-right', size: "12" }), h("div", { style: { 'min-width': 'max-content' } }, `${year}`))))), h("div", { class: "overflow" }, this.monthNames.map((month, index) => (h("div", { key: month, class: {
+        arrowYear: true,
+        selected: this.tempMonth - 1 === index,
+      }, onClick: () => this.selectMonth((index + 1)) }, h("ix-icon", { class: {
+        hidden: this.tempMonth - 1 !== index,
+        checkPosition: true,
+      }, name: 'single-check', size: "16" }), h("div", null, h("span", { class: { capitalize: true, monthMargin: true } }, `${month} ${this.tempYear}`))))))))), h("ix-icon-button", { onClick: () => this.changeMonth(1), ghost: true, icon: 'chevron-right', variant: "primary", class: "arrows" })), h("div", { class: "grid" }, h("div", { class: "calendar-item week-day" }), this.dayNames.map((name) => (h("div", { key: name, class: "calendar-item week-day" }, name.slice(0, 3)))), this.calendar.map((week) => {
+      return (h(Fragment, null, h("div", { class: "calendar-item week-number" }, week[0]), week[1].map((day) => (h("div", { key: day, class: this.getDayClasses(day), onClick: () => this.selectDay(day) }, day)))));
+    })), h("div", { class: { button: true, hidden: !this.individual || !this.range } }, h("ix-button", { onClick: () => this.onDone() }, this.textSelectDate)))));
+  }
+  static get style() { return datePickerCss; }
+}, [1, "ix-date-picker", {
+    "format": [1],
+    "range": [4],
+    "individual": [4],
+    "corners": [1],
+    "from": [1],
+    "to": [1],
+    "minDate": [1, "min-date"],
+    "maxDate": [1, "max-date"],
+    "eventDelimiter": [1, "event-delimiter"],
+    "textSelectDate": [1, "text-select-date"],
+    "yearValue": [32],
+    "today": [32],
+    "monthValue": [32],
+    "calendar": [32],
+    "years": [32],
+    "tempYear": [32],
+    "tempMonth": [32],
+    "start": [32],
+    "end": [32],
+    "dropdownButtonRef": [32],
+    "yearContainerRef": [32],
+    "getCurrentDate": [64]
+  }]);
+function defineCustomElement() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["ix-date-picker", "ix-button", "ix-date-time-card", "ix-dropdown", "ix-icon-button", "ix-spinner"];
+  components.forEach(tagName => { switch (tagName) {
+    case "ix-date-picker":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, DatePicker);
+      }
+      break;
+    case "ix-button":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$5();
+      }
+      break;
+    case "ix-date-time-card":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$4();
+      }
+      break;
+    case "ix-dropdown":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$3();
+      }
+      break;
+    case "ix-icon-button":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+    case "ix-spinner":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$1();
+      }
+      break;
+  } });
+}
+
+export { DatePicker as D, defineCustomElement as d };
+
+//# sourceMappingURL=date-picker.js.map

package/components/date-picker.js.map

@@ -0,0 +1 @@
+{"file":"date-picker.js","mappings":"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","names":["Info","DateTime"],"sources":["./src/components/date-picker/date-picker.scss?tag=ix-date-picker&encapsulation=shadow","./src/components/date-picker/date-picker.tsx"],"sourcesContent":["/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\n@import 'common-variables';\n@import 'mixins/shadow-dom/component';\n\n:host {\n  @include ix-component;\n  display: block;\n  position: relative;\n  width: 22rem;\n\n  .header {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n  }\n\n  .selector {\n    flex-basis: 100%;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    padding: $tiny-space $default-space;\n\n    .dropdown {\n      color: var(--theme-menu-item--color);\n      font-size: 14px;\n      line-height: 20px;\n    }\n\n    .fontSize {\n      font-size: 16px;\n    }\n\n    .capitalize {\n      text-transform: capitalize;\n    }\n\n    .arrowYear {\n      display: flex;\n      position: relative;\n      padding: $medium-space $x-large-space;\n      align-items: center;\n      cursor: pointer;\n\n      &:hover {\n        background-color: var(--theme-select-list-item--background--hover);\n      }\n\n      &.selected {\n        background-color: var(--theme-select-list-item--background--selected);\n      }\n\n      .arrowPosition {\n        position: absolute;\n        left: calc(($x-large-space / 2) - 6px);\n        top: calc(50% - 6px);\n      }\n\n      .checkPosition {\n        position: absolute;\n        left: calc(($x-large-space / 2) - 6px);\n        top: calc(50% - 8px);\n      }\n\n      .monthMargin {\n        margin-left: 10px;\n      }\n    }\n  }\n\n  .wrapper {\n    display: flex;\n\n    .overflow {\n      overflow-y: scroll;\n      max-height: 250px;\n    }\n  }\n\n  .grid {\n    display: grid;\n    grid-template-columns: repeat(8, 40px);\n    grid-template-rows: repeat(7, 40px);\n    align-items: center;\n    justify-items: center;\n    justify-content: center;\n    color: var(--theme-datepicker-today--color);\n\n    .calendar-item {\n      position: relative;\n      display: flex;\n      justify-content: center;\n      align-items: center;\n      background-color: var(--theme-datepicker-day--background);\n      border: 1px solid var(--theme-datepicker-day--background);\n      width: 40px;\n      height: 40px;\n      cursor: pointer;\n\n      &.today {\n        border: 1px solid var(--theme-datepicker-today--border-color);\n\n        &:hover {\n          background-color: var(--theme-datepicker-day--background--hover);\n        }\n\n        &:active {\n          background-color: var(--theme-datepicker-day--background--active);\n        }\n\n        &.selected {\n          box-shadow: inset 0 0 0 1px white;\n\n          &:hover {\n            background-color: var(\n              --theme-datepicker-day--background--selected-hover\n            );\n          }\n\n          &:active {\n            background-color: var(\n              --theme-datepicker-day--background--selected-active\n            );\n          }\n\n          &.disabled {\n            pointer-events: none;\n            background-color: var(\n              --theme-datepicker-day--background--selected-disabled\n            );\n            border: 1px solid\n              var(--theme-datepicker-day--background--selected-disabled);\n            color: var(--theme-datepicker-day--color--selected-disabled);\n          }\n        }\n\n        &.range {\n          background-color: var(--theme-datepicker-day--background--range);\n          color: var(--theme-datepicker-day--color--range);\n          border: 1px solid var(--theme-datepicker-today--border-color--range);\n          box-shadow: inset 0 0 0 1px white;\n\n          &:hover {\n            background-color: var(\n              --theme-datepicker-day--background--range-hover\n            );\n            border: 1px solid\n              var(--theme-datepicker-today--border-color--range-hover);\n          }\n\n          &:active {\n            background-color: var(\n              --theme-datepicker-day--background--range-active\n            );\n            border: 1px solid\n              var(--theme-datepicker-today--border-color--range-active);\n          }\n\n          &.disabled {\n            background-color: var(\n              --theme-datepicker-day--background--range-disabled\n            );\n            color: var(--theme-datepicker-day--color--range-disabled);\n            border: 1px solid\n              var(--theme-datepicker-today--border-color--range-disabled);\n          }\n        }\n\n        &.disabled {\n          pointer-events: none;\n          background-color: var(--theme-datepicker-day--background--disabled);\n          color: var(--theme-datepicker-day--color--disabled);\n          cursor: default;\n          pointer-events: none;\n        }\n      }\n\n      &:hover {\n        background-color: var(--theme-datepicker-day--background--hover);\n      }\n\n      &:active {\n        background-color: var(--theme-datepicker-day--background--active);\n      }\n\n      &.selected {\n        background-color: var(--theme-datepicker-day--background--selected);\n        color: var(--theme-datepicker-day--color--selected);\n        border: 1px solid var(--theme-datepicker-day--background--selected);\n\n        &:hover {\n          background-color: var(\n            --theme-datepicker-day--background--selected-hover\n          );\n        }\n\n        &:active {\n          background-color: var(\n            --theme-datepicker-day--background--selected-active\n          );\n        }\n\n        &.disabled {\n          pointer-events: none;\n          background-color: var(\n            --theme-datepicker-day--background--selected-disabled\n          );\n          color: var(--theme-datepicker-day--color--selected-disabled);\n        }\n      }\n\n      &.range {\n        background-color: var(--theme-datepicker-day--background--range);\n        color: var(--theme-datepicker-day--color--range);\n\n        &:hover {\n          background-color: var(\n            --theme-datepicker-day--background--range-hover\n          );\n        }\n\n        &:active {\n          background-color: var(\n            --theme-datepicker-day--background--range-active\n          );\n        }\n\n        &.disabled {\n          pointer-events: none;\n          background-color: var(\n            --theme-datepicker-day--background--range-disabled\n          );\n          color: var(--theme-datepicker-day--color--range-disabled);\n        }\n      }\n\n      &.disabled {\n        pointer-events: none;\n        background-color: var(--theme-datepicker-day--background--disabled);\n        color: var(--theme-datepicker-day--color--disabled);\n      }\n\n      &.week-day {\n        color: var(--theme-datepicker-weekday--color);\n        font-size: 12px;\n        line-height: 20px;\n        border: none;\n        background: none;\n        cursor: initial;\n      }\n\n      &.empty-day {\n        border: none;\n        background: none;\n        cursor: initial;\n      }\n\n      &.week-number {\n        font-size: 10px;\n        line-height: 14px;\n        color: var(--theme-datepicker-ix--color);\n        border: none;\n        background: none;\n        cursor: initial;\n      }\n\n      &:focus-visible {\n        background-color: var(--theme-datepicker-day--background--selected);\n        border: inset 1px solid\n          var(--theme-datepicker-day--border-color--selected);\n        color: var(--theme-datepicker-day--color--selected);\n        font-size: 14px;\n        line-height: 20px;\n        letter-spacing: 0;\n      }\n    }\n  }\n\n  .button {\n    display: flex;\n    justify-content: flex-end;\n  }\n\n  .hidden {\n    display: none;\n  }\n}\n","/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport {\n  Component,\n  Event,\n  EventEmitter,\n  Fragment,\n  h,\n  Host,\n  Method,\n  Prop,\n  State,\n} from '@stencil/core';\nimport { DateTime, Info, MonthNumbers } from 'luxon';\nimport { DateTimeCardCorners } from '../date-time-card/date-time-card';\n\nexport type DateChangeEvent = {\n  from: string;\n  to: string;\n};\n\nexport type LegacyDateChangeEvent = DateChangeEvent | string;\n\nexport type DateTimeCorners = DateTimeCardCorners;\n\n@Component({\n  tag: 'ix-date-picker',\n  styleUrl: './date-picker.scss',\n  shadow: true,\n})\nexport class DatePicker {\n  private daysInWeek = 7;\n  private dayNames = Info.weekdays();\n  private monthNames = Info.months();\n\n  /**\n   * Date format string.\n   * See @link https://moment.github.io/luxon/#/formatting?id=table-of-tokens for all available tokens.\n   */\n  @Prop() format: string = 'yyyy/LL/dd';\n\n  /**\n   * If true a range of dates can be selected.\n   */\n  @Prop() range: boolean = true;\n\n  /**\n   * @deprecated Will be removed in 2.0.0\n   */\n  @Prop() individual: boolean = true;\n\n  /**\n   * Corner style\n   */\n  @Prop() corners: DateTimeCardCorners = 'rounded';\n\n  /**\n   * Picker date. If the picker is in range mode this property is the start date.\n   * If set to `null` no default start date will be pre-selected.\n   *\n   * Format is based on `format`\n   *\n   * @since 1.1.0\n   */\n  @Prop() from: string | null = DateTime.now().toFormat(this.format);\n\n  /**\n   * Picker date. If the picker is in range mode this property is the end date.\n   * If the picker is not in range mode leave this value `null`\n   *\n   * Format is based on `format`\n   *\n   * @since 1.1.0\n   */\n  @Prop() to: string | null = null;\n\n  /**\n   * The earliest date that can be selected by the date picker.\n   * If not set there will be no restriction.\n   *\n   * @since 1.1.0\n   */\n  @Prop() minDate: string;\n\n  /**\n   * The latest date that can be selected by the date picker.\n   * If not set there will be no restriction.\n   *\n   * @since 1.1.0\n   */\n  @Prop() maxDate: string;\n\n  /**\n   * Default behavior of the done event is to join the two events (date and time) into one combined string output.\n   * This combination can be configured over the delimiter\n   *\n   * @since 1.1.0\n   */\n  @Prop() eventDelimiter = ' - ';\n\n  /**\n   * Text of date select button\n   *\n   * @since 1.1.0\n   */\n  @Prop() textSelectDate = 'Done';\n\n  @State() yearValue = this.year;\n  @State() today = DateTime.now();\n  @State() monthValue: number = this.month;\n  @State() calendar: [number, number[]][] = [];\n\n  @State() years = [...Array(10).keys()].map((year) => year + this.year - 5);\n  @State() tempYear: number = this.yearValue;\n  @State() tempMonth: number = this.monthValue;\n  @State() start: DateTime = DateTime.fromObject({\n    year: this.year,\n    month: this.month,\n    day: this.day,\n  });\n\n  @State() end: DateTime = this.to\n    ? DateTime.fromFormat(this.to, this.format)\n    : null;\n\n  @State() dropdownButtonRef: HTMLElement;\n  @State() yearContainerRef: HTMLElement;\n\n  /**\n   * Date change event\n   *\n   * If datepicker is in range mode the event detail will be sperated with a `-` e.g.\n   * `2022/10/22 - 2022/10/24` (start and end). If range mode is chosen consider to use `dateRangeChange`.\n   *\n   * @deprecated String output will be removed. Set ´doneEventDelimiter´ to undefined or null to get date change object instead of a string\n   */\n  @Event() dateChange: EventEmitter<LegacyDateChangeEvent>;\n\n  /**\n   * Date range change.\n   * Only triggered if datepicker is in range mode\n   *\n   * @since 1.1.0\n   */\n  @Event() dateRangeChange: EventEmitter<DateChangeEvent>;\n\n  /**\n   * Date selection confirmed via button action\n   *\n   * @deprecated Will be removed in 2.0.0. Use `dateSelect`\n   */\n  @Event() done: EventEmitter<string>;\n\n  /**\n   * Date selection confirmed via button action\n   *\n   * @since 1.1.0\n   */\n  @Event() dateSelect: EventEmitter<DateChangeEvent>;\n\n  get year() {\n    if (this.from !== null) {\n      return DateTime.fromFormat(this.from, this.format).year;\n    }\n\n    return DateTime.now().year;\n  }\n\n  get day() {\n    if (this.from !== null) {\n      return DateTime.fromFormat(this.from, this.format).day;\n    }\n\n    return null;\n  }\n\n  get month() {\n    if (this.from !== null) {\n      return DateTime.fromFormat(this.from, this.format).month;\n    }\n\n    return DateTime.now().month;\n  }\n\n  private onDone() {\n    this.done.emit(this.getOutputFormat());\n\n    this.dateSelect.emit({\n      from: this.start?.toFormat(this.format),\n      to: this.end?.toFormat(this.format),\n    });\n  }\n\n  private onDateChange() {\n    const from = this.start?.toFormat(this.format);\n    const to = this.end?.toFormat(this.format);\n\n    this.from = from;\n    this.to = to;\n\n    if (this.eventDelimiter) {\n      this.dateChange.emit(this.getOutputFormat());\n    } else {\n      this.dateChange.emit({\n        from,\n        to,\n      });\n    }\n\n    if (this.range) {\n      this.dateRangeChange.emit({\n        from,\n        to,\n      });\n    }\n  }\n\n  private getStartOfMonth(\n    year = DateTime.local().get('year'),\n    month = DateTime.local().get('month')\n  ) {\n    return DateTime.local(year, month).startOf('month');\n  }\n\n  private getEndOfMonth(\n    year = DateTime.local().get('year'),\n    month = DateTime.local().get('month')\n  ) {\n    return DateTime.local(year, month).endOf('month');\n  }\n\n  private getDaysInMonth(\n    start = this.getStartOfMonth(),\n    end = this.getEndOfMonth()\n  ) {\n    return Math.ceil(end.diff(start, 'days').days);\n  }\n\n  private calculateCalendar() {\n    const start = this.getStartOfMonth(this.yearValue, this.monthValue);\n    const end = this.getEndOfMonth(this.yearValue, this.monthValue);\n    const totalDays = this.getDaysInMonth(start, end);\n    const totalWeeks = 6;\n    const totalDaysInWeeks = totalWeeks * this.daysInWeek;\n    const startWeekDay = start.weekday;\n    const prependDays = startWeekDay - 1;\n    const appendDays = totalDaysInWeeks - totalDays - prependDays;\n    let weekdays: number[][] = [];\n    const calendar: [number, number[]][] = [];\n\n    // create list of days\n    let days = [...new Array(totalDaysInWeeks).keys()].map((day) => day + 1);\n\n    // add start empty days\n    days.unshift(...new Array(prependDays));\n\n    // remove & add end days\n    days = days.slice(0, days.length - prependDays - appendDays);\n    days.push(...new Array(appendDays));\n\n    // make weeks\n    weekdays = days.reduce((result, item, index) => {\n      const weekIndex = Math.floor(index / this.daysInWeek);\n\n      if (!result[weekIndex]) result[weekIndex] = [];\n\n      result[weekIndex].push(item);\n\n      return result;\n    }, []);\n\n    for (let index = 1; index <= totalWeeks; index++) {\n      const week = weekdays[index - 1];\n      const firstWeekDay = week.find((day) => day !== undefined);\n      const weekNumber = firstWeekDay\n        ? DateTime.local(\n            this.yearValue,\n            this.monthValue,\n            weekdays[index - 1][0]\n          ).weekNumber\n        : undefined;\n      calendar.push([weekNumber, week]);\n    }\n\n    this.calendar = calendar;\n  }\n\n  private changeMonth(number) {\n    if (this.monthValue + number < 1) {\n      this.yearValue--;\n      this.monthValue = 12;\n    } else if (this.monthValue + number > 12) {\n      this.yearValue++;\n      this.monthValue = 1;\n    } else {\n      this.monthValue += number;\n    }\n    this.calculateCalendar();\n  }\n\n  private selectMonth(month: MonthNumbers) {\n    this.monthValue = month;\n    this.yearValue = this.tempYear;\n    this.tempMonth = month;\n  }\n\n  private infiniteScrollYears() {\n    const scroll = this.yearContainerRef.scrollTop;\n    const maxScroll = this.yearContainerRef.scrollHeight;\n    const atTop = scroll === 0;\n    const atBottom =\n      scroll + this.yearContainerRef.getBoundingClientRect().height ===\n      maxScroll;\n    const limit = 200;\n\n    if (this.years.length > limit) return;\n\n    if (atTop) {\n      this.years = [\n        ...[...Array(5).keys()].map((year) => year + this.years[0] - 5),\n        ...this.years,\n      ];\n      this.yearContainerRef.scroll({ behavior: 'smooth', top: scroll + 100 });\n    }\n\n    if (atBottom) {\n      this.years = [\n        ...this.years,\n        ...[...Array(5).keys()].map(\n          (year) => year + this.years[this.years.length - 1]\n        ),\n      ];\n      this.yearContainerRef.scroll({ behavior: 'smooth', top: scroll - 50 });\n    }\n  }\n\n  private selectTempYear(event: MouseEvent, year: number) {\n    event.stopPropagation();\n    this.tempYear = year;\n  }\n\n  private getDayClasses(day: number) {\n    if (!day) {\n      return;\n    }\n\n    const todayLocal = DateTime.local();\n    const dayLocal = DateTime.local(this.yearValue, this.monthValue, day);\n    const dayIso = dayLocal.toISO();\n    const startIso = this.start?.toISO();\n    const endIso = this.end?.toISO();\n    const isToday = Math.ceil(dayLocal.diff(todayLocal, 'days').days) === 0;\n\n    return {\n      'calendar-item': true,\n      'empty-day': day === undefined,\n      today: isToday,\n      selected:\n        (this.start && dayIso === startIso) || (this.end && dayIso === endIso),\n      range: this.start && this.end && dayIso > startIso && dayIso < endIso,\n      disabled: !this.isWithinMinMax(dayLocal),\n    };\n  }\n\n  private selectDay(day: number) {\n    const date = DateTime.local(this.yearValue, this.monthValue, day);\n    const isStartBeforeEnd = this.start && this.start.toISO() < date.toISO();\n    const isSameDay =\n      this.start && !this.end && this.start.toISO() === date.toISO();\n\n    if (day === undefined) return;\n\n    if (isSameDay) {\n      this.start = null;\n      this.onDateChange();\n      return;\n    }\n\n    if (this.range) {\n      if (this.start === null) {\n        this.start = date;\n      } else if (this.end === null) {\n        if (isStartBeforeEnd) {\n          this.end = date;\n        } else {\n          this.end = this.start;\n          this.start = date;\n        }\n      } else {\n        this.start = date;\n        this.end = null;\n      }\n    } else {\n      this.start = date;\n    }\n\n    this.onDateChange();\n  }\n\n  private getOutputFormat() {\n    if (!this.start) {\n      return null;\n    }\n\n    if (!this.end) {\n      return this.start.toFormat(this.format);\n    }\n\n    return [\n      this.start.toFormat(this.format),\n      this.end.toFormat(this.format),\n    ].join(this.eventDelimiter);\n  }\n\n  private isWithinMinMax(date: DateTime) {\n    const dateIso = date.toISO();\n    const _minDate = this.minDate\n      ? DateTime.fromFormat(this.minDate, this.format)\n      : null;\n    const _maxDate = this.maxDate\n      ? DateTime.fromFormat(this.maxDate, this.format)\n      : null;\n    return (\n      (!_minDate || _minDate.toISO() <= dateIso) &&\n      (!_maxDate || _maxDate.toISO() >= dateIso)\n    );\n  }\n\n  componentWillLoad() {\n    if (this.from === null) {\n      this.start = null;\n    }\n\n    if (this.year !== null) {\n      this.yearValue = this.year;\n    }\n    if (this.month) {\n      this.monthValue = this.month;\n    }\n  }\n\n  componentWillRender() {\n    this.calculateCalendar();\n  }\n\n  /**\n   * Get the current DateTime\n   */\n  @Method()\n  async getCurrentDate() {\n    return {\n      start: this.start?.toFormat(this.format),\n      end: this.end?.toFormat(this.format),\n    };\n  }\n\n  render() {\n    return (\n      <Host>\n        <ix-date-time-card individual={this.individual} corners={this.corners}>\n          <div class=\"header\" slot=\"header\">\n            <ix-icon-button\n              onClick={() => this.changeMonth(-1)}\n              ghost\n              icon={'chevron-left'}\n              variant=\"primary\"\n              class=\"arrows\"\n            ></ix-icon-button>\n\n            <div class=\"selector\">\n              <ix-button ghost ref={(ref) => (this.dropdownButtonRef = ref)}>\n                <span class=\"fontSize capitalize\">\n                  {this.monthNames[this.monthValue - 1]} {this.yearValue}\n                </span>\n              </ix-button>\n              <ix-dropdown\n                class=\"dropdown\"\n                trigger={this.dropdownButtonRef}\n                placement=\"bottom-start\"\n              >\n                <div class=\"wrapper\">\n                  <div\n                    class=\"overflow\"\n                    onScroll={() => this.infiniteScrollYears()}\n                    ref={(ref) => (this.yearContainerRef = ref)}\n                  >\n                    {this.years.map((year) => (\n                      <div\n                        key={year}\n                        class={{ arrowYear: true }}\n                        onClick={(event) => this.selectTempYear(event, year)}\n                      >\n                        <ix-icon\n                          class={{\n                            hidden: this.tempYear !== year,\n                            arrowPosition: true,\n                          }}\n                          name={'chevron-right'}\n                          size=\"12\"\n                        ></ix-icon>\n                        <div\n                          style={{ 'min-width': 'max-content' }}\n                        >{`${year}`}</div>\n                      </div>\n                    ))}\n                  </div>\n                  <div class=\"overflow\">\n                    {this.monthNames.map((month, index) => (\n                      <div\n                        key={month}\n                        class={{\n                          arrowYear: true,\n                          selected: this.tempMonth - 1 === index,\n                        }}\n                        onClick={() =>\n                          this.selectMonth((index + 1) as MonthNumbers)\n                        }\n                      >\n                        <ix-icon\n                          class={{\n                            hidden: this.tempMonth - 1 !== index,\n                            checkPosition: true,\n                          }}\n                          name={'single-check'}\n                          size=\"16\"\n                        ></ix-icon>\n                        <div>\n                          <span\n                            class={{ capitalize: true, monthMargin: true }}\n                          >{`${month} ${this.tempYear}`}</span>\n                        </div>\n                      </div>\n                    ))}\n                  </div>\n                </div>\n              </ix-dropdown>\n            </div>\n\n            <ix-icon-button\n              onClick={() => this.changeMonth(1)}\n              ghost\n              icon={'chevron-right'}\n              variant=\"primary\"\n              class=\"arrows\"\n            ></ix-icon-button>\n          </div>\n\n          <div class=\"grid\">\n            <div class=\"calendar-item week-day\"></div>\n            {this.dayNames.map((name) => (\n              <div key={name} class=\"calendar-item week-day\">\n                {name.slice(0, 3)}\n              </div>\n            ))}\n\n            {this.calendar.map((week) => {\n              return (\n                <Fragment>\n                  <div class=\"calendar-item week-number\">{week[0]}</div>\n                  {week[1].map((day) => (\n                    <div\n                      key={day}\n                      class={this.getDayClasses(day)}\n                      onClick={() => this.selectDay(day)}\n                    >\n                      {day}\n                    </div>\n                  ))}\n                </Fragment>\n              );\n            })}\n          </div>\n\n          <div\n            class={{ button: true, hidden: !this.individual || !this.range }}\n          >\n            <ix-button onClick={() => this.onDone()}>\n              {this.textSelectDate}\n            </ix-button>\n          </div>\n        </ix-date-time-card>\n      </Host>\n    );\n  }\n}\n"],"version":3}