udp-stencil-component-library 1.0.0

package/dist/cjs/udp-card_5.cjs.entry.js

@@ -0,0 +1,126 @@
+'use strict';
+
+var index = require('./index-Bu1pSYrV.js');
+
+const udpCardCss = ":host{display:block;background:var(--udp-card-background, #fff);overflow:hidden;color:var(--text-main);font-family:var(--font-family);font-size:var(--body2-font-size);font-weight:var(--body2-font-weight);line-height:var(--body2-line-height);position:relative;}:host udp-adornment{position:absolute;top:0;left:0;bottom:0;width:4px;z-index:1}:host udp-card-content{position:relative;z-index:0}:host udp-card-action-area{position:absolute;top:0;left:0;width:100%;height:100%;z-index:1;background:transparent;transition:background-color 0.3s ease}:host udp-card-action-area:hover{background:rgba(0, 0, 0, 0.04)}:host udp-card-actions{position:relative;z-index:2}:host udp-card-actions ::slotted(*){pointer-events:auto !important}:host(.outlined){border:1px solid var(--divider-color, 'red')}:host(.elevation-1){box-shadow:var(--elevation-01)}:host(.elevation-2){box-shadow:var(--elevation-02)}:host(.elevation-3){box-shadow:var(--elevation-03)}:host(.elevation-4){box-shadow:var(--elevation-04)}:host(.elevation-5){box-shadow:var(--elevation-05)}:host(.elevation-6){box-shadow:var(--elevation-06)}:host(.elevation-7){box-shadow:var(--elevation-07)}:host(.elevation-8){box-shadow:var(--elevation-08)}";
+
+const UdpCard = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        /**
+         * The variant to use.
+         */
+        this.variant = 'elevated';
+        /**
+         * The adornmentStatus of the card.
+         */
+        this.adornmentStatus = 'success';
+        /**
+         * If true, the header title and subheader won't be wrapped by Typography component
+         */
+        this.disableHeaderTypography = false;
+        /**
+         * If `true`, the card content area will not have padding.
+         */
+        this.disableContentGutter = false;
+        /**
+         * If `true`, the card content area will not have padding.
+         */
+        this.disableContentPadding = false;
+    }
+    hasSlottedContent(slotName) {
+        return !!this.el.querySelector(`[slot="${slotName}"]`);
+    }
+    render() {
+        // const elevationClass = this.variant === 'elevation' && this.elevation >= 1 && this.elevation <= 8 ? `elevation-${this.elevation}` : null;
+        const renderHeader = !this.hasSlottedContent('header') && (this.cardTitle || this.subheader || this.avatar || this.headerAction);
+        const renderMedia = !this.hasSlottedContent('media') && this.mediaImage;
+        // const hasDefaultContent = !!this.el.querySelector(':not([slot])');
+        const mainContent = (index.h(index.Fragment, { key: '32da303c5011684075a85503b42c9c9ca72b9ac3' }, renderMedia ? index.h("udp-card-media", { image: this.mediaImage, title: this.mediaTitle }) : index.h("slot", { name: "media" }), renderHeader ? (index.h("udp-card-header", { cardTitle: this.cardTitle, subheader: this.subheader, avatar: this.avatar, action: this.headerAction, disableTypography: this.disableHeaderTypography, onTitleClick: this.onTitleClick })) : (index.h("slot", { name: "header" })), index.h("udp-card-content", { key: '6cf7a1d684164613b574a75ee6ca2359028c99f7', disableGutter: this.disableContentGutter, disablePadding: this.disableContentPadding }, index.h("slot", { key: '0463089e2b404458b4861eff110947cee0bbea97' }))));
+        return (index.h(index.Host, { key: '3b5152b05f612b7214ece9aee3223105a9e00988', class: {
+                [this.variant]: true,
+            } }, this.adornmentStatus && index.h("udp-adornment", { key: 'bcbd6afa21b2e1671f994cfc96d1b2460c73239f', status: this.adornmentStatus }), mainContent, this.actions && index.h("udp-card-actions", { key: '970d830a30794edbe53aa1d3ef08b2045854b69e' }, this.actions)));
+    }
+    get el() { return index.getElement(this); }
+};
+UdpCard.style = udpCardCss;
+
+const udpCardActionsCss = ":host{display:flex;padding:var(--spacing-03, 8px);align-items:center;gap:var(--spacing-03, 8px);}:host(.start){justify-content:flex-start}:host(.center){justify-content:center}:host(.end){justify-content:flex-end}::slotted(*){margin:0}";
+
+const UdpCardActions = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        /**
+         * The alignment of the actions.
+         */
+        this.align = 'end';
+    }
+    render() {
+        return (index.h(index.Host, { key: '1cfb1f3024e3881f2b5fc6c7afdfc34f4889b2b7', class: this.align }, index.h("slot", { key: '325e7c248f7b070099d496d238b3e0d754e373ae' })));
+    }
+};
+UdpCardActions.style = udpCardActionsCss;
+
+const udpCardContentCss = ":host{display:block;padding:var(--spacing-05, 16px)}:host(:last-child){padding-bottom:var(--spacing-06, 24px)}.disable-gutter{padding-left:0 !important;padding-right:0 !important}.disable-padding{padding-top:0 !important;padding-bottom:0 !important}";
+
+const UdpCardContent = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.disableGutter = false;
+        this.disablePadding = false;
+    }
+    render() {
+        return (index.h(index.Host, { key: '3b31fe55255156c21e02d2b6c454b5e3d5c19e42', class: { 'disable-gutter': this.disableGutter, 'disable-padding': this.disablePadding } }, index.h("slot", { key: 'adfee650e06439b6706367abb912fd7bd135b7f9' })));
+    }
+};
+UdpCardContent.style = udpCardContentCss;
+
+const udpCardHeaderCss = ":host{display:flex;align-items:center;padding:var(--spacing-05, 16px)}.avatar{margin-right:var(--spacing-04, 12px);display:flex;flex:0 0 auto}.content{flex:1 1 auto;min-width:0}.action{flex:0 0 auto;align-self:flex-start;margin-top:var(--spacing-02, 4px);margin-right:var(--spacing-02, 4px);margin-left:var(--spacing-03, 8px)}::slotted([slot=\"title\"]){display:block;margin-bottom:0}::slotted([slot=\"subheader\"]){display:block;color:var(--text-secondary)}::slotted([slot=\"action\"]){flex:0 0 auto;align-self:flex-start;margin-top:var(--spacing-02, 4px);margin-right:var(--spacing-02, 4px);margin-left:var(--spacing-03, 8px)}::slotted(*){font-size:var(--h6-font-size);font-weight:var(--h6-font-weight);line-height:var(--h6-line-height)}";
+
+const UdpCardHeader = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.titleClick = index.createEvent(this, "titleClick");
+        /**
+         * If true, the title and subheader won't be wrapped by Typography component
+         */
+        this.disableTypography = false;
+        /**
+         * Optional target for the title link
+         */
+        this.titleTarget = '_self';
+        this.handleTitleClick = (e) => {
+            // Extract the original MouseEvent from the CustomEvent detail
+            const mouseEvent = e.detail;
+            this.titleClick.emit(mouseEvent);
+        };
+    }
+    render() {
+        const titleContent = this.disableTypography ? this.cardTitle : index.h("unity-typography", { variant: "h6" }, this.cardTitle);
+        const wrappedTitleContent = this.titleHref || this.titleClick ? (index.h("udp-link", { href: this.titleHref, target: this.titleTarget, onLinkClick: this.handleTitleClick }, titleContent)) : (titleContent);
+        const subheaderContent = this.disableTypography ? (this.subheader) : typeof this.subheader === 'string' ? (index.h("unity-typography", { variant: "body1", color: "textSecondary" }, this.subheader)) : (this.subheader);
+        return (index.h(index.Host, { key: '6138eae4b4c61bfddd8861e5b17f3f6b3bee6dff' }, this.avatar && index.h("div", { key: '567592e960a18fd2bb6477264bf8642069012b27', class: "avatar" }, this.avatar), index.h("div", { key: '6626709d464a8225401b743736889e92fe95a24d', class: "content" }, index.h("slot", { key: 'e90028bb773e9b5c0306b0605d9134fafc342db5', name: "title" }, this.cardTitle && wrappedTitleContent), index.h("slot", { key: '2dcadae7cbc446be74e3306299bba8a59670156f', name: "subheader" }, this.subheader && subheaderContent), index.h("slot", { key: 'f7ceb8eb44e4925f8a36ff1db22dfe7472aa3055' })), this.action && index.h("div", { key: '52964e26c8ecf85c1a84ab71488ab5017f073126', class: "action" }, this.action), index.h("slot", { key: '57efe6132f105f8fd71fbbb2ed1ed0a636ccb34e', name: "action" })));
+    }
+};
+UdpCardHeader.style = udpCardHeaderCss;
+
+const udpCardMediaCss = ":host{display:block;background-size:cover;background-repeat:no-repeat;background-position:center;height:var(--udp-card-media-height, 140px)}";
+
+const UdpCardMedia = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+    }
+    render() {
+        return (index.h(index.Host, { key: 'a2eac85bc659cb21a85511919935f9244439538a', role: "img", style: { backgroundImage: this.image ? `url(${this.image})` : undefined }, "aria-label": this.title }, index.h("slot", { key: '16b6131307cbaa02e1182b204ded280fa903da0a' })));
+    }
+};
+UdpCardMedia.style = udpCardMediaCss;
+
+exports.udp_card = UdpCard;
+exports.udp_card_actions = UdpCardActions;
+exports.udp_card_content = UdpCardContent;
+exports.udp_card_header = UdpCardHeader;
+exports.udp_card_media = UdpCardMedia;
+//# sourceMappingURL=udp-card.udp-card-actions.udp-card-content.udp-card-header.udp-card-media.entry.cjs.js.map
+
+//# sourceMappingURL=udp-card_5.cjs.entry.js.map

