@dropi/ui 0.1.52 → 0.1.54

package/dist/dropi-ui/dropi-dropdown.entry.js

@@ -1,6 +1,6 @@
-import { r as registerInstance, d as createEvent, h } from './index-CPacpXAJ.js';
+import { r as registerInstance, d as createEvent, h } from './index-BKkSRXlb.js';
 
-const dropiDropdownCss = () => `:host{display:block;width:100%}*,*::before,*::after{box-sizing:border-box}.dropdown{display:flex;flex-direction:column;overflow-y:auto;max-height:var(--dropdown-height, 300px);border:1px solid var(--Gray-Gray-200, #c3c9d9);border-radius:var(--Border-2, 8px);background:var(--Neutral-White, #ffffff)}.dropdown__item{display:flex;align-items:center;gap:var(--Size-2, 8px);padding:var(--Size-2, 8px) var(--Size-3, 12px);cursor:pointer;transition:background 0.15s;user-select:none}.dropdown__item:hover{background:var(--Gray-Gray-50, #f7f8fa)}.dropdown__item--active{background:var(--Primary-Primary-50, #fff5eb)}.dropdown__avatar{width:28px;height:28px;border-radius:50%;object-fit:cover;flex-shrink:0}.dropdown__label{flex:1;font-size:var(--font-size-s, 12px);color:var(--Gray-Gray-700, #32394d);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}`;
+const dropiDropdownCss = () => `:host{display:block;width:100%}*,*::before,*::after{box-sizing:border-box}button,input,select,textarea{font-family:var(--font-family-01, 'Inter', sans-serif)}.dropdown{display:flex;flex-direction:column;overflow-y:auto;max-height:var(--dropdown-height, 300px);border:1px solid var(--Gray-Gray-200, #c3c9d9);border-radius:var(--Border-2, 8px);background:var(--Neutral-White, #ffffff)}.dropdown__item{display:flex;align-items:center;gap:var(--Size-2, 8px);padding:var(--Size-2, 8px) var(--Size-3, 12px);cursor:pointer;transition:background 0.15s;user-select:none}.dropdown__item:hover{background:var(--Gray-Gray-50, #f7f8fa)}.dropdown__item--active{background:var(--Primary-Primary-50, #fff5eb)}.dropdown__avatar{width:28px;height:28px;border-radius:50%;object-fit:cover;flex-shrink:0}.dropdown__label{flex:1;font-size:var(--font-size-s, 12px);color:var(--Gray-Gray-700, #32394d);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}`;
 
 const DropiDropdown = class {
     constructor(hostRef) {
@@ -46,7 +46,7 @@ const DropiDropdown = class {
     render() {
         const containerClass = this.isInSelect ? 'container-dropi-dropdown-select' : 'container-dropi-dropdown';
         const customHeight = this.height || '388px';
-        return (h("div", { key: '274caba83e2f697257e3803b85517a31d4f0aea8', class: containerClass, style: { '--custom-height': customHeight } }, this.parsedOptions.map((opt, i) => {
+        return (h("div", { key: 'a248d63162b0f4f1ab783fcea22c78eb114a97fa', class: containerClass, style: { '--custom-height': customHeight } }, this.parsedOptions.map((opt, i) => {
             const label = opt[this.valueModel] ?? String(opt);
             const active = !!opt.checked || this.isSelected(opt);
             return (h("div", { class: "content-dropdown", key: i }, h("div", { class: { 'container-check-dropdown': true, 'active-option': active }, onClick: () => this.toggleOption(opt) }, this.parameters.type === 'checkbox' && (h("dropi-checkbox", { name: "_dropdown-option", checked: active })), this.parameters.iconCurrier && (h("dropi-avatars", { image: opt[this.valueModel], type: "transport" })), this.parameters.icon && (h("dropi-avatars", { image: opt.image, type: "transport" })), h("span", { class: "Body-M-Regular" }, label))));

package/dist/dropi-ui/dropi-dropdown.entry.js.map

@@ -1 +1 @@
-{"file":"dropi-dropdown.entry.js","mappings":"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","names":[],"sources":["src/components/dropi-dropdown/dropi-dropdown.css?tag=dropi-dropdown&encapsulation=shadow","src/components/dropi-dropdown/dropi-dropdown.tsx"],"sourcesContent":[":host {\n  display: block;\n  width: 100%;\n}\n\n*, *::before, *::after { box-sizing: border-box; }\n\n.dropdown {\n  display: flex;\n  flex-direction: column;\n  overflow-y: auto;\n  max-height: var(--dropdown-height, 300px);\n  border: 1px solid var(--Gray-Gray-200, #c3c9d9);\n  border-radius: var(--Border-2, 8px);\n  background: var(--Neutral-White, #ffffff);\n}\n\n.dropdown__item {\n  display: flex;\n  align-items: center;\n  gap: var(--Size-2, 8px);\n  padding: var(--Size-2, 8px) var(--Size-3, 12px);\n  cursor: pointer;\n  transition: background 0.15s;\n  user-select: none;\n}\n\n.dropdown__item:hover {\n  background: var(--Gray-Gray-50, #f7f8fa);\n}\n\n.dropdown__item--active {\n  background: var(--Primary-Primary-50, #fff5eb);\n}\n\n.dropdown__avatar {\n  width: 28px;\n  height: 28px;\n  border-radius: 50%;\n  object-fit: cover;\n  flex-shrink: 0;\n}\n\n.dropdown__label {\n  flex: 1;\n  font-size: var(--font-size-s, 12px);\n  color: var(--Gray-Gray-700, #32394d);\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n","import { Component, Prop, State, Event, EventEmitter, Watch, h } from '@stencil/core';\n\nexport interface DropdownOption {\n  [key: string]: any;\n}\n\n/**\n * @component dropi-dropdown\n * Scrollable list with checkboxes for multi-selection.\n * Pass options as an array (JS) or JSON string.\n */\n@Component({\n  tag: 'dropi-dropdown',\n  styleUrl: 'dropi-dropdown.css',\n  shadow: true,\n})\nexport class DropiDropdown {\n  /** Options array or JSON string */\n  @Prop() options: DropdownOption[] | string = [];\n  /** Property name for the label */\n  @Prop() valueModel: string = 'name';\n  /** Height of the dropdown (CSS value) */\n  @Prop() height: string = '';\n  /** Whether the dropdown is inside a select component */\n  @Prop() isInSelect: boolean = false;\n  /** Configuration parameters for the dropdown items */\n  @Prop() parameters: {\n    type: 'checkbox';\n    icon: string;\n    iconCurrier: boolean;\n  } = {\n    type: 'checkbox',\n    icon: '',\n    iconCurrier: false,\n  };\n\n  @State() private selected: DropdownOption[] = [];\n  @State() private parsedOptions: DropdownOption[] = [];\n\n  /** Emitted when selection changes — matches Angular 'modelChange' */\n  @Event() modelChange: EventEmitter<DropdownOption[]>;\n\n  @Watch('options')\n  optionsChanged(val: DropdownOption[] | string) {\n    this.parsedOptions = typeof val === 'string' ? JSON.parse(val) : (val || []);\n  }\n\n  componentWillLoad() {\n    this.optionsChanged(this.options);\n  }\n\n  private isSelected(opt: DropdownOption): boolean {\n    return (this.selected ?? []).some(s => JSON.stringify(s) === JSON.stringify(opt));\n  }\n\n  private toggleOption(opt: DropdownOption) {\n    if (this.isSelected(opt)) {\n      this.selected = this.selected.filter(s => JSON.stringify(s) !== JSON.stringify(opt));\n    } else {\n      this.selected = [...this.selected, opt];\n    }\n    this.modelChange.emit(this.selected);\n  }\n\n  render() {\n    const containerClass = this.isInSelect ? 'container-dropi-dropdown-select' : 'container-dropi-dropdown';\n    const customHeight = this.height || '388px';\n\n    return (\n      <div class={containerClass} style={{ '--custom-height': customHeight } as any}>\n        {this.parsedOptions.map((opt, i) => {\n          const label = opt[this.valueModel] ?? String(opt);\n          const active = !!opt.checked || this.isSelected(opt);\n\n          return (\n            <div class=\"content-dropdown\" key={i}>\n              <div\n                class={{ 'container-check-dropdown': true, 'active-option': active }}\n                onClick={() => this.toggleOption(opt)}\n              >\n                {this.parameters.type === 'checkbox' && (\n                  <dropi-checkbox name=\"_dropdown-option\" checked={active} />\n                )}\n\n                {this.parameters.iconCurrier && (\n                  <dropi-avatars\n                    image={opt[this.valueModel]}\n                    type=\"transport\"\n                  />\n                )}\n\n                {this.parameters.icon && (\n                  <dropi-avatars\n                    image={opt.image}\n                    type=\"transport\"\n                  />\n                )}\n\n                <span class=\"Body-M-Regular\">{label}</span>\n              </div>\n            </div>\n          );\n        })}\n      </div>\n    );\n  }\n}\n"],"version":3}
+{"file":"dropi-dropdown.entry.js","mappings":"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","names":[],"sources":["src/components/dropi-dropdown/dropi-dropdown.css?tag=dropi-dropdown&encapsulation=shadow","src/components/dropi-dropdown/dropi-dropdown.tsx"],"sourcesContent":[":host {\n  display: block;\n  width: 100%;\n}\n\n*, *::before, *::after { box-sizing: border-box; }\nbutton, input, select, textarea { font-family: var(--font-family-01, 'Inter', sans-serif); }\n\n.dropdown {\n  display: flex;\n  flex-direction: column;\n  overflow-y: auto;\n  max-height: var(--dropdown-height, 300px);\n  border: 1px solid var(--Gray-Gray-200, #c3c9d9);\n  border-radius: var(--Border-2, 8px);\n  background: var(--Neutral-White, #ffffff);\n}\n\n.dropdown__item {\n  display: flex;\n  align-items: center;\n  gap: var(--Size-2, 8px);\n  padding: var(--Size-2, 8px) var(--Size-3, 12px);\n  cursor: pointer;\n  transition: background 0.15s;\n  user-select: none;\n}\n\n.dropdown__item:hover {\n  background: var(--Gray-Gray-50, #f7f8fa);\n}\n\n.dropdown__item--active {\n  background: var(--Primary-Primary-50, #fff5eb);\n}\n\n.dropdown__avatar {\n  width: 28px;\n  height: 28px;\n  border-radius: 50%;\n  object-fit: cover;\n  flex-shrink: 0;\n}\n\n.dropdown__label {\n  flex: 1;\n  font-size: var(--font-size-s, 12px);\n  color: var(--Gray-Gray-700, #32394d);\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n","import { Component, Prop, State, Event, EventEmitter, Watch, h } from '@stencil/core';\n\nexport interface DropdownOption {\n  [key: string]: any;\n}\n\n/**\n * @component dropi-dropdown\n * Scrollable list with checkboxes for multi-selection.\n * Pass options as an array (JS) or JSON string.\n */\n@Component({\n  tag: 'dropi-dropdown',\n  styleUrl: 'dropi-dropdown.css',\n  shadow: true,\n})\nexport class DropiDropdown {\n  /** Options array or JSON string */\n  @Prop() options: DropdownOption[] | string = [];\n  /** Property name for the label */\n  @Prop() valueModel: string = 'name';\n  /** Height of the dropdown (CSS value) */\n  @Prop() height: string = '';\n  /** Whether the dropdown is inside a select component */\n  @Prop() isInSelect: boolean = false;\n  /** Configuration parameters for the dropdown items */\n  @Prop() parameters: {\n    type: 'checkbox';\n    icon: string;\n    iconCurrier: boolean;\n  } = {\n    type: 'checkbox',\n    icon: '',\n    iconCurrier: false,\n  };\n\n  @State() private selected: DropdownOption[] = [];\n  @State() private parsedOptions: DropdownOption[] = [];\n\n  /** Emitted when selection changes — matches Angular 'modelChange' */\n  @Event() modelChange: EventEmitter<DropdownOption[]>;\n\n  @Watch('options')\n  optionsChanged(val: DropdownOption[] | string) {\n    this.parsedOptions = typeof val === 'string' ? JSON.parse(val) : (val || []);\n  }\n\n  componentWillLoad() {\n    this.optionsChanged(this.options);\n  }\n\n  private isSelected(opt: DropdownOption): boolean {\n    return (this.selected ?? []).some(s => JSON.stringify(s) === JSON.stringify(opt));\n  }\n\n  private toggleOption(opt: DropdownOption) {\n    if (this.isSelected(opt)) {\n      this.selected = this.selected.filter(s => JSON.stringify(s) !== JSON.stringify(opt));\n    } else {\n      this.selected = [...this.selected, opt];\n    }\n    this.modelChange.emit(this.selected);\n  }\n\n  render() {\n    const containerClass = this.isInSelect ? 'container-dropi-dropdown-select' : 'container-dropi-dropdown';\n    const customHeight = this.height || '388px';\n\n    return (\n      <div class={containerClass} style={{ '--custom-height': customHeight } as any}>\n        {this.parsedOptions.map((opt, i) => {\n          const label = opt[this.valueModel] ?? String(opt);\n          const active = !!opt.checked || this.isSelected(opt);\n\n          return (\n            <div class=\"content-dropdown\" key={i}>\n              <div\n                class={{ 'container-check-dropdown': true, 'active-option': active }}\n                onClick={() => this.toggleOption(opt)}\n              >\n                {this.parameters.type === 'checkbox' && (\n                  <dropi-checkbox name=\"_dropdown-option\" checked={active} />\n                )}\n\n                {this.parameters.iconCurrier && (\n                  <dropi-avatars\n                    image={opt[this.valueModel]}\n                    type=\"transport\"\n                  />\n                )}\n\n                {this.parameters.icon && (\n                  <dropi-avatars\n                    image={opt.image}\n                    type=\"transport\"\n                  />\n                )}\n\n                <span class=\"Body-M-Regular\">{label}</span>\n              </div>\n            </div>\n          );\n        })}\n      </div>\n    );\n  }\n}\n"],"version":3}

package/dist/dropi-ui/dropi-empty-state.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, d as createEvent, a as getElement, h } from './index-CPacpXAJ.js';
+import { r as registerInstance, d as createEvent, a as getElement, h } from './index-BKkSRXlb.js';
 
 // Auto-generated by scripts/generate-illustration-map.js — DO NOT EDIT
 // Source: public/assets/icons/ilustration/ (8 illustrations)
@@ -74,7 +74,7 @@ const ILLUSTRATION_MAP = {
 `
 };
 
-const dropiEmptyStateCss = () => `:host{display:block}*,*::before,*::after{box-sizing:border-box}.empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--Size-3, 12px);padding:var(--Size-6, 32px) var(--Size-5, 20px);text-align:center}.empty-state-img{max-width:200px;width:100%;height:auto;object-fit:contain;filter:brightness(0) saturate(100%) invert(73%) sepia(9%) saturate(503%) hue-rotate(187deg) brightness(91%) contrast(88%)}.empty-state-svg{width:80px;height:80px}.empty-state-placeholder{display:flex;align-items:center;justify-content:center}.empty-state-title{margin:0;font-size:var(--font-size-l, 18px);font-weight:var(--font-weight-bold, 700);color:var(--Gray-Gray-700, #32394d);line-height:1.3}.empty-state-description{margin:0;font-size:var(--font-size-s, 12px);color:var(--Gray-Gray-500, #69738c);line-height:1.6;max-width:400px}.empty-state-actions{display:flex;align-items:center;gap:var(--Size-3, 12px);flex-wrap:wrap;justify-content:center;margin-top:var(--Size-2, 8px)}`;
+const dropiEmptyStateCss = () => `:host{display:block}*,*::before,*::after{box-sizing:border-box}button,input,select,textarea{font-family:var(--font-family-01, 'Inter', sans-serif)}.empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--Size-3, 12px);padding:var(--Size-6, 32px) var(--Size-5, 20px);text-align:center}.empty-state-img{max-width:200px;width:100%;height:auto;object-fit:contain;filter:brightness(0) saturate(100%) invert(73%) sepia(9%) saturate(503%) hue-rotate(187deg) brightness(91%) contrast(88%)}.empty-state-svg{width:80px;height:80px}.empty-state-placeholder{display:flex;align-items:center;justify-content:center}.empty-state-title{margin:0;font-size:var(--font-size-l, 18px);font-weight:var(--font-weight-bold, 700);color:var(--Gray-Gray-700, #32394d);line-height:1.3}.empty-state-description{margin:0;font-size:var(--font-size-s, 12px);color:var(--Gray-Gray-500, #69738c);line-height:1.6;max-width:400px}.empty-state-actions{display:flex;align-items:center;gap:var(--Size-3, 12px);flex-wrap:wrap;justify-content:center;margin-top:var(--Size-2, 8px)}`;
 
 const DropiEmptyState = class {
     constructor(hostRef) {
@@ -103,7 +103,7 @@ const DropiEmptyState = class {
         }
     }
     render() {
-        return (h("div", { key: '75631a1cf12474018edfed1070063ef53a7e7405', class: "empty-state" }, h("div", { key: '3e3af625d199d85fb6a24cc2f4cdba309bd39c4a', class: "empty-state-visual" }, this.imageUrl ? (h("img", { class: "empty-state-img", src: this.imageUrl, alt: this.imageAlt })) : (h("div", { class: "empty-state-img", ref: (el) => { this.illustrationRef = el; } }))), this.title && h("h3", { key: 'b16827915eb162f4529c4e4d95362f94ba7627a0', class: "empty-state-title" }, this.title), this.description && h("p", { key: '6cffa69a84fc1c10f897e6119a3ad38c73e1711b', class: "empty-state-description" }, this.description), h("slot", { key: '66d320e29428ebe024d163c27b6a661e705c504a' }), this.buttonText && (h("div", { key: '5757bc1e86b1d43d16325ab3a473dc31f13f35cb', class: "empty-state-actions" }, h("dropi-button", { key: '1b3f77d41602cdf677629776892e6d7f69394f19', text: this.buttonText, preIcon: this.buttonIcon, severity: this.buttonSeverity, onClick: () => this.buttonClickEvent.emit() })))));
+        return (h("div", { key: '4622061d513d52f33b23241694dc0b443612468e', class: "empty-state" }, h("div", { key: '716002d71cbadf8ee1d3a5dc0e6098db37fc8d36', class: "empty-state-visual" }, this.imageUrl ? (h("img", { class: "empty-state-img", src: this.imageUrl, alt: this.imageAlt })) : (h("div", { class: "empty-state-img", ref: (el) => { this.illustrationRef = el; } }))), this.title && h("h3", { key: 'd618e697298977fd9300179cf015d45f77c11ea7', class: "empty-state-title" }, this.title), this.description && h("p", { key: '5e21f5fdb5cb70fa2860046741cebdc93ef2d6df', class: "empty-state-description" }, this.description), h("slot", { key: '65f5120275499a544cc3d49b5683ba10f0f62c03' }), this.buttonText && (h("div", { key: '73ad76bed22bd04a662c52600dd05c76c9e9a17d', class: "empty-state-actions" }, h("dropi-button", { key: 'bdaaf562bc26e3d746e0c8384536eefc864e525d', text: this.buttonText, preIcon: this.buttonIcon, severity: this.buttonSeverity, onClick: () => this.buttonClickEvent.emit() })))));
     }
 };
 DropiEmptyState.style = dropiEmptyStateCss();