package/dist/cjs/udp-card_5.cjs.entry.js.map

@@ -0,0 +1 @@
+{"file":"udp-card.udp-card-actions.udp-card-content.udp-card-header.udp-card-media.entry.cjs.js","mappings":"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","names":["h","Fragment","Host"],"sources":["src/components/my-component/UI/data-display/cards/udp-card/udp-card.css?tag=udp-card&encapsulation=shadow","src/components/my-component/UI/data-display/cards/udp-card/udp-card.tsx","src/components/my-component/UI/data-display/cards/udp-card/udp-card-actions/udp-card-actions.css?tag=udp-card-actions&encapsulation=shadow","src/components/my-component/UI/data-display/cards/udp-card/udp-card-actions/udp-card-actions.tsx","src/components/my-component/UI/data-display/cards/udp-card/udp-card-content/udp-card-content.css?tag=udp-card-content&encapsulation=shadow","src/components/my-component/UI/data-display/cards/udp-card/udp-card-content/udp-card-content.tsx","src/components/my-component/UI/data-display/cards/udp-card/udp-card-header/udp-card-header.css?tag=udp-card-header&encapsulation=shadow","src/components/my-component/UI/data-display/cards/udp-card/udp-card-header/udp-card-header.tsx","src/components/my-component/UI/data-display/cards/udp-card/udp-card-media/udp-card-media.css?tag=udp-card-media&encapsulation=shadow","src/components/my-component/UI/data-display/cards/udp-card/udp-card-media/udp-card-media.tsx"],"sourcesContent":[":host {\n  display: block;\n  background: var(--udp-card-background, #fff);\n  overflow: hidden;\n  color: var(--text-main);\n  font-family: var(--font-family);\n  font-size: var(--body2-font-size);\n  font-weight: var(--body2-font-weight);\n  line-height: var(--body2-line-height);\n  position: relative; /* For absolute positioning of adornment */\n}\n\n/* Position adornment as a border */\n:host udp-adornment {\n  position: absolute;\n  top: 0;\n  left: 0;\n  bottom: 0;\n  width: 4px; /* Match the width in udp-adornment.tsx */\n  z-index: 1;\n}\n\n/* Ensure card content doesn't overlap with adornment */\n:host udp-card-content {\n  position: relative;\n  z-index: 0;\n}\n\n/* Action area styles - positioned as overlay */\n:host udp-card-action-area {\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  z-index: 1;\n  background: transparent;\n  transition: background-color 0.3s ease;\n}\n\n:host udp-card-action-area:hover {\n  background: rgba(0, 0, 0, 0.04);\n}\n\n/* Keep actions above the action area */\n:host udp-card-actions {\n  position: relative;\n  z-index: 2;\n}\n\n/* Ensure buttons and interactive elements within actions are clickable */\n:host udp-card-actions ::slotted(*) {\n  pointer-events: auto !important;\n}\n\n:host(.outlined) {\n  border: 1px solid var(--divider-color, 'red');\n}\n\n:host(.elevation-1) { box-shadow: var(--elevation-01); }\n:host(.elevation-2) { box-shadow: var(--elevation-02); }\n:host(.elevation-3) { box-shadow: var(--elevation-03); }\n:host(.elevation-4) { box-shadow: var(--elevation-04); }\n:host(.elevation-5) { box-shadow: var(--elevation-05); }\n:host(.elevation-6) { box-shadow: var(--elevation-06); }\n:host(.elevation-7) { box-shadow: var(--elevation-07); }\n:host(.elevation-8) { box-shadow: var(--elevation-08); } ","import { Component, Host, h, Prop, Fragment, VNode, Element } from '@stencil/core';\n\n@Component({\n  tag: 'udp-card',\n  styleUrl: 'udp-card.css',\n  shadow: true,\n})\nexport class UdpCard {\n  @Element() el: HTMLElement;\n\n  /**\n   * The variant to use.\n   */\n  @Prop() variant: 'elevated' | 'outlined' = 'elevated';\n\n  /**\n   * The adornmentStatus of the card.\n   */\n  @Prop() adornmentStatus: 'success' | 'error' | 'warning' | 'info' = 'success';\n\n  /**\n   * The title for the card header\n   */\n  @Prop() cardTitle?: string;\n\n  /**\n   * The subheader for the card header\n   */\n  @Prop() subheader?: string | VNode | VNode[];\n\n  /**\n   * The avatar element to display in the card header\n   */\n  @Prop() avatar?: any;\n\n  /**\n   * The action to display in the card header\n   */\n  @Prop() headerAction?: any;\n\n  /**\n   * If true, the header title and subheader won't be wrapped by Typography component\n   */\n  @Prop() disableHeaderTypography?: boolean = false;\n\n  /**\n   * The image URL for the card media.\n   */\n  @Prop() mediaImage: string;\n\n  /**\n   * The title for the card media image, used for accessibility.\n   */\n  @Prop() mediaTitle: string;\n\n  /**\n   * The actions to display in the card footer\n   */\n  @Prop() actions?: any;\n\n  /**\n   * If `true`, the card content area will not have padding.\n   */\n  @Prop() disableContentGutter: boolean = false;\n\n  /**\n   * If `true`, the card content area will not have padding.\n   */\n  @Prop() disableContentPadding: boolean = false;\n\n  /**\n   * If `true`, the main content area of the card becomes a clickable action area.\n   * Not implemented yet.\n   */\n  // @Prop() actionArea: boolean = false;\n\n  /**\n   * Click handler for when actionArea is true\n   * Not implemented yet.\n   */\n  // @Prop() onClick?: (e: MouseEvent) => void;\n\n  /**\n   * Optional handler for when the title is clicked\n   */\n  @Prop() onTitleClick?: (e: CustomEvent) => void;\n\n  private hasSlottedContent(slotName: string): boolean {\n    return !!this.el.querySelector(`[slot=\"${slotName}\"]`);\n  }\n\n  render() {\n    // const elevationClass = this.variant === 'elevation' && this.elevation >= 1 && this.elevation <= 8 ? `elevation-${this.elevation}` : null;\n\n    const renderHeader = !this.hasSlottedContent('header') && (this.cardTitle || this.subheader || this.avatar || this.headerAction);\n    const renderMedia = !this.hasSlottedContent('media') && this.mediaImage;\n    // const hasDefaultContent = !!this.el.querySelector(':not([slot])');\n\n    const mainContent = (\n      <Fragment>\n        {renderMedia ? <udp-card-media image={this.mediaImage} title={this.mediaTitle}></udp-card-media> : <slot name=\"media\"></slot>}\n        {renderHeader ? (\n          <udp-card-header\n            cardTitle={this.cardTitle}\n            subheader={this.subheader}\n            avatar={this.avatar}\n            action={this.headerAction}\n            disableTypography={this.disableHeaderTypography}\n            onTitleClick={this.onTitleClick}\n          />\n        ) : (\n          <slot name=\"header\"></slot>\n        )}\n        <udp-card-content disableGutter={this.disableContentGutter} disablePadding={this.disableContentPadding}>\n          <slot></slot>\n        </udp-card-content>\n      </Fragment>\n    );\n\n    return (\n      <Host\n        class={{\n          [this.variant]: true,\n        }}\n      >\n        {this.adornmentStatus && <udp-adornment status={this.adornmentStatus} />}\n        {mainContent}\n        {/* TODO: Needs to be tested more before uncommenting */}\n        {/* {this.actionArea && <udp-card-action-area onClick={this.onClick} style={{ cursor: 'pointer' }} />} */}\n        {this.actions && <udp-card-actions>{this.actions}</udp-card-actions>}\n      </Host>\n    );\n  }\n}\n",":host {\n  display: flex;\n  padding: var(--spacing-03, 8px);\n  align-items: center;\n  gap: var(--spacing-03, 8px);\n  /* background-color: red; */\n}\n\n:host(.start) {\n  justify-content: flex-start;\n}\n\n:host(.center) {\n  justify-content: center;\n}\n\n:host(.end) {\n  justify-content: flex-end;\n}\n\n::slotted(*) {\n  margin: 0;\n} ","import { Component, Host, h, Prop } from '@stencil/core';\n\n@Component({\n  tag: 'udp-card-actions',\n  styleUrl: 'udp-card-actions.css',\n  shadow: true,\n})\nexport class UdpCardActions {\n  /**\n   * The alignment of the actions.\n   */\n  @Prop() align: 'start' | 'center' | 'end' = 'end';\n\n  render() {\n    return (\n      <Host class={this.align}>\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n",":host {\n  display: block;\n  padding: var(--spacing-05, 16px);\n}\n\n:host(:last-child) {\n  padding-bottom: var(--spacing-06, 24px);\n}\n\n/* TODO: refactor to remove !important */\n.disable-gutter {\n  padding-left: 0 !important;\n  padding-right: 0 !important;\n}\n\n/* TODO: refactor to remove !important */\n.disable-padding {\n  padding-top: 0 !important;\n  padding-bottom: 0 !important;\n}","import { Component, Host, Prop, h } from '@stencil/core';\n\n@Component({\n  tag: 'udp-card-content',\n  styleUrl: 'udp-card-content.css',\n  shadow: true,\n})\nexport class UdpCardContent {\n  @Prop() disableGutter: boolean = false;\n  @Prop() disablePadding: boolean = false;\n\n  render() {\n    return (\n      <Host class={{ 'disable-gutter': this.disableGutter, 'disable-padding': this.disablePadding }}>\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n",":host {\n  display: flex;\n  align-items: center;\n  padding: var(--spacing-05, 16px);\n}\n\n.avatar {\n  margin-right: var(--spacing-04, 12px);\n  display: flex;\n  flex: 0 0 auto;\n}\n\n.content {\n  flex: 1 1 auto;\n  min-width: 0;\n}\n\n.action {\n  flex: 0 0 auto;\n  align-self: flex-start;\n  margin-top: var(--spacing-02, 4px);\n  margin-right: var(--spacing-02, 4px);\n  margin-left: var(--spacing-03, 8px);\n}\n\n::slotted([slot=\"title\"]) {\n  display: block;\n  margin-bottom: 0;\n}\n\n::slotted([slot=\"subheader\"]) {\n  display: block;\n  color: var(--text-secondary);\n}\n\n::slotted([slot=\"action\"]) {\n  flex: 0 0 auto;\n  align-self: flex-start;\n  margin-top: var(--spacing-02, 4px);\n  margin-right: var(--spacing-02, 4px);\n  margin-left: var(--spacing-03, 8px);\n}\n\n::slotted(*) {\n  font-size: var(--h6-font-size);\n  font-weight: var(--h6-font-weight);\n  line-height: var(--h6-line-height);\n} ","import { Component, Host, h, Prop, VNode, Event, EventEmitter } from '@stencil/core';\n\n@Component({\n  tag: 'udp-card-header',\n  styleUrl: 'udp-card-header.css',\n  shadow: true,\n})\nexport class UdpCardHeader {\n  /**\n   * The action to display in the card header\n   */\n  @Prop() action?: any;\n\n  /**\n   * The avatar element to display\n   */\n  @Prop() avatar?: any;\n\n  /**\n   * The title content\n   */\n  @Prop() cardTitle?: string;\n\n  /**\n   * The subheader content. Can be a string or JSX.\n   */\n  @Prop() subheader?: string | VNode | VNode[];\n\n  /**\n   * If true, the title and subheader won't be wrapped by Typography component\n   */\n  @Prop() disableTypography: boolean = false;\n\n  /**\n   * Optional URL for the title link\n   */\n  @Prop() titleHref?: string;\n\n  /**\n   * Optional target for the title link\n   */\n  @Prop() titleTarget?: string = '_self';\n\n  /**\n   * Event emitted when the title link is clicked\n   */\n  @Event() titleClick: EventEmitter<MouseEvent>;\n\n  private handleTitleClick = (e: CustomEvent) => {\n    // Extract the original MouseEvent from the CustomEvent detail\n    const mouseEvent = e.detail;\n    this.titleClick.emit(mouseEvent);\n  };\n\n  render() {\n    const titleContent = this.disableTypography ? this.cardTitle : <unity-typography variant=\"h6\">{this.cardTitle}</unity-typography>;\n\n    const wrappedTitleContent =\n      this.titleHref || this.titleClick ? (\n        <udp-link href={this.titleHref} target={this.titleTarget} onLinkClick={this.handleTitleClick}>\n          {titleContent}\n        </udp-link>\n      ) : (\n        titleContent\n      );\n\n    const subheaderContent = this.disableTypography ? (\n      this.subheader\n    ) : typeof this.subheader === 'string' ? (\n      <unity-typography variant=\"body1\" color=\"textSecondary\">\n        {this.subheader}\n      </unity-typography>\n    ) : (\n      this.subheader\n    );\n\n    return (\n      <Host>\n        {this.avatar && <div class=\"avatar\">{this.avatar}</div>}\n        <div class=\"content\">\n          <slot name=\"title\">{this.cardTitle && wrappedTitleContent}</slot>\n          <slot name=\"subheader\">{this.subheader && subheaderContent}</slot>\n          <slot></slot>\n        </div>\n        {this.action && <div class=\"action\">{this.action}</div>}\n        <slot name=\"action\"></slot>\n      </Host>\n    );\n  }\n}\n",":host {\n  display: block;\n  background-size: cover;\n  background-repeat: no-repeat;\n  background-position: center;\n  height: var(--udp-card-media-height, 140px);\n} ","import { Component, Host, h, Prop } from '@stencil/core';\n\n@Component({\n  tag: 'udp-card-media',\n  styleUrl: 'udp-card-media.css',\n  shadow: true,\n})\nexport class UdpCardMedia {\n  /**\n   * The image to display.\n   */\n  @Prop() image: string;\n\n  /**\n   * The title of the image, used for accessibility.\n   */\n  @Prop() title: string;\n\n  render() {\n    return (\n      <Host role=\"img\" style={{ backgroundImage: this.image ? `url(${this.image})` : undefined }} aria-label={this.title}>\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/cjs/udp-charts-example.cjs.entry.js

@@ -0,0 +1,17 @@
+'use strict';
+
+var index = require('./index-Bu1pSYrV.js');
+
+const UdpChartsExample = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+    }
+    render() {
+        return (index.h(index.Host, { key: 'c1a4e7e66f96b4c6315e0cb339ec524a10672dad', style: { display: 'flex', flexWrap: 'wrap' } }, index.h("udp-donut-chart", { key: '19121ccc35efe6c2a4b0c13645422e8d1ea86ff8', size: "small", kpisPosition: 'top' }), index.h("udp-distribution-chart", { key: 'c02b436e39244188dbe4a5009f78f0552c7ef8b2' }), index.h("udp-bar-chart", { key: '568b7338c71e0fe1a48667648b5bb8e1874207d2' }), index.h("udp-line-chart", { key: '0af9eae3f59079c20133371d49052348f0efdc05', size: "large" })));
+    }
+};
+
+exports.udp_charts_example = UdpChartsExample;
+//# sourceMappingURL=udp-charts-example.entry.cjs.js.map
+
+//# sourceMappingURL=udp-charts-example.cjs.entry.js.map

package/dist/cjs/udp-charts-example.cjs.entry.js.map

@@ -0,0 +1 @@
+{"file":"udp-charts-example.entry.cjs.js","mappings":";;;;MAQa,gBAAgB,GAAA,MAAA;;;;IAC3B,MAAM,GAAA;AACJ,QAAA,QACEA,OAAA,CAACC,UAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAC,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,EAAE,EAAA,EAChDD,OAAA,CAAA,iBAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAiB,IAAI,EAAC,OAAO,EAAC,YAAY,EAAC,KAAK,EAAE,CAAA,EAClDA,OAA0B,CAAA,wBAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,EAC1BA,OAAiB,CAAA,eAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,EACjBA,OAAA,CAAA,gBAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAgB,IAAI,EAAC,OAAO,EAAG,CAAA,CAC1B;;;;;;","names":["h","Host"],"sources":["src/components/my-component/UI/charts/udp-charts-example.tsx"],"sourcesContent":["import { h, Component, Host } from '@stencil/core';\n\n/**\n * component used to render examples of all the charts. Mostly used for dev purposes\n */\n@Component({\n  tag: 'udp-charts-example',\n})\nexport class UdpChartsExample {\n  render() {\n    return (\n      <Host style={{ display: 'flex', flexWrap: 'wrap' }}>\n        <udp-donut-chart size=\"small\" kpisPosition='top'/>\n        <udp-distribution-chart />\n        <udp-bar-chart />\n        <udp-line-chart size=\"large\" />\n      </Host>\n    );\n}\n}"],"version":3}

package/dist/cjs/udp-charts-example.entry.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"udp-charts-example.entry.cjs.js","sources":["src/components/my-component/UI/charts/udp-charts-example.tsx"],"sourcesContent":["import { h, Component, Host } from '@stencil/core';\n\n/**\n * component used to render examples of all the charts. Mostly used for dev purposes\n */\n@Component({\n  tag: 'udp-charts-example',\n})\nexport class UdpChartsExample {\n  render() {\n    return (\n      <Host style={{ display: 'flex', flexWrap: 'wrap' }}>\n        <udp-donut-chart size=\"small\" kpisPosition='top'/>\n        <udp-distribution-chart />\n        <udp-bar-chart />\n        <udp-line-chart size=\"large\" />\n      </Host>\n    );\n}\n}"],"names":["h","Host"],"mappings":";;;;MAQa,gBAAgB,GAAA,MAAA;;;;IAC3B,MAAM,GAAA;AACJ,QAAA,QACEA,OAAA,CAACC,UAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAC,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,EAAE,EAAA,EAChDD,OAAA,CAAA,iBAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAiB,IAAI,EAAC,OAAO,EAAC,YAAY,EAAC,KAAK,EAAE,CAAA,EAClDA,OAA0B,CAAA,wBAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,EAC1BA,OAAiB,CAAA,eAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,EACjBA,OAAA,CAAA,gBAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAgB,IAAI,EAAC,OAAO,EAAG,CAAA,CAC1B;;;;;;"}

package/dist/cjs/udp-container-query-grid-item.cjs.entry.js

@@ -0,0 +1,31 @@
+'use strict';
+
+var index = require('./index-Bu1pSYrV.js');
+
+const udpContainerQueryGridItemCss = ":host{display:block;width:100%}";
+
+const UdpContainerQueryGridItem = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.span = {};
+    }
+    getSpanStyles() {
+        return Object.entries(this.span)
+            .map(([breakpoint, cols]) => `
+  @container (min-width: ${breakpoint}px) {
+    :host {
+      --udp-grid-item-span: ${cols};
+    }
+  }`)
+            .join('\n');
+    }
+    render() {
+        return (index.h(index.Host, { key: '882e3f42e5df93fe24aee4b95858d2ada4da8e03' }, index.h("style", { key: 'f89a1470b3c19ece473caaa834ca8404b1c1e4a5' }, this.getSpanStyles()), index.h("slot", { key: '256a750a072346ae00035bba4fe2abd2a2969de2' })));
+    }
+};
+UdpContainerQueryGridItem.style = udpContainerQueryGridItemCss;
+
+exports.udp_container_query_grid_item = UdpContainerQueryGridItem;
+//# sourceMappingURL=udp-container-query-grid-item.entry.cjs.js.map
+
+//# sourceMappingURL=udp-container-query-grid-item.cjs.entry.js.map

package/dist/cjs/udp-container-query-grid-item.cjs.entry.js.map

@@ -0,0 +1 @@
+{"file":"udp-container-query-grid-item.entry.cjs.js","mappings":";;;;AAAA,MAAM,4BAA4B,GAAG,iCAAiC;;MCQzD,yBAAyB,GAAA,MAAA;AALtC,IAAA,WAAA,CAAA,OAAA,EAAA;;AAMU,QAAA,IAAI,CAAA,IAAA,GAAsC,EAAE;AAuBrD;IArBS,aAAa,GAAA;AACnB,QAAA,OAAO,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI;aAC5B,GAAG,CACF,CAAC,CAAC,UAAU,EAAE,IAAI,CAAC,KAAK;2BACL,UAAU,CAAA;;8BAEP,IAAI,CAAA;;IAE9B;aAEG,IAAI,CAAC,IAAI,CAAC;;IAGf,MAAM,GAAA;AACJ,QAAA,QACEA,QAACC,UAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACHD,OAAA,CAAA,OAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EAAQ,IAAI,CAAC,aAAa,EAAE,CAAS,EACrCA,OAAa,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACR;;;;;;;","names":["h","Host"],"sources":["src/components/my-component/UI/layout/udp-container-query-grid-item/udp-container-query-grid-item.css?tag=udp-container-query-grid-item&encapsulation=shadow","src/components/my-component/UI/layout/udp-container-query-grid-item/udp-container-query-grid-item.tsx"],"sourcesContent":["/* udp-container-query-grid-item.css */\n:host {\n  display: block;\n  width: 100%;\n}","// udp-container-query-grid-item.tsx\nimport { Component, Host, h, Prop } from '@stencil/core';\n\n@Component({\n  tag: 'udp-container-query-grid-item',\n  styleUrl: 'udp-container-query-grid-item.css',\n  shadow: true,\n})\nexport class UdpContainerQueryGridItem {\n  @Prop() span?: { [breakpoint: number]: number } = {};\n\n  private getSpanStyles(): string {\n    return Object.entries(this.span)\n      .map(\n        ([breakpoint, cols]) => `\n  @container (min-width: ${breakpoint}px) {\n    :host {\n      --udp-grid-item-span: ${cols};\n    }\n  }`,\n      )\n      .join('\\n');\n  }\n\n  render() {\n    return (\n      <Host>\n        <style>{this.getSpanStyles()}</style>\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/cjs/udp-container-query-grid-item.entry.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"udp-container-query-grid-item.entry.cjs.js","sources":["src/components/my-component/UI/layout/udp-container-query-grid-item/udp-container-query-grid-item.css?tag=udp-container-query-grid-item&encapsulation=shadow","src/components/my-component/UI/layout/udp-container-query-grid-item/udp-container-query-grid-item.tsx"],"sourcesContent":["/* udp-container-query-grid-item.css */\n:host {\n  display: block;\n  width: 100%;\n}","// udp-container-query-grid-item.tsx\nimport { Component, Host, h, Prop } from '@stencil/core';\n\n@Component({\n  tag: 'udp-container-query-grid-item',\n  styleUrl: 'udp-container-query-grid-item.css',\n  shadow: true,\n})\nexport class UdpContainerQueryGridItem {\n  @Prop() span?: { [breakpoint: number]: number } = {};\n\n  private getSpanStyles(): string {\n    return Object.entries(this.span)\n      .map(\n        ([breakpoint, cols]) => `\n  @container (min-width: ${breakpoint}px) {\n    :host {\n      --udp-grid-item-span: ${cols};\n    }\n  }`,\n      )\n      .join('\\n');\n  }\n\n  render() {\n    return (\n      <Host>\n        <style>{this.getSpanStyles()}</style>\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n"],"names":["h","Host"],"mappings":";;;;AAAA,MAAM,4BAA4B,GAAG,iCAAiC;;MCQzD,yBAAyB,GAAA,MAAA;AALtC,IAAA,WAAA,CAAA,OAAA,EAAA;;AAMU,QAAA,IAAI,CAAA,IAAA,GAAsC,EAAE;AAuBrD;IArBS,aAAa,GAAA;AACnB,QAAA,OAAO,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI;aAC5B,GAAG,CACF,CAAC,CAAC,UAAU,EAAE,IAAI,CAAC,KAAK;2BACL,UAAU,CAAA;;8BAEP,IAAI,CAAA;;IAE9B;aAEG,IAAI,CAAC,IAAI,CAAC;;IAGf,MAAM,GAAA;AACJ,QAAA,QACEA,QAACC,UAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACHD,OAAA,CAAA,OAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EAAQ,IAAI,CAAC,aAAa,EAAE,CAAS,EACrCA,OAAa,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACR;;;;;;;"}

package/dist/cjs/udp-container-query-grid.cjs.entry.js

@@ -0,0 +1,52 @@
+'use strict';
+
+var index = require('./index-Bu1pSYrV.js');
+
+const udpContainerQueryGridCss = ":host{display:block;width:100%}.grid-container{width:100%}";
+
+const UdpContainerQueryGrid = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        // Breakpoints for different container sizes
+        this.columns = {
+            0: 1, // Default: single column
+            400: 2, // Small: 2 columns
+            600: 3, // Medium: 3 columns
+            800: 4, // Large: 4 columns
+        };
+        this.gaps = {
+            0: 1, // Default: 1rem gap
+            400: 1.5, // Small: 1.5rem gap
+            600: 2, // Medium: 2rem gap
+            800: 2.5, // Large: 2.5rem gap
+        };
+    }
+    render() {
+        // Convert our columns and gaps into container query styles
+        const queries = {};
+        const breakpoints = new Set([...Object.keys(this.columns), ...Object.keys(this.gaps)].map(Number));
+        Array.from(breakpoints)
+            .sort((a, b) => b - a)
+            .forEach(breakpoint => {
+            queries[breakpoint] = Object.assign(Object.assign({}, (this.columns[breakpoint] && {
+                'grid-template-columns': `repeat(${this.columns[breakpoint]}, 1fr)`,
+            })), (this.gaps[breakpoint] && {
+                gap: `${this.gaps[breakpoint]}rem`,
+            }));
+        });
+        return (index.h(index.Host, { key: '0b4ab371b0ff6f6ba53e5985c9c0ba5dbc395727' }, index.h("udp-container-query", { key: 'e58f5495c973e3773d404e8233b6d1b53ee1125c', queries: queries }, index.h("div", { key: 'a7e2feaf7d5783320596592ede9102213378d652', class: "grid-container" }, index.h("slot", { key: '77b79dcaa9b699314859d9dc548b0d61cf3a11f9' }))), index.h("style", { key: '0163fc6e0c36f5e7fef363ccd890ff5a4a648ee8' }, `
+          .grid-container {
+            display: grid;
+            grid-template-columns: repeat(${this.columns[0]}, 1fr);
+            gap: ${this.gaps[0]}rem;
+            width: 100%;
+          }
+        `)));
+    }
+};
+UdpContainerQueryGrid.style = udpContainerQueryGridCss;
+
+exports.udp_container_query_grid = UdpContainerQueryGrid;
+//# sourceMappingURL=udp-container-query-grid.entry.cjs.js.map
+
+//# sourceMappingURL=udp-container-query-grid.cjs.entry.js.map

package/dist/cjs/udp-container-query-grid.cjs.entry.js.map

@@ -0,0 +1 @@
+{"file":"udp-container-query-grid.entry.cjs.js","mappings":";;;;AAAA,MAAM,wBAAwB,GAAG,4DAA4D;;MCQhF,qBAAqB,GAAA,MAAA;AALlC,IAAA,WAAA,CAAA,OAAA,EAAA;;;QAOU,IAAA,CAAA,OAAO,GAAsC;YACnD,CAAC,EAAE,CAAC;YACJ,GAAG,EAAE,CAAC;YACN,GAAG,EAAE,CAAC;YACN,GAAG,EAAE,CAAC;SACP;QAEO,IAAA,CAAA,IAAI,GAAsC;YAChD,CAAC,EAAE,CAAC;YACJ,GAAG,EAAE,GAAG;YACR,GAAG,EAAE,CAAC;YACN,GAAG,EAAE,GAAG;SACT;AAsCF;IApCC,MAAM,GAAA;;QAEJ,MAAM,OAAO,GAAG,EAAE;AAClB,QAAA,MAAM,WAAW,GAAG,IAAI,GAAG,CAAC,CAAC,GAAG,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,EAAE,GAAG,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,GAAG,CAAC,MAAM,CAAC,CAAC;AAElG,QAAA,KAAK,CAAC,IAAI,CAAC,WAAW;aACnB,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,GAAG,CAAC;aACpB,OAAO,CAAC,UAAU,IAAG;YACpB,OAAO,CAAC,UAAU,CAAC,GACd,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,EAAA,GAAC,IAAI,CAAC,OAAO,CAAC,UAAU,CAAC,IAAI;gBAC9B,uBAAuB,EAAE,UAAU,IAAI,CAAC,OAAO,CAAC,UAAU,CAAC,CAAQ,MAAA,CAAA;aACpE,EAAC,GACE,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,IAAI;gBAC3B,GAAG,EAAE,GAAG,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,CAAK,GAAA,CAAA;AACnC,aAAA,EACF;AACH,SAAC,CAAC;AAEJ,QAAA,QACEA,QAACC,UAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACHD,OAAqB,CAAA,qBAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,OAAO,EAAE,OAAO,EAAA,EACnCA,OAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,gBAAgB,EAAA,EACzBA,OAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAa,CACT,CACc,EACtBA,OAAQ,CAAA,OAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EAAA;;;AAG4B,0CAAA,EAAA,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,CAAA;AACxC,iBAAA,EAAA,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,CAAA;;;SAGtB,CAAS,CACL;;;;;;;","names":["h","Host"],"sources":["src/components/my-component/UI/layout/udp-container-query-grid/udp-container-query-grid.css?tag=udp-container-query-grid&encapsulation=shadow","src/components/my-component/UI/layout/udp-container-query-grid/udp-container-query-grid.tsx"],"sourcesContent":["/* udp-container-query-grid.css */\n:host {\n  display: block;\n  width: 100%;\n}\n\n.grid-container {\n  width: 100%;\n}","// udp-container-query-grid.tsx\nimport { Component, Host, h, Prop } from '@stencil/core';\n\n@Component({\n  tag: 'udp-container-query-grid',\n  styleUrl: 'udp-container-query-grid.css',\n  shadow: true,\n})\nexport class UdpContainerQueryGrid {\n  // Breakpoints for different container sizes\n  @Prop() columns?: { [breakpoint: number]: number } = {\n    0: 1, // Default: single column\n    400: 2, // Small: 2 columns\n    600: 3, // Medium: 3 columns\n    800: 4, // Large: 4 columns\n  };\n\n  @Prop() gaps?: { [breakpoint: number]: number } = {\n    0: 1, // Default: 1rem gap\n    400: 1.5, // Small: 1.5rem gap\n    600: 2, // Medium: 2rem gap\n    800: 2.5, // Large: 2.5rem gap\n  };\n\n  render() {\n    // Convert our columns and gaps into container query styles\n    const queries = {};\n    const breakpoints = new Set([...Object.keys(this.columns), ...Object.keys(this.gaps)].map(Number));\n\n    Array.from(breakpoints)\n      .sort((a, b) => b - a)\n      .forEach(breakpoint => {\n        queries[breakpoint] = {\n          ...(this.columns[breakpoint] && {\n            'grid-template-columns': `repeat(${this.columns[breakpoint]}, 1fr)`,\n          }),\n          ...(this.gaps[breakpoint] && {\n            gap: `${this.gaps[breakpoint]}rem`,\n          }),\n        };\n      });\n\n    return (\n      <Host>\n        <udp-container-query queries={queries}>\n          <div class=\"grid-container\">\n            <slot></slot>\n          </div>\n        </udp-container-query>\n        <style>{`\n          .grid-container {\n            display: grid;\n            grid-template-columns: repeat(${this.columns[0]}, 1fr);\n            gap: ${this.gaps[0]}rem;\n            width: 100%;\n          }\n        `}</style>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/cjs/udp-container-query-grid.entry.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"udp-container-query-grid.entry.cjs.js","sources":["src/components/my-component/UI/layout/udp-container-query-grid/udp-container-query-grid.css?tag=udp-container-query-grid&encapsulation=shadow","src/components/my-component/UI/layout/udp-container-query-grid/udp-container-query-grid.tsx"],"sourcesContent":["/* udp-container-query-grid.css */\n:host {\n  display: block;\n  width: 100%;\n}\n\n.grid-container {\n  width: 100%;\n}","// udp-container-query-grid.tsx\nimport { Component, Host, h, Prop } from '@stencil/core';\n\n@Component({\n  tag: 'udp-container-query-grid',\n  styleUrl: 'udp-container-query-grid.css',\n  shadow: true,\n})\nexport class UdpContainerQueryGrid {\n  // Breakpoints for different container sizes\n  @Prop() columns?: { [breakpoint: number]: number } = {\n    0: 1, // Default: single column\n    400: 2, // Small: 2 columns\n    600: 3, // Medium: 3 columns\n    800: 4, // Large: 4 columns\n  };\n\n  @Prop() gaps?: { [breakpoint: number]: number } = {\n    0: 1, // Default: 1rem gap\n    400: 1.5, // Small: 1.5rem gap\n    600: 2, // Medium: 2rem gap\n    800: 2.5, // Large: 2.5rem gap\n  };\n\n  render() {\n    // Convert our columns and gaps into container query styles\n    const queries = {};\n    const breakpoints = new Set([...Object.keys(this.columns), ...Object.keys(this.gaps)].map(Number));\n\n    Array.from(breakpoints)\n      .sort((a, b) => b - a)\n      .forEach(breakpoint => {\n        queries[breakpoint] = {\n          ...(this.columns[breakpoint] && {\n            'grid-template-columns': `repeat(${this.columns[breakpoint]}, 1fr)`,\n          }),\n          ...(this.gaps[breakpoint] && {\n            gap: `${this.gaps[breakpoint]}rem`,\n          }),\n        };\n      });\n\n    return (\n      <Host>\n        <udp-container-query queries={queries}>\n          <div class=\"grid-container\">\n            <slot></slot>\n          </div>\n        </udp-container-query>\n        <style>{`\n          .grid-container {\n            display: grid;\n            grid-template-columns: repeat(${this.columns[0]}, 1fr);\n            gap: ${this.gaps[0]}rem;\n            width: 100%;\n          }\n        `}</style>\n      </Host>\n    );\n  }\n}\n"],"names":["h","Host"],"mappings":";;;;AAAA,MAAM,wBAAwB,GAAG,4DAA4D;;MCQhF,qBAAqB,GAAA,MAAA;AALlC,IAAA,WAAA,CAAA,OAAA,EAAA;;;QAOU,IAAA,CAAA,OAAO,GAAsC;YACnD,CAAC,EAAE,CAAC;YACJ,GAAG,EAAE,CAAC;YACN,GAAG,EAAE,CAAC;YACN,GAAG,EAAE,CAAC;SACP;QAEO,IAAA,CAAA,IAAI,GAAsC;YAChD,CAAC,EAAE,CAAC;YACJ,GAAG,EAAE,GAAG;YACR,GAAG,EAAE,CAAC;YACN,GAAG,EAAE,GAAG;SACT;AAsCF;IApCC,MAAM,GAAA;;QAEJ,MAAM,OAAO,GAAG,EAAE;AAClB,QAAA,MAAM,WAAW,GAAG,IAAI,GAAG,CAAC,CAAC,GAAG,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,EAAE,GAAG,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,GAAG,CAAC,MAAM,CAAC,CAAC;AAElG,QAAA,KAAK,CAAC,IAAI,CAAC,WAAW;aACnB,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,GAAG,CAAC;aACpB,OAAO,CAAC,UAAU,IAAG;YACpB,OAAO,CAAC,UAAU,CAAC,GACd,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,EAAA,GAAC,IAAI,CAAC,OAAO,CAAC,UAAU,CAAC,IAAI;gBAC9B,uBAAuB,EAAE,UAAU,IAAI,CAAC,OAAO,CAAC,UAAU,CAAC,CAAQ,MAAA,CAAA;aACpE,EAAC,GACE,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,IAAI;gBAC3B,GAAG,EAAE,GAAG,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,CAAK,GAAA,CAAA;AACnC,aAAA,EACF;AACH,SAAC,CAAC;AAEJ,QAAA,QACEA,QAACC,UAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACHD,OAAqB,CAAA,qBAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,OAAO,EAAE,OAAO,EAAA,EACnCA,OAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,gBAAgB,EAAA,EACzBA,OAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAa,CACT,CACc,EACtBA,OAAQ,CAAA,OAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EAAA;;;AAG4B,0CAAA,EAAA,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,CAAA;AACxC,iBAAA,EAAA,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,CAAA;;;SAGtB,CAAS,CACL;;;;;;;"}

package/dist/cjs/udp-container-query.cjs.entry.js

@@ -0,0 +1,40 @@
+'use strict';
+
+var index = require('./index-Bu1pSYrV.js');
+
+const udpContainerQueryCss = ":host{display:block;container-type:inline-size;width:100%}:host(.container-query) ::slotted(*){transition:all 0.3s ease}";
+
+const UdpContainerQuery = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.queries = {};
+    }
+    getContainerQueryStyle() {
+        // Create dynamic container query styles
+        const styleRules = Object.entries(this.queries)
+            .map(([breakpoint, styles]) => {
+            const cssProperties = Object.entries(styles)
+                .map(([property, value]) => `${property}: ${value};`)
+                .join('\n      ');
+            return `
+  @container (min-width: ${breakpoint}px) {
+    ::slotted(*) {
+      ${cssProperties}
+    }
+  }`;
+        })
+            .join('\n');
+        return styleRules;
+    }
+    render() {
+        return (index.h(index.Host, { key: '8bd58e5591969e674b6743e6c17f3d9910c173f8', class: {
+                [this.customClass]: !!this.customClass,
+            } }, index.h("style", { key: 'ca312da41707be3f832ef8aecd9cd2dab2d635a5' }, this.getContainerQueryStyle()), index.h("slot", { key: '7b6db33f2c19bd6ce9d50b986bece8fb1d01681d' })));
+    }
+};
+UdpContainerQuery.style = udpContainerQueryCss;
+
+exports.udp_container_query = UdpContainerQuery;
+//# sourceMappingURL=udp-container-query.entry.cjs.js.map
+
+//# sourceMappingURL=udp-container-query.cjs.entry.js.map

package/dist/cjs/udp-container-query.cjs.entry.js.map

@@ -0,0 +1 @@
+{"file":"udp-container-query.entry.cjs.js","mappings":";;;;AAAA,MAAM,oBAAoB,GAAG,0HAA0H;;MCO1I,iBAAiB,GAAA,MAAA;AAL9B,IAAA,WAAA,CAAA,OAAA,EAAA;;AAMU,QAAA,IAAO,CAAA,OAAA,GAAwD,EAAE;AAmC1E;IAhCS,sBAAsB,GAAA;;QAE5B,MAAM,UAAU,GAAG,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,OAAO;aAC3C,GAAG,CAAC,CAAC,CAAC,UAAU,EAAE,MAAM,CAAC,KAAI;AAC5B,YAAA,MAAM,aAAa,GAAG,MAAM,CAAC,OAAO,CAAC,MAAM;AACxC,iBAAA,GAAG,CAAC,CAAC,CAAC,QAAQ,EAAE,KAAK,CAAC,KAAK,CAAG,EAAA,QAAQ,CAAK,EAAA,EAAA,KAAK,GAAG;iBACnD,IAAI,CAAC,UAAU,CAAC;YAEnB,OAAO;2BACY,UAAU,CAAA;;QAE7B,aAAa;;IAEjB;AACE,SAAC;aACA,IAAI,CAAC,IAAI,CAAC;AAEb,QAAA,OAAO,UAAU;;IAGnB,MAAM,GAAA;QACJ,QACEA,OAAA,CAACC,UAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EACH,KAAK,EAAE;gBACL,CAAC,IAAI,CAAC,WAAW,GAAG,CAAC,CAAC,IAAI,CAAC,WAAW;AACvC,aAAA,EAAA,EAEDD,OAAA,CAAA,OAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EAAQ,IAAI,CAAC,sBAAsB,EAAE,CAAS,EAC9CA,OAAa,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACR;;;;;;;","names":["h","Host"],"sources":["src/components/my-component/UI/layout/udp-container-query/udp-container-query.css?tag=udp-container-query&encapsulation=shadow","src/components/my-component/UI/layout/udp-container-query/udp-container-query.tsx"],"sourcesContent":[":host {\n  display: block;\n  container-type: inline-size;\n  width: 100%;\n}\n\n:host(.container-query) ::slotted(*) {\n  transition: all 0.3s ease;\n}\n\n/* :host(.container-query) ::slotted(*) {} */","import { Component, Host, h, Prop } from '@stencil/core';\n\n@Component({\n  tag: 'udp-container-query',\n  styleUrl: 'udp-container-query.css',\n  shadow: true,\n})\nexport class UdpContainerQuery {\n  @Prop() queries: { [breakpoint: number]: { [key: string]: string } } = {};\n  @Prop() customClass?: string;\n\n  private getContainerQueryStyle(): string {\n    // Create dynamic container query styles\n    const styleRules = Object.entries(this.queries)\n      .map(([breakpoint, styles]) => {\n        const cssProperties = Object.entries(styles)\n          .map(([property, value]) => `${property}: ${value};`)\n          .join('\\n      ');\n\n        return `\n  @container (min-width: ${breakpoint}px) {\n    ::slotted(*) {\n      ${cssProperties}\n    }\n  }`;\n      })\n      .join('\\n');\n\n    return styleRules;\n  }\n\n  render() {\n    return (\n      <Host\n        class={{\n          [this.customClass]: !!this.customClass,\n        }}\n      >\n        <style>{this.getContainerQueryStyle()}</style>\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/cjs/udp-container-query.entry.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"udp-container-query.entry.cjs.js","sources":["src/components/my-component/UI/layout/udp-container-query/udp-container-query.css?tag=udp-container-query&encapsulation=shadow","src/components/my-component/UI/layout/udp-container-query/udp-container-query.tsx"],"sourcesContent":[":host {\n  display: block;\n  container-type: inline-size;\n  width: 100%;\n}\n\n:host(.container-query) ::slotted(*) {\n  transition: all 0.3s ease;\n}\n\n/* :host(.container-query) ::slotted(*) {} */","import { Component, Host, h, Prop } from '@stencil/core';\n\n@Component({\n  tag: 'udp-container-query',\n  styleUrl: 'udp-container-query.css',\n  shadow: true,\n})\nexport class UdpContainerQuery {\n  @Prop() queries: { [breakpoint: number]: { [key: string]: string } } = {};\n  @Prop() customClass?: string;\n\n  private getContainerQueryStyle(): string {\n    // Create dynamic container query styles\n    const styleRules = Object.entries(this.queries)\n      .map(([breakpoint, styles]) => {\n        const cssProperties = Object.entries(styles)\n          .map(([property, value]) => `${property}: ${value};`)\n          .join('\\n      ');\n\n        return `\n  @container (min-width: ${breakpoint}px) {\n    ::slotted(*) {\n      ${cssProperties}\n    }\n  }`;\n      })\n      .join('\\n');\n\n    return styleRules;\n  }\n\n  render() {\n    return (\n      <Host\n        class={{\n          [this.customClass]: !!this.customClass,\n        }}\n      >\n        <style>{this.getContainerQueryStyle()}</style>\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n"],"names":["h","Host"],"mappings":";;;;AAAA,MAAM,oBAAoB,GAAG,0HAA0H;;MCO1I,iBAAiB,GAAA,MAAA;AAL9B,IAAA,WAAA,CAAA,OAAA,EAAA;;AAMU,QAAA,IAAO,CAAA,OAAA,GAAwD,EAAE;AAmC1E;IAhCS,sBAAsB,GAAA;;QAE5B,MAAM,UAAU,GAAG,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,OAAO;aAC3C,GAAG,CAAC,CAAC,CAAC,UAAU,EAAE,MAAM,CAAC,KAAI;AAC5B,YAAA,MAAM,aAAa,GAAG,MAAM,CAAC,OAAO,CAAC,MAAM;AACxC,iBAAA,GAAG,CAAC,CAAC,CAAC,QAAQ,EAAE,KAAK,CAAC,KAAK,CAAG,EAAA,QAAQ,CAAK,EAAA,EAAA,KAAK,GAAG;iBACnD,IAAI,CAAC,UAAU,CAAC;YAEnB,OAAO;2BACY,UAAU,CAAA;;QAE7B,aAAa;;IAEjB;AACE,SAAC;aACA,IAAI,CAAC,IAAI,CAAC;AAEb,QAAA,OAAO,UAAU;;IAGnB,MAAM,GAAA;QACJ,QACEA,OAAA,CAACC,UAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EACH,KAAK,EAAE;gBACL,CAAC,IAAI,CAAC,WAAW,GAAG,CAAC,CAAC,IAAI,CAAC,WAAW;AACvC,aAAA,EAAA,EAEDD,OAAA,CAAA,OAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EAAQ,IAAI,CAAC,sBAAsB,EAAE,CAAS,EAC9CA,OAAa,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACR;;;;;;;"}

package/dist/cjs/udp-container.cjs.entry.js

@@ -0,0 +1,37 @@
+'use strict';
+
+var index = require('./index-Bu1pSYrV.js');
+
+const udpContainerCss = ":host{display:block;width:100%}.udp-container{width:100%;margin-left:auto;margin-right:auto;box-sizing:border-box}.udp-container--padded{padding-left:1rem;padding-right:1rem}.udp-container--fluid{max-width:100%}.udp-container--sm{max-width:640px}.udp-container--md{max-width:768px}.udp-container--lg{max-width:1024px}.udp-container--xl{max-width:1280px}.udp-container--2xl{max-width:1536px}";
+
+const UdpContainer = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        /**
+         * If true, the container will be fluid (100% width at all breakpoints)
+         */
+        this.fluid = false;
+        /**
+         * Maximum width for the container at different breakpoints
+         */
+        this.maxWidth = 'lg';
+        /**
+         * Add padding to the container
+         */
+        this.padding = true;
+    }
+    render() {
+        return (index.h("div", { key: '27c0a62f929155db4949c88f9f2aed505d3635ed', class: {
+                'udp-container': true,
+                'udp-container--fluid': this.fluid,
+                'udp-container--padded': this.padding,
+                [`udp-container--${this.maxWidth}`]: true,
+            } }, index.h("slot", { key: '29cfacd27f6a25b17dfc9796f7949544c9bcb969' })));
+    }
+};
+UdpContainer.style = udpContainerCss;
+
+exports.udp_container = UdpContainer;
+//# sourceMappingURL=udp-container.entry.cjs.js.map
+
+//# sourceMappingURL=udp-container.cjs.entry.js.map

package/dist/cjs/udp-container.cjs.entry.js.map

@@ -0,0 +1 @@
+{"file":"udp-container.entry.cjs.js","mappings":";;;;AAAA,MAAM,eAAe,GAAG,wYAAwY;;MCOnZ,YAAY,GAAA,MAAA;AALzB,IAAA,WAAA,CAAA,OAAA,EAAA;;AAME;;AAEG;AACK,QAAA,IAAK,CAAA,KAAA,GAAY,KAAK;AAE9B;;AAEG;AACK,QAAA,IAAQ,CAAA,QAAA,GAAsC,IAAI;AAE1D;;AAEG;AACK,QAAA,IAAO,CAAA,OAAA,GAAY,IAAI;AAgBhC;IAdC,MAAM,GAAA;QACJ,QACEA,OACE,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE;AACL,gBAAA,eAAe,EAAE,IAAI;gBACrB,sBAAsB,EAAE,IAAI,CAAC,KAAK;gBAClC,uBAAuB,EAAE,IAAI,CAAC,OAAO;AACrC,gBAAA,CAAC,kBAAkB,IAAI,CAAC,QAAQ,CAAE,CAAA,GAAG,IAAI;AAC1C,aAAA,EAAA,EAEDA,OAAa,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACT;;;;;;;","names":["h"],"sources":["src/components/my-component/UI/layout/udp-container/udp-container.css?tag=udp-container&encapsulation=shadow","src/components/my-component/UI/layout/udp-container/udp-container.tsx"],"sourcesContent":[":host {\n  display: block;\n  width: 100%;\n}\n\n.udp-container {\n  width: 100%;\n  margin-left: auto;\n  margin-right: auto;\n  box-sizing: border-box;\n}\n\n.udp-container--padded {\n  padding-left: 1rem;\n  padding-right: 1rem;\n}\n\n/* Fluid container takes full width */\n.udp-container--fluid {\n  max-width: 100%;\n}\n\n/* Responsive container max-widths */\n.udp-container--sm {\n  max-width: 640px;\n}\n\n.udp-container--md {\n  max-width: 768px;\n}\n\n.udp-container--lg {\n  max-width: 1024px;\n}\n\n.udp-container--xl {\n  max-width: 1280px;\n}\n\n.udp-container--2xl {\n  max-width: 1536px;\n} ","import { Component, Prop, h } from '@stencil/core';\n\n@Component({\n  tag: 'udp-container',\n  styleUrl: 'udp-container.css',\n  shadow: true,\n})\nexport class UdpContainer {\n  /**\n   * If true, the container will be fluid (100% width at all breakpoints)\n   */\n  @Prop() fluid: boolean = false;\n\n  /**\n   * Maximum width for the container at different breakpoints\n   */\n  @Prop() maxWidth: 'sm' | 'md' | 'lg' | 'xl' | '2xl' = 'lg';\n\n  /**\n   * Add padding to the container\n   */\n  @Prop() padding: boolean = true;\n\n  render() {\n    return (\n      <div\n        class={{\n          'udp-container': true,\n          'udp-container--fluid': this.fluid,\n          'udp-container--padded': this.padding,\n          [`udp-container--${this.maxWidth}`]: true,\n        }}\n      >\n        <slot></slot>\n      </div>\n    );\n  }\n}\n"],"version":3}

package/dist/cjs/udp-container.entry.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"udp-container.entry.cjs.js","sources":["src/components/my-component/UI/layout/udp-container/udp-container.css?tag=udp-container&encapsulation=shadow","src/components/my-component/UI/layout/udp-container/udp-container.tsx"],"sourcesContent":[":host {\n  display: block;\n  width: 100%;\n}\n\n.udp-container {\n  width: 100%;\n  margin-left: auto;\n  margin-right: auto;\n  box-sizing: border-box;\n}\n\n.udp-container--padded {\n  padding-left: 1rem;\n  padding-right: 1rem;\n}\n\n/* Fluid container takes full width */\n.udp-container--fluid {\n  max-width: 100%;\n}\n\n/* Responsive container max-widths */\n.udp-container--sm {\n  max-width: 640px;\n}\n\n.udp-container--md {\n  max-width: 768px;\n}\n\n.udp-container--lg {\n  max-width: 1024px;\n}\n\n.udp-container--xl {\n  max-width: 1280px;\n}\n\n.udp-container--2xl {\n  max-width: 1536px;\n} ","import { Component, Prop, h } from '@stencil/core';\n\n@Component({\n  tag: 'udp-container',\n  styleUrl: 'udp-container.css',\n  shadow: true,\n})\nexport class UdpContainer {\n  /**\n   * If true, the container will be fluid (100% width at all breakpoints)\n   */\n  @Prop() fluid: boolean = false;\n\n  /**\n   * Maximum width for the container at different breakpoints\n   */\n  @Prop() maxWidth: 'sm' | 'md' | 'lg' | 'xl' | '2xl' = 'lg';\n\n  /**\n   * Add padding to the container\n   */\n  @Prop() padding: boolean = true;\n\n  render() {\n    return (\n      <div\n        class={{\n          'udp-container': true,\n          'udp-container--fluid': this.fluid,\n          'udp-container--padded': this.padding,\n          [`udp-container--${this.maxWidth}`]: true,\n        }}\n      >\n        <slot></slot>\n      </div>\n    );\n  }\n}\n"],"names":["h"],"mappings":";;;;AAAA,MAAM,eAAe,GAAG,wYAAwY;;MCOnZ,YAAY,GAAA,MAAA;AALzB,IAAA,WAAA,CAAA,OAAA,EAAA;;AAME;;AAEG;AACK,QAAA,IAAK,CAAA,KAAA,GAAY,KAAK;AAE9B;;AAEG;AACK,QAAA,IAAQ,CAAA,QAAA,GAAsC,IAAI;AAE1D;;AAEG;AACK,QAAA,IAAO,CAAA,OAAA,GAAY,IAAI;AAgBhC;IAdC,MAAM,GAAA;QACJ,QACEA,OACE,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE;AACL,gBAAA,eAAe,EAAE,IAAI;gBACrB,sBAAsB,EAAE,IAAI,CAAC,KAAK;gBAClC,uBAAuB,EAAE,IAAI,CAAC,OAAO;AACrC,gBAAA,CAAC,kBAAkB,IAAI,CAAC,QAAQ,CAAE,CAAA,GAAG,IAAI;AAC1C,aAAA,EAAA,EAEDA,OAAa,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACT;;;;;;;"}