@leaflink/stash 48.14.0 → 48.15.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (18) hide show
  1. package/assets/icons/loading-empty.svg +3 -0
  2. package/assets/spritesheet.svg +1 -1
  3. package/dist/Accordion.vue.d.ts +2 -2
  4. package/dist/AppNavigationItem.vue.d.ts +1 -1
  5. package/dist/Icon.js +1 -0
  6. package/dist/Icon.js.map +1 -1
  7. package/dist/Icon.vue.d.ts +1 -1
  8. package/dist/IconLabel.vue.d.ts +1 -1
  9. package/dist/IntegrationIcon.js +26 -28
  10. package/dist/IntegrationIcon.js.map +1 -1
  11. package/dist/IntegrationIcon.vue.d.ts +0 -8
  12. package/dist/QuickAction.vue.d.ts +1 -1
  13. package/dist/SearchBar.js +60 -51
  14. package/dist/SearchBar.js.map +1 -1
  15. package/dist/SelectStatus.vue.d.ts +1 -1
  16. package/dist/TextEditor.vue.d.ts +1 -1
  17. package/dist/components.css +1 -1
  18. package/package.json +3 -3
package/dist/Accordion.vue.d.ts CHANGED
@@ -49,7 +49,7 @@ declare const _default: __VLS_WithTemplateSlots<DefineComponent<__VLS_WithDefaul
49
49
  }>, {}, unknown, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, VNodeProps & AllowedComponentProps & ComponentCustomProps, Readonly<ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<AccordionProps>, {
50
50
  icon: string;
51
51
  }>>>, {
52
- icon: "sort" | "link" | "menu" | "image" | "search" | "split" | "action-dots" | "activity" | "alert-bell" | "archive" | "arrow-down" | "arrow-left" | "arrow-right" | "arrow-up" | "badge-discount" | "badge-seller-elite" | "badge-seller-power" | "badge-seller-verified" | "book-customer" | "building-office" | "bulk-add" | "calendar-reschedule" | "calendar" | "caret-down" | "caret-up" | "change-log" | "check" | "chevron-down" | "chevron-left" | "chevron-right" | "chevron-up" | "circle-check" | "circle-close" | "circle-dollar" | "circle-info" | "circle-partial" | "circle-percent" | "circle-question-mark" | "circle-status" | "circle-warning" | "clipboard-checkmark" | "clipboard-inventory" | "close" | "combine" | "compass" | "contact" | "contract" | "copy" | "credit-card" | "credit-profile" | "dashboard" | "document-accept" | "document-invoice" | "document-recieved" | "document-sent" | "document-view" | "document" | "dolly" | "download" | "edit" | "ellipsis" | "envelope-open" | "envelope" | "equals" | "export" | "figma" | "file-csv" | "file" | "filter-funnel" | "filter-line" | "flag" | "folder" | "folder-bar-graph" | "folder-orders" | "font-bold" | "font-clear-format" | "font-italic" | "font-underline" | "gear" | "github" | "globe" | "graph-bar-chart" | "graph-line-chart" | "graph-pie-chart" | "hazard" | "hazard-outline" | "headset-agent" | "headset-mic" | "heart-filled" | "heart-outline" | "help-question-mark" | "hide" | "history" | "keyboard-return" | "license-approved" | "license-certificate" | "lightbulb" | "link-add" | "link-unlink" | "list-bulleted" | "list-items" | "list-numbered" | "loading-big" | "loading-small" | "location" | "lock-unlock" | "lock" | "logo-facebook" | "logo-instagram" | "logo-linkedin" | "logo-ll" | "logo-metrc" | "logo-plaid" | "logo-x" | "logo-youtube" | "logout" | "medical" | "megaphone-sound" | "megaphone" | "message-dispute" | "message-reply" | "message" | "minus" | "mj-leaf" | "money" | "note-add" | "note" | "open-in-new" | "paperclip" | "paper-plane" | "performance" | "phone" | "plus" | "preview" | "print" | "product-menu-manage" | "product-menu-search" | "product-menu" | "queue-add" | "queue" | "recent" | "refresh" | "register" | "reply" | "report-download" | "sample" | "save" | "scale-law" | "scale-weight" | "seed-cycle" | "share" | "shop-bag-browse" | "shop-bag-reorder" | "shop-bag" | "shop-basket" | "shop-cart-add" | "shop-cart" | "show" | "sign-dollar" | "sign-percent" | "star-filled" | "star-outline" | "storefront" | "submit" | "swap-horizontal" | "swap-vertical" | "tag-star" | "tag" | "test-results" | "ticket-star" | "ticket" | "tool-dropper" | "tool-wrench" | "transfer" | "trashcan" | "truck" | "upload" | "user-add" | "user-admin" | "user-check" | "user" | "view-card" | "view-detailed" | "view-list" | "warehouse" | "working";
52
+ icon: "sort" | "link" | "menu" | "image" | "search" | "split" | "action-dots" | "activity" | "alert-bell" | "archive" | "arrow-down" | "arrow-left" | "arrow-right" | "arrow-up" | "badge-discount" | "badge-seller-elite" | "badge-seller-power" | "badge-seller-verified" | "book-customer" | "building-office" | "bulk-add" | "calendar-reschedule" | "calendar" | "caret-down" | "caret-up" | "change-log" | "check" | "chevron-down" | "chevron-left" | "chevron-right" | "chevron-up" | "circle-check" | "circle-close" | "circle-dollar" | "circle-info" | "circle-partial" | "circle-percent" | "circle-question-mark" | "circle-status" | "circle-warning" | "clipboard-checkmark" | "clipboard-inventory" | "close" | "combine" | "compass" | "contact" | "contract" | "copy" | "credit-card" | "credit-profile" | "dashboard" | "document-accept" | "document-invoice" | "document-recieved" | "document-sent" | "document-view" | "document" | "dolly" | "download" | "edit" | "ellipsis" | "envelope-open" | "envelope" | "equals" | "export" | "figma" | "file-csv" | "file" | "filter-funnel" | "filter-line" | "flag" | "folder" | "folder-bar-graph" | "folder-orders" | "font-bold" | "font-clear-format" | "font-italic" | "font-underline" | "gear" | "github" | "globe" | "graph-bar-chart" | "graph-line-chart" | "graph-pie-chart" | "hazard" | "hazard-outline" | "headset-agent" | "headset-mic" | "heart-filled" | "heart-outline" | "help-question-mark" | "hide" | "history" | "keyboard-return" | "license-approved" | "license-certificate" | "lightbulb" | "link-add" | "link-unlink" | "list-bulleted" | "list-items" | "list-numbered" | "loading-big" | "loading-empty" | "loading-small" | "location" | "lock-unlock" | "lock" | "logo-facebook" | "logo-instagram" | "logo-linkedin" | "logo-ll" | "logo-metrc" | "logo-plaid" | "logo-x" | "logo-youtube" | "logout" | "medical" | "megaphone-sound" | "megaphone" | "message-dispute" | "message-reply" | "message" | "minus" | "mj-leaf" | "money" | "note-add" | "note" | "open-in-new" | "paperclip" | "paper-plane" | "performance" | "phone" | "plus" | "preview" | "print" | "product-menu-manage" | "product-menu-search" | "product-menu" | "queue-add" | "queue" | "recent" | "refresh" | "register" | "reply" | "report-download" | "sample" | "save" | "scale-law" | "scale-weight" | "seed-cycle" | "share" | "shop-bag-browse" | "shop-bag-reorder" | "shop-bag" | "shop-basket" | "shop-cart-add" | "shop-cart" | "show" | "sign-dollar" | "sign-percent" | "star-filled" | "star-outline" | "storefront" | "submit" | "swap-horizontal" | "swap-vertical" | "tag-star" | "tag" | "test-results" | "ticket-star" | "ticket" | "tool-dropper" | "tool-wrench" | "transfer" | "trashcan" | "truck" | "upload" | "user-add" | "user-admin" | "user-check" | "user" | "view-card" | "view-detailed" | "view-list" | "warehouse" | "working";
53
53
  }, {}>, {
54
54
  default?(_: {}): any;
55
55
  }>;
@@ -57,6 +57,6 @@ export default _default;
57
57
 
58
58
  declare type IconName = typeof iconNames[number];
59
59
 
60
- declare const iconNames: readonly ["action-dots", "activity", "alert-bell", "archive", "arrow-down", "arrow-left", "arrow-right", "arrow-up", "badge-discount", "badge-seller-elite", "badge-seller-power", "badge-seller-verified", "book-customer", "building-office", "bulk-add", "calendar-reschedule", "calendar", "caret-down", "caret-up", "change-log", "check", "chevron-down", "chevron-left", "chevron-right", "chevron-up", "circle-check", "circle-close", "circle-dollar", "circle-info", "circle-partial", "circle-percent", "circle-question-mark", "circle-status", "circle-warning", "clipboard-checkmark", "clipboard-inventory", "close", "combine", "compass", "contact", "contract", "copy", "credit-card", "credit-profile", "dashboard", "document-accept", "document-invoice", "document-recieved", "document-sent", "document-view", "document", "dolly", "download", "edit", "ellipsis", "envelope-open", "envelope", "equals", "export", "figma", "file-csv", "file", "filter-funnel", "filter-line", "flag", "folder", "folder-bar-graph", "folder-orders", "font-bold", "font-clear-format", "font-italic", "font-underline", "gear", "github", "globe", "graph-bar-chart", "graph-line-chart", "graph-pie-chart", "hazard", "hazard-outline", "headset-agent", "headset-mic", "heart-filled", "heart-outline", "help-question-mark", "hide", "history", "image", "keyboard-return", "license-approved", "license-certificate", "lightbulb", "link-add", "link-unlink", "link", "list-bulleted", "list-items", "list-numbered", "loading-big", "loading-small", "location", "lock-unlock", "lock", "logo-facebook", "logo-instagram", "logo-linkedin", "logo-ll", "logo-metrc", "logo-plaid", "logo-x", "logo-youtube", "logout", "medical", "megaphone-sound", "megaphone", "menu", "message-dispute", "message-reply", "message", "minus", "mj-leaf", "money", "note-add", "note", "open-in-new", "paperclip", "paper-plane", "performance", "phone", "plus", "preview", "print", "product-menu-manage", "product-menu-search", "product-menu", "queue-add", "queue", "recent", "refresh", "register", "reply", "report-download", "sample", "save", "scale-law", "scale-weight", "search", "seed-cycle", "share", "shop-bag-browse", "shop-bag-reorder", "shop-bag", "shop-basket", "shop-cart-add", "shop-cart", "show", "sign-dollar", "sign-percent", "sort", "split", "star-filled", "star-outline", "storefront", "submit", "swap-horizontal", "swap-vertical", "tag-star", "tag", "test-results", "ticket-star", "ticket", "tool-dropper", "tool-wrench", "transfer", "trashcan", "truck", "upload", "user-add", "user-admin", "user-check", "user", "view-card", "view-detailed", "view-list", "warehouse", "working"];
60
+ declare const iconNames: readonly ["action-dots", "activity", "alert-bell", "archive", "arrow-down", "arrow-left", "arrow-right", "arrow-up", "badge-discount", "badge-seller-elite", "badge-seller-power", "badge-seller-verified", "book-customer", "building-office", "bulk-add", "calendar-reschedule", "calendar", "caret-down", "caret-up", "change-log", "check", "chevron-down", "chevron-left", "chevron-right", "chevron-up", "circle-check", "circle-close", "circle-dollar", "circle-info", "circle-partial", "circle-percent", "circle-question-mark", "circle-status", "circle-warning", "clipboard-checkmark", "clipboard-inventory", "close", "combine", "compass", "contact", "contract", "copy", "credit-card", "credit-profile", "dashboard", "document-accept", "document-invoice", "document-recieved", "document-sent", "document-view", "document", "dolly", "download", "edit", "ellipsis", "envelope-open", "envelope", "equals", "export", "figma", "file-csv", "file", "filter-funnel", "filter-line", "flag", "folder", "folder-bar-graph", "folder-orders", "font-bold", "font-clear-format", "font-italic", "font-underline", "gear", "github", "globe", "graph-bar-chart", "graph-line-chart", "graph-pie-chart", "hazard", "hazard-outline", "headset-agent", "headset-mic", "heart-filled", "heart-outline", "help-question-mark", "hide", "history", "image", "keyboard-return", "license-approved", "license-certificate", "lightbulb", "link-add", "link-unlink", "link", "list-bulleted", "list-items", "list-numbered", "loading-big", "loading-empty", "loading-small", "location", "lock-unlock", "lock", "logo-facebook", "logo-instagram", "logo-linkedin", "logo-ll", "logo-metrc", "logo-plaid", "logo-x", "logo-youtube", "logout", "medical", "megaphone-sound", "megaphone", "menu", "message-dispute", "message-reply", "message", "minus", "mj-leaf", "money", "note-add", "note", "open-in-new", "paperclip", "paper-plane", "performance", "phone", "plus", "preview", "print", "product-menu-manage", "product-menu-search", "product-menu", "queue-add", "queue", "recent", "refresh", "register", "reply", "report-download", "sample", "save", "scale-law", "scale-weight", "search", "seed-cycle", "share", "shop-bag-browse", "shop-bag-reorder", "shop-bag", "shop-basket", "shop-cart-add", "shop-cart", "show", "sign-dollar", "sign-percent", "sort", "split", "star-filled", "star-outline", "storefront", "submit", "swap-horizontal", "swap-vertical", "tag-star", "tag", "test-results", "ticket-star", "ticket", "tool-dropper", "tool-wrench", "transfer", "trashcan", "truck", "upload", "user-add", "user-admin", "user-check", "user", "view-card", "view-detailed", "view-list", "warehouse", "working"];
61
61
 
62
62
  export { }
package/dist/AppNavigationItem.vue.d.ts CHANGED
@@ -67,6 +67,6 @@ export default _default;
67
67
 
68
68
  declare type IconName = typeof iconNames[number];
69
69
 
70
- declare const iconNames: readonly ["action-dots", "activity", "alert-bell", "archive", "arrow-down", "arrow-left", "arrow-right", "arrow-up", "badge-discount", "badge-seller-elite", "badge-seller-power", "badge-seller-verified", "book-customer", "building-office", "bulk-add", "calendar-reschedule", "calendar", "caret-down", "caret-up", "change-log", "check", "chevron-down", "chevron-left", "chevron-right", "chevron-up", "circle-check", "circle-close", "circle-dollar", "circle-info", "circle-partial", "circle-percent", "circle-question-mark", "circle-status", "circle-warning", "clipboard-checkmark", "clipboard-inventory", "close", "combine", "compass", "contact", "contract", "copy", "credit-card", "credit-profile", "dashboard", "document-accept", "document-invoice", "document-recieved", "document-sent", "document-view", "document", "dolly", "download", "edit", "ellipsis", "envelope-open", "envelope", "equals", "export", "figma", "file-csv", "file", "filter-funnel", "filter-line", "flag", "folder", "folder-bar-graph", "folder-orders", "font-bold", "font-clear-format", "font-italic", "font-underline", "gear", "github", "globe", "graph-bar-chart", "graph-line-chart", "graph-pie-chart", "hazard", "hazard-outline", "headset-agent", "headset-mic", "heart-filled", "heart-outline", "help-question-mark", "hide", "history", "image", "keyboard-return", "license-approved", "license-certificate", "lightbulb", "link-add", "link-unlink", "link", "list-bulleted", "list-items", "list-numbered", "loading-big", "loading-small", "location", "lock-unlock", "lock", "logo-facebook", "logo-instagram", "logo-linkedin", "logo-ll", "logo-metrc", "logo-plaid", "logo-x", "logo-youtube", "logout", "medical", "megaphone-sound", "megaphone", "menu", "message-dispute", "message-reply", "message", "minus", "mj-leaf", "money", "note-add", "note", "open-in-new", "paperclip", "paper-plane", "performance", "phone", "plus", "preview", "print", "product-menu-manage", "product-menu-search", "product-menu", "queue-add", "queue", "recent", "refresh", "register", "reply", "report-download", "sample", "save", "scale-law", "scale-weight", "search", "seed-cycle", "share", "shop-bag-browse", "shop-bag-reorder", "shop-bag", "shop-basket", "shop-cart-add", "shop-cart", "show", "sign-dollar", "sign-percent", "sort", "split", "star-filled", "star-outline", "storefront", "submit", "swap-horizontal", "swap-vertical", "tag-star", "tag", "test-results", "ticket-star", "ticket", "tool-dropper", "tool-wrench", "transfer", "trashcan", "truck", "upload", "user-add", "user-admin", "user-check", "user", "view-card", "view-detailed", "view-list", "warehouse", "working"];
70
+ declare const iconNames: readonly ["action-dots", "activity", "alert-bell", "archive", "arrow-down", "arrow-left", "arrow-right", "arrow-up", "badge-discount", "badge-seller-elite", "badge-seller-power", "badge-seller-verified", "book-customer", "building-office", "bulk-add", "calendar-reschedule", "calendar", "caret-down", "caret-up", "change-log", "check", "chevron-down", "chevron-left", "chevron-right", "chevron-up", "circle-check", "circle-close", "circle-dollar", "circle-info", "circle-partial", "circle-percent", "circle-question-mark", "circle-status", "circle-warning", "clipboard-checkmark", "clipboard-inventory", "close", "combine", "compass", "contact", "contract", "copy", "credit-card", "credit-profile", "dashboard", "document-accept", "document-invoice", "document-recieved", "document-sent", "document-view", "document", "dolly", "download", "edit", "ellipsis", "envelope-open", "envelope", "equals", "export", "figma", "file-csv", "file", "filter-funnel", "filter-line", "flag", "folder", "folder-bar-graph", "folder-orders", "font-bold", "font-clear-format", "font-italic", "font-underline", "gear", "github", "globe", "graph-bar-chart", "graph-line-chart", "graph-pie-chart", "hazard", "hazard-outline", "headset-agent", "headset-mic", "heart-filled", "heart-outline", "help-question-mark", "hide", "history", "image", "keyboard-return", "license-approved", "license-certificate", "lightbulb", "link-add", "link-unlink", "link", "list-bulleted", "list-items", "list-numbered", "loading-big", "loading-empty", "loading-small", "location", "lock-unlock", "lock", "logo-facebook", "logo-instagram", "logo-linkedin", "logo-ll", "logo-metrc", "logo-plaid", "logo-x", "logo-youtube", "logout", "medical", "megaphone-sound", "megaphone", "menu", "message-dispute", "message-reply", "message", "minus", "mj-leaf", "money", "note-add", "note", "open-in-new", "paperclip", "paper-plane", "performance", "phone", "plus", "preview", "print", "product-menu-manage", "product-menu-search", "product-menu", "queue-add", "queue", "recent", "refresh", "register", "reply", "report-download", "sample", "save", "scale-law", "scale-weight", "search", "seed-cycle", "share", "shop-bag-browse", "shop-bag-reorder", "shop-bag", "shop-basket", "shop-cart-add", "shop-cart", "show", "sign-dollar", "sign-percent", "sort", "split", "star-filled", "star-outline", "storefront", "submit", "swap-horizontal", "swap-vertical", "tag-star", "tag", "test-results", "ticket-star", "ticket", "tool-dropper", "tool-wrench", "transfer", "trashcan", "truck", "upload", "user-add", "user-admin", "user-check", "user", "view-card", "view-detailed", "view-list", "warehouse", "working"];
71
71
 
72
72
  export { }
package/dist/Icon.js CHANGED
@@ -104,6 +104,7 @@ const _ = [
104
104
  "list-items",
105
105
  "list-numbered",
106
106
  "loading-big",
107
+ "loading-empty",
107
108
  "loading-small",
108
109
  "location",
109
110
  "lock-unlock",
package/dist/Icon.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Icon.js","sources":["../src/components/Icon/Icon.types.ts","../src/components/Icon/Icon.vue"],"sourcesContent":["export const iconNames = [\n 'action-dots',\n 'activity',\n 'alert-bell',\n 'archive',\n 'arrow-down',\n 'arrow-left',\n 'arrow-right',\n 'arrow-up',\n 'badge-discount',\n 'badge-seller-elite',\n 'badge-seller-power',\n 'badge-seller-verified',\n 'book-customer',\n 'building-office',\n 'bulk-add',\n 'calendar-reschedule',\n 'calendar',\n 'caret-down',\n 'caret-up',\n 'change-log',\n 'check',\n 'chevron-down',\n 'chevron-left',\n 'chevron-right',\n 'chevron-up',\n 'circle-check',\n 'circle-close',\n 'circle-dollar',\n 'circle-info',\n 'circle-partial',\n 'circle-percent',\n 'circle-question-mark',\n 'circle-status',\n 'circle-warning',\n 'clipboard-checkmark',\n 'clipboard-inventory',\n 'close',\n 'combine',\n 'compass',\n 'contact',\n 'contract',\n 'copy',\n 'credit-card',\n 'credit-profile',\n 'dashboard',\n 'document-accept',\n 'document-invoice',\n 'document-recieved',\n 'document-sent',\n 'document-view',\n 'document',\n 'dolly',\n 'download',\n 'edit',\n 'ellipsis',\n 'envelope-open',\n 'envelope',\n 'equals',\n 'export',\n 'figma',\n 'file-csv',\n 'file',\n 'filter-funnel',\n 'filter-line',\n 'flag',\n 'folder',\n 'folder-bar-graph',\n 'folder-orders',\n 'font-bold',\n 'font-clear-format',\n 'font-italic',\n 'font-underline',\n 'gear',\n 'github',\n 'globe',\n 'graph-bar-chart',\n 'graph-line-chart',\n 'graph-pie-chart',\n 'hazard',\n 'hazard-outline',\n 'headset-agent',\n 'headset-mic',\n 'heart-filled',\n 'heart-outline',\n 'help-question-mark',\n 'hide',\n 'history',\n 'image',\n 'import',\n 'keyboard-return',\n 'license-approved',\n 'license-certificate',\n 'lightbulb',\n 'link-add',\n 'link-unlink',\n 'link',\n 'list-bulleted',\n 'list-items',\n 'list-numbered',\n 'loading-big',\n 'loading-small',\n 'location',\n 'lock-unlock',\n 'lock',\n 'logo-facebook',\n 'logo-instagram',\n 'logo-linkedin',\n 'logo-ll',\n 'logo-metrc',\n 'logo-plaid',\n 'logo-x',\n 'logo-youtube',\n 'logout',\n 'medical',\n 'megaphone-sound',\n 'megaphone',\n 'menu',\n 'message-dispute',\n 'message-reply',\n 'message',\n 'minus',\n 'mj-leaf',\n 'money',\n 'note-add',\n 'note',\n 'open-in-new',\n 'paperclip',\n 'paper-plane',\n 'performance',\n 'phone',\n 'plus',\n 'preview',\n 'print',\n 'product-menu-manage',\n 'product-menu-search',\n 'product-menu',\n 'queue-add',\n 'queue',\n 'recent',\n 'refresh',\n 'register',\n 'reply',\n 'report-download',\n 'sample',\n 'save',\n 'scale-law',\n 'scale-weight',\n 'search',\n 'seed-cycle',\n 'share',\n 'shop-bag-browse',\n 'shop-bag-reorder',\n 'shop-bag',\n 'shop-basket',\n 'shop-cart-add',\n 'shop-cart',\n 'show',\n 'sign-dollar',\n 'sign-percent',\n 'sort',\n 'split',\n 'star-filled',\n 'star-outline',\n 'storefront',\n 'submit',\n 'swap-horizontal',\n 'swap-vertical',\n 'tag-star',\n 'tag',\n 'test-results',\n 'ticket-star',\n 'ticket',\n 'tool-dropper',\n 'tool-wrench',\n 'transfer',\n 'trashcan',\n 'truck',\n 'upload',\n 'user-add',\n 'user-admin',\n 'user-check',\n 'user',\n 'view-card',\n 'view-detailed',\n 'view-list',\n 'warehouse',\n 'working',\n] as const;\n\nexport type IconName = typeof iconNames[number];\n\nexport enum IconSizes {\n Standard = 'standard',\n Dense = 'dense',\n Small = 'small',\n Large = 'large',\n}\n\nexport type IconSize = `${IconSizes}`;\n","<script lang=\"ts\">\n export * from './Icon.types';\n</script>\n\n<script lang=\"ts\" setup>\n import uniqueId from 'lodash-es/uniqueId';\n import { computed, inject, useCssModule } from 'vue';\n import InlineSvg from 'vue-inline-svg';\n\n import { StashProvideState } from '../../../types/misc';\n import { IconName, iconNames, IconSize } from './Icon.types';\n\n export interface IconProps {\n id?: string;\n\n /**\n * The filename of the icon that should be displayed\n */\n name: IconName;\n\n /**\n * Accessible, short-text description for the icon. Not rendered as part of the graphic, but\n * browsers usually display it as a tooltip and screen readers use this.\n */\n title?: string;\n\n /**\n * The size of the icon\n * Options: large (32x32px), default (24x24px), dense (20x20px), small (14x14px).\n */\n size?: IconSize;\n\n /**\n * @deprecated Use the `size` prop with value \"dense\" instead\n */\n dense?: boolean;\n\n /**\n` * @deprecated Use the `size` prop with value \"small\" instead\n */\n small?: boolean;\n\n /**\n * Icon's custom static path. It'll default to either the staticPath defined on the library installation or '/static' if none are provided.\n */\n staticPath?: string;\n }\n\n defineOptions({\n name: 'll-icon',\n });\n\n const props = withDefaults(defineProps<IconProps>(), {\n id: () => uniqueId('ll-icon-'),\n size: 'standard',\n title: '',\n staticPath: '',\n });\n const classes = useCssModule();\n const stashOptions = inject<Partial<StashProvideState>>('stashOptions', {\n staticPath: '/static',\n });\n\n const computedName = computed<IconName>(() => {\n if (iconNames.includes(props.name)) {\n return props.name;\n }\n\n return 'mj-leaf';\n });\n\n const computedStaticPath = computed(() => {\n return props.staticPath || stashOptions?.staticPath;\n });\n\n /**\n * Event handler to add the use tag for the specific icon we need to the svg\n */\n const transformSvgSource = (svgElem: SVGElement) => {\n if (!svgElem) {\n return svgElem;\n }\n\n const useNode = document.createElement('use');\n useNode.setAttribute('href', `#${computedName.value}`);\n\n // Grab icon from sprite\n const symbolNode = svgElem.querySelector(`#${computedName.value}`);\n\n // This really shouldn't happen but if the spritesheet gets out of sync with the `IconName` type it could\n if (!symbolNode) {\n // still insert <use> element but it will not be found (this is more for tests than anything else)\n svgElem.insertBefore(useNode, svgElem.firstChild);\n return svgElem;\n }\n\n /**\n * Repeatedly inlining the entire spritesheet was causing failures in mobile Safari, and also\n * performance issues on long list pages where the svg was being inlined over and over.\n * Since the SVG is cached after the first request, this callback is just removing the unnecessary\n * <symbol> nodes to slim down the DOM manipulation and insertion.\n */\n // Replace all children with just the one <symbol> element and <use> element\n svgElem.replaceChildren(symbolNode, useNode);\n\n return svgElem;\n };\n</script>\n\n<!-- Use inline svg so that requests to pull the spritesheet are done via JS and avoid\n browser restrictions for different domains for svgs. inline svg also caches the requests\n so we don't load the spritesheet multiple times\n Reference: https://oreillymedia.github.io/Using_SVG/extras/ch10-cors.html -->\n<template>\n <InlineSvg\n :id=\"props.id\"\n role=\"presentation\"\n :aria-labelledby=\"props.id\"\n class=\"stash-icon\"\n :class=\"[\n classes.icon,\n `icon--${props.name}`,\n {\n [classes.standard]: props.size === 'standard',\n [classes.dense]: props.size === 'dense' || props.dense,\n [classes.small]: props.size === 'small' || props.small,\n [classes.large]: props.size === 'large',\n },\n ]\"\n data-test=\"stash-icon\"\n :src=\"`${computedStaticPath}/spritesheet.svg`\"\n :title=\"props.title\"\n :transform-source=\"transformSvgSource\"\n />\n</template>\n\n<style module>\n .icon {\n display: inline-block;\n fill: currentcolor;\n vertical-align: middle;\n }\n\n .standard {\n height: 24px;\n min-height: 24px;\n min-width: 24px;\n width: 24px;\n }\n\n .dense {\n height: 20px;\n min-height: 20px;\n min-width: 20px;\n width: 20px;\n }\n\n .small {\n height: 14px;\n min-height: 14px;\n min-width: 14px;\n width: 14px;\n }\n\n .large {\n height: 32px;\n min-height: 32px;\n min-width: 32px;\n width: 32px;\n }\n</style>\n"],"names":["iconNames","IconSizes","classes","useCssModule","stashOptions","inject","computedName","computed","props","computedStaticPath","transformSvgSource","svgElem","useNode","symbolNode"],"mappings":";;;;;AAAO,MAAMA,IAAY;AAAA,EACvB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF;AAIY,IAAAC,sBAAAA,OACVA,EAAA,WAAW,YACXA,EAAA,QAAQ,SACRA,EAAA,QAAQ,SACRA,EAAA,QAAQ,SAJEA,IAAAA,KAAA,CAAA,CAAA;;;;;;;;;;;;;;iBCtIJC,IAAUC,KACVC,IAAeC,EAAmC,gBAAgB;AAAA,MACtE,YAAY;AAAA,IAAA,CACb,GAEKC,IAAeC,EAAmB,MAClCP,EAAU,SAASQ,EAAM,IAAI,IACxBA,EAAM,OAGR,SACR,GAEKC,IAAqBF,EAAS,MAC3BC,EAAM,eAAcJ,KAAA,gBAAAA,EAAc,WAC1C,GAKKM,IAAqB,CAACC,MAAwB;AAClD,UAAI,CAACA;AACI,eAAAA;AAGH,YAAAC,IAAU,SAAS,cAAc,KAAK;AAC5C,MAAAA,EAAQ,aAAa,QAAQ,IAAIN,EAAa,OAAO;AAGrD,YAAMO,IAAaF,EAAQ,cAAc,IAAIL,EAAa,OAAO;AAGjE,aAAKO,KAaGF,EAAA,gBAAgBE,GAAYD,CAAO,GAEpCD,MAbGA,EAAA,aAAaC,GAASD,EAAQ,UAAU,GACzCA;AAAA,IAYF;;;;;;;;;;;;;;;;;;;;;;;;"}
1
+ {"version":3,"file":"Icon.js","sources":["../src/components/Icon/Icon.types.ts","../src/components/Icon/Icon.vue"],"sourcesContent":["export const iconNames = [\n 'action-dots',\n 'activity',\n 'alert-bell',\n 'archive',\n 'arrow-down',\n 'arrow-left',\n 'arrow-right',\n 'arrow-up',\n 'badge-discount',\n 'badge-seller-elite',\n 'badge-seller-power',\n 'badge-seller-verified',\n 'book-customer',\n 'building-office',\n 'bulk-add',\n 'calendar-reschedule',\n 'calendar',\n 'caret-down',\n 'caret-up',\n 'change-log',\n 'check',\n 'chevron-down',\n 'chevron-left',\n 'chevron-right',\n 'chevron-up',\n 'circle-check',\n 'circle-close',\n 'circle-dollar',\n 'circle-info',\n 'circle-partial',\n 'circle-percent',\n 'circle-question-mark',\n 'circle-status',\n 'circle-warning',\n 'clipboard-checkmark',\n 'clipboard-inventory',\n 'close',\n 'combine',\n 'compass',\n 'contact',\n 'contract',\n 'copy',\n 'credit-card',\n 'credit-profile',\n 'dashboard',\n 'document-accept',\n 'document-invoice',\n 'document-recieved',\n 'document-sent',\n 'document-view',\n 'document',\n 'dolly',\n 'download',\n 'edit',\n 'ellipsis',\n 'envelope-open',\n 'envelope',\n 'equals',\n 'export',\n 'figma',\n 'file-csv',\n 'file',\n 'filter-funnel',\n 'filter-line',\n 'flag',\n 'folder',\n 'folder-bar-graph',\n 'folder-orders',\n 'font-bold',\n 'font-clear-format',\n 'font-italic',\n 'font-underline',\n 'gear',\n 'github',\n 'globe',\n 'graph-bar-chart',\n 'graph-line-chart',\n 'graph-pie-chart',\n 'hazard',\n 'hazard-outline',\n 'headset-agent',\n 'headset-mic',\n 'heart-filled',\n 'heart-outline',\n 'help-question-mark',\n 'hide',\n 'history',\n 'image',\n 'import',\n 'keyboard-return',\n 'license-approved',\n 'license-certificate',\n 'lightbulb',\n 'link-add',\n 'link-unlink',\n 'link',\n 'list-bulleted',\n 'list-items',\n 'list-numbered',\n 'loading-big',\n 'loading-empty',\n 'loading-small',\n 'location',\n 'lock-unlock',\n 'lock',\n 'logo-facebook',\n 'logo-instagram',\n 'logo-linkedin',\n 'logo-ll',\n 'logo-metrc',\n 'logo-plaid',\n 'logo-x',\n 'logo-youtube',\n 'logout',\n 'medical',\n 'megaphone-sound',\n 'megaphone',\n 'menu',\n 'message-dispute',\n 'message-reply',\n 'message',\n 'minus',\n 'mj-leaf',\n 'money',\n 'note-add',\n 'note',\n 'open-in-new',\n 'paperclip',\n 'paper-plane',\n 'performance',\n 'phone',\n 'plus',\n 'preview',\n 'print',\n 'product-menu-manage',\n 'product-menu-search',\n 'product-menu',\n 'queue-add',\n 'queue',\n 'recent',\n 'refresh',\n 'register',\n 'reply',\n 'report-download',\n 'sample',\n 'save',\n 'scale-law',\n 'scale-weight',\n 'search',\n 'seed-cycle',\n 'share',\n 'shop-bag-browse',\n 'shop-bag-reorder',\n 'shop-bag',\n 'shop-basket',\n 'shop-cart-add',\n 'shop-cart',\n 'show',\n 'sign-dollar',\n 'sign-percent',\n 'sort',\n 'split',\n 'star-filled',\n 'star-outline',\n 'storefront',\n 'submit',\n 'swap-horizontal',\n 'swap-vertical',\n 'tag-star',\n 'tag',\n 'test-results',\n 'ticket-star',\n 'ticket',\n 'tool-dropper',\n 'tool-wrench',\n 'transfer',\n 'trashcan',\n 'truck',\n 'upload',\n 'user-add',\n 'user-admin',\n 'user-check',\n 'user',\n 'view-card',\n 'view-detailed',\n 'view-list',\n 'warehouse',\n 'working',\n] as const;\n\nexport type IconName = typeof iconNames[number];\n\nexport enum IconSizes {\n Standard = 'standard',\n Dense = 'dense',\n Small = 'small',\n Large = 'large',\n}\n\nexport type IconSize = `${IconSizes}`;\n","<script lang=\"ts\">\n export * from './Icon.types';\n</script>\n\n<script lang=\"ts\" setup>\n import uniqueId from 'lodash-es/uniqueId';\n import { computed, inject, useCssModule } from 'vue';\n import InlineSvg from 'vue-inline-svg';\n\n import { StashProvideState } from '../../../types/misc';\n import { IconName, iconNames, IconSize } from './Icon.types';\n\n export interface IconProps {\n id?: string;\n\n /**\n * The filename of the icon that should be displayed\n */\n name: IconName;\n\n /**\n * Accessible, short-text description for the icon. Not rendered as part of the graphic, but\n * browsers usually display it as a tooltip and screen readers use this.\n */\n title?: string;\n\n /**\n * The size of the icon\n * Options: large (32x32px), default (24x24px), dense (20x20px), small (14x14px).\n */\n size?: IconSize;\n\n /**\n * @deprecated Use the `size` prop with value \"dense\" instead\n */\n dense?: boolean;\n\n /**\n` * @deprecated Use the `size` prop with value \"small\" instead\n */\n small?: boolean;\n\n /**\n * Icon's custom static path. It'll default to either the staticPath defined on the library installation or '/static' if none are provided.\n */\n staticPath?: string;\n }\n\n defineOptions({\n name: 'll-icon',\n });\n\n const props = withDefaults(defineProps<IconProps>(), {\n id: () => uniqueId('ll-icon-'),\n size: 'standard',\n title: '',\n staticPath: '',\n });\n const classes = useCssModule();\n const stashOptions = inject<Partial<StashProvideState>>('stashOptions', {\n staticPath: '/static',\n });\n\n const computedName = computed<IconName>(() => {\n if (iconNames.includes(props.name)) {\n return props.name;\n }\n\n return 'mj-leaf';\n });\n\n const computedStaticPath = computed(() => {\n return props.staticPath || stashOptions?.staticPath;\n });\n\n /**\n * Event handler to add the use tag for the specific icon we need to the svg\n */\n const transformSvgSource = (svgElem: SVGElement) => {\n if (!svgElem) {\n return svgElem;\n }\n\n const useNode = document.createElement('use');\n useNode.setAttribute('href', `#${computedName.value}`);\n\n // Grab icon from sprite\n const symbolNode = svgElem.querySelector(`#${computedName.value}`);\n\n // This really shouldn't happen but if the spritesheet gets out of sync with the `IconName` type it could\n if (!symbolNode) {\n // still insert <use> element but it will not be found (this is more for tests than anything else)\n svgElem.insertBefore(useNode, svgElem.firstChild);\n return svgElem;\n }\n\n /**\n * Repeatedly inlining the entire spritesheet was causing failures in mobile Safari, and also\n * performance issues on long list pages where the svg was being inlined over and over.\n * Since the SVG is cached after the first request, this callback is just removing the unnecessary\n * <symbol> nodes to slim down the DOM manipulation and insertion.\n */\n // Replace all children with just the one <symbol> element and <use> element\n svgElem.replaceChildren(symbolNode, useNode);\n\n return svgElem;\n };\n</script>\n\n<!-- Use inline svg so that requests to pull the spritesheet are done via JS and avoid\n browser restrictions for different domains for svgs. inline svg also caches the requests\n so we don't load the spritesheet multiple times\n Reference: https://oreillymedia.github.io/Using_SVG/extras/ch10-cors.html -->\n<template>\n <InlineSvg\n :id=\"props.id\"\n role=\"presentation\"\n :aria-labelledby=\"props.id\"\n class=\"stash-icon\"\n :class=\"[\n classes.icon,\n `icon--${props.name}`,\n {\n [classes.standard]: props.size === 'standard',\n [classes.dense]: props.size === 'dense' || props.dense,\n [classes.small]: props.size === 'small' || props.small,\n [classes.large]: props.size === 'large',\n },\n ]\"\n data-test=\"stash-icon\"\n :src=\"`${computedStaticPath}/spritesheet.svg`\"\n :title=\"props.title\"\n :transform-source=\"transformSvgSource\"\n />\n</template>\n\n<style module>\n .icon {\n display: inline-block;\n fill: currentcolor;\n vertical-align: middle;\n }\n\n .standard {\n height: 24px;\n min-height: 24px;\n min-width: 24px;\n width: 24px;\n }\n\n .dense {\n height: 20px;\n min-height: 20px;\n min-width: 20px;\n width: 20px;\n }\n\n .small {\n height: 14px;\n min-height: 14px;\n min-width: 14px;\n width: 14px;\n }\n\n .large {\n height: 32px;\n min-height: 32px;\n min-width: 32px;\n width: 32px;\n }\n</style>\n"],"names":["iconNames","IconSizes","classes","useCssModule","stashOptions","inject","computedName","computed","props","computedStaticPath","transformSvgSource","svgElem","useNode","symbolNode"],"mappings":";;;;;AAAO,MAAMA,IAAY;AAAA,EACvB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF;AAIY,IAAAC,sBAAAA,OACVA,EAAA,WAAW,YACXA,EAAA,QAAQ,SACRA,EAAA,QAAQ,SACRA,EAAA,QAAQ,SAJEA,IAAAA,KAAA,CAAA,CAAA;;;;;;;;;;;;;;iBCvIJC,IAAUC,KACVC,IAAeC,EAAmC,gBAAgB;AAAA,MACtE,YAAY;AAAA,IAAA,CACb,GAEKC,IAAeC,EAAmB,MAClCP,EAAU,SAASQ,EAAM,IAAI,IACxBA,EAAM,OAGR,SACR,GAEKC,IAAqBF,EAAS,MAC3BC,EAAM,eAAcJ,KAAA,gBAAAA,EAAc,WAC1C,GAKKM,IAAqB,CAACC,MAAwB;AAClD,UAAI,CAACA;AACI,eAAAA;AAGH,YAAAC,IAAU,SAAS,cAAc,KAAK;AAC5C,MAAAA,EAAQ,aAAa,QAAQ,IAAIN,EAAa,OAAO;AAGrD,YAAMO,IAAaF,EAAQ,cAAc,IAAIL,EAAa,OAAO;AAGjE,aAAKO,KAaGF,EAAA,gBAAgBE,GAAYD,CAAO,GAEpCD,MAbGA,EAAA,aAAaC,GAASD,EAAQ,UAAU,GACzCA;AAAA,IAYF;;;;;;;;;;;;;;;;;;;;;;;;"}
package/dist/Icon.vue.d.ts CHANGED
@@ -47,7 +47,7 @@ export default _default;
47
47
 
48
48
  export declare type IconName = typeof iconNames[number];
49
49
 
50
- export declare const iconNames: readonly ["action-dots", "activity", "alert-bell", "archive", "arrow-down", "arrow-left", "arrow-right", "arrow-up", "badge-discount", "badge-seller-elite", "badge-seller-power", "badge-seller-verified", "book-customer", "building-office", "bulk-add", "calendar-reschedule", "calendar", "caret-down", "caret-up", "change-log", "check", "chevron-down", "chevron-left", "chevron-right", "chevron-up", "circle-check", "circle-close", "circle-dollar", "circle-info", "circle-partial", "circle-percent", "circle-question-mark", "circle-status", "circle-warning", "clipboard-checkmark", "clipboard-inventory", "close", "combine", "compass", "contact", "contract", "copy", "credit-card", "credit-profile", "dashboard", "document-accept", "document-invoice", "document-recieved", "document-sent", "document-view", "document", "dolly", "download", "edit", "ellipsis", "envelope-open", "envelope", "equals", "export", "figma", "file-csv", "file", "filter-funnel", "filter-line", "flag", "folder", "folder-bar-graph", "folder-orders", "font-bold", "font-clear-format", "font-italic", "font-underline", "gear", "github", "globe", "graph-bar-chart", "graph-line-chart", "graph-pie-chart", "hazard", "hazard-outline", "headset-agent", "headset-mic", "heart-filled", "heart-outline", "help-question-mark", "hide", "history", "image", "keyboard-return", "license-approved", "license-certificate", "lightbulb", "link-add", "link-unlink", "link", "list-bulleted", "list-items", "list-numbered", "loading-big", "loading-small", "location", "lock-unlock", "lock", "logo-facebook", "logo-instagram", "logo-linkedin", "logo-ll", "logo-metrc", "logo-plaid", "logo-x", "logo-youtube", "logout", "medical", "megaphone-sound", "megaphone", "menu", "message-dispute", "message-reply", "message", "minus", "mj-leaf", "money", "note-add", "note", "open-in-new", "paperclip", "paper-plane", "performance", "phone", "plus", "preview", "print", "product-menu-manage", "product-menu-search", "product-menu", "queue-add", "queue", "recent", "refresh", "register", "reply", "report-download", "sample", "save", "scale-law", "scale-weight", "search", "seed-cycle", "share", "shop-bag-browse", "shop-bag-reorder", "shop-bag", "shop-basket", "shop-cart-add", "shop-cart", "show", "sign-dollar", "sign-percent", "sort", "split", "star-filled", "star-outline", "storefront", "submit", "swap-horizontal", "swap-vertical", "tag-star", "tag", "test-results", "ticket-star", "ticket", "tool-dropper", "tool-wrench", "transfer", "trashcan", "truck", "upload", "user-add", "user-admin", "user-check", "user", "view-card", "view-detailed", "view-list", "warehouse", "working"];
50
+ export declare const iconNames: readonly ["action-dots", "activity", "alert-bell", "archive", "arrow-down", "arrow-left", "arrow-right", "arrow-up", "badge-discount", "badge-seller-elite", "badge-seller-power", "badge-seller-verified", "book-customer", "building-office", "bulk-add", "calendar-reschedule", "calendar", "caret-down", "caret-up", "change-log", "check", "chevron-down", "chevron-left", "chevron-right", "chevron-up", "circle-check", "circle-close", "circle-dollar", "circle-info", "circle-partial", "circle-percent", "circle-question-mark", "circle-status", "circle-warning", "clipboard-checkmark", "clipboard-inventory", "close", "combine", "compass", "contact", "contract", "copy", "credit-card", "credit-profile", "dashboard", "document-accept", "document-invoice", "document-recieved", "document-sent", "document-view", "document", "dolly", "download", "edit", "ellipsis", "envelope-open", "envelope", "equals", "export", "figma", "file-csv", "file", "filter-funnel", "filter-line", "flag", "folder", "folder-bar-graph", "folder-orders", "font-bold", "font-clear-format", "font-italic", "font-underline", "gear", "github", "globe", "graph-bar-chart", "graph-line-chart", "graph-pie-chart", "hazard", "hazard-outline", "headset-agent", "headset-mic", "heart-filled", "heart-outline", "help-question-mark", "hide", "history", "image", "keyboard-return", "license-approved", "license-certificate", "lightbulb", "link-add", "link-unlink", "link", "list-bulleted", "list-items", "list-numbered", "loading-big", "loading-empty", "loading-small", "location", "lock-unlock", "lock", "logo-facebook", "logo-instagram", "logo-linkedin", "logo-ll", "logo-metrc", "logo-plaid", "logo-x", "logo-youtube", "logout", "medical", "megaphone-sound", "megaphone", "menu", "message-dispute", "message-reply", "message", "minus", "mj-leaf", "money", "note-add", "note", "open-in-new", "paperclip", "paper-plane", "performance", "phone", "plus", "preview", "print", "product-menu-manage", "product-menu-search", "product-menu", "queue-add", "queue", "recent", "refresh", "register", "reply", "report-download", "sample", "save", "scale-law", "scale-weight", "search", "seed-cycle", "share", "shop-bag-browse", "shop-bag-reorder", "shop-bag", "shop-basket", "shop-cart-add", "shop-cart", "show", "sign-dollar", "sign-percent", "sort", "split", "star-filled", "star-outline", "storefront", "submit", "swap-horizontal", "swap-vertical", "tag-star", "tag", "test-results", "ticket-star", "ticket", "tool-dropper", "tool-wrench", "transfer", "trashcan", "truck", "upload", "user-add", "user-admin", "user-check", "user", "view-card", "view-detailed", "view-list", "warehouse", "working"];
51
51
 
52
52
  export declare interface IconProps {
53
53
  id?: string;
package/dist/IconLabel.vue.d.ts CHANGED
@@ -85,7 +85,7 @@ export declare interface IconLabelProps {
85
85
 
86
86
  declare type IconName = typeof iconNames[number];
87
87
 
88
- declare const iconNames: readonly ["action-dots", "activity", "alert-bell", "archive", "arrow-down", "arrow-left", "arrow-right", "arrow-up", "badge-discount", "badge-seller-elite", "badge-seller-power", "badge-seller-verified", "book-customer", "building-office", "bulk-add", "calendar-reschedule", "calendar", "caret-down", "caret-up", "change-log", "check", "chevron-down", "chevron-left", "chevron-right", "chevron-up", "circle-check", "circle-close", "circle-dollar", "circle-info", "circle-partial", "circle-percent", "circle-question-mark", "circle-status", "circle-warning", "clipboard-checkmark", "clipboard-inventory", "close", "combine", "compass", "contact", "contract", "copy", "credit-card", "credit-profile", "dashboard", "document-accept", "document-invoice", "document-recieved", "document-sent", "document-view", "document", "dolly", "download", "edit", "ellipsis", "envelope-open", "envelope", "equals", "export", "figma", "file-csv", "file", "filter-funnel", "filter-line", "flag", "folder", "folder-bar-graph", "folder-orders", "font-bold", "font-clear-format", "font-italic", "font-underline", "gear", "github", "globe", "graph-bar-chart", "graph-line-chart", "graph-pie-chart", "hazard", "hazard-outline", "headset-agent", "headset-mic", "heart-filled", "heart-outline", "help-question-mark", "hide", "history", "image", "keyboard-return", "license-approved", "license-certificate", "lightbulb", "link-add", "link-unlink", "link", "list-bulleted", "list-items", "list-numbered", "loading-big", "loading-small", "location", "lock-unlock", "lock", "logo-facebook", "logo-instagram", "logo-linkedin", "logo-ll", "logo-metrc", "logo-plaid", "logo-x", "logo-youtube", "logout", "medical", "megaphone-sound", "megaphone", "menu", "message-dispute", "message-reply", "message", "minus", "mj-leaf", "money", "note-add", "note", "open-in-new", "paperclip", "paper-plane", "performance", "phone", "plus", "preview", "print", "product-menu-manage", "product-menu-search", "product-menu", "queue-add", "queue", "recent", "refresh", "register", "reply", "report-download", "sample", "save", "scale-law", "scale-weight", "search", "seed-cycle", "share", "shop-bag-browse", "shop-bag-reorder", "shop-bag", "shop-basket", "shop-cart-add", "shop-cart", "show", "sign-dollar", "sign-percent", "sort", "split", "star-filled", "star-outline", "storefront", "submit", "swap-horizontal", "swap-vertical", "tag-star", "tag", "test-results", "ticket-star", "ticket", "tool-dropper", "tool-wrench", "transfer", "trashcan", "truck", "upload", "user-add", "user-admin", "user-check", "user", "view-card", "view-detailed", "view-list", "warehouse", "working"];
88
+ declare const iconNames: readonly ["action-dots", "activity", "alert-bell", "archive", "arrow-down", "arrow-left", "arrow-right", "arrow-up", "badge-discount", "badge-seller-elite", "badge-seller-power", "badge-seller-verified", "book-customer", "building-office", "bulk-add", "calendar-reschedule", "calendar", "caret-down", "caret-up", "change-log", "check", "chevron-down", "chevron-left", "chevron-right", "chevron-up", "circle-check", "circle-close", "circle-dollar", "circle-info", "circle-partial", "circle-percent", "circle-question-mark", "circle-status", "circle-warning", "clipboard-checkmark", "clipboard-inventory", "close", "combine", "compass", "contact", "contract", "copy", "credit-card", "credit-profile", "dashboard", "document-accept", "document-invoice", "document-recieved", "document-sent", "document-view", "document", "dolly", "download", "edit", "ellipsis", "envelope-open", "envelope", "equals", "export", "figma", "file-csv", "file", "filter-funnel", "filter-line", "flag", "folder", "folder-bar-graph", "folder-orders", "font-bold", "font-clear-format", "font-italic", "font-underline", "gear", "github", "globe", "graph-bar-chart", "graph-line-chart", "graph-pie-chart", "hazard", "hazard-outline", "headset-agent", "headset-mic", "heart-filled", "heart-outline", "help-question-mark", "hide", "history", "image", "keyboard-return", "license-approved", "license-certificate", "lightbulb", "link-add", "link-unlink", "link", "list-bulleted", "list-items", "list-numbered", "loading-big", "loading-empty", "loading-small", "location", "lock-unlock", "lock", "logo-facebook", "logo-instagram", "logo-linkedin", "logo-ll", "logo-metrc", "logo-plaid", "logo-x", "logo-youtube", "logout", "medical", "megaphone-sound", "megaphone", "menu", "message-dispute", "message-reply", "message", "minus", "mj-leaf", "money", "note-add", "note", "open-in-new", "paperclip", "paper-plane", "performance", "phone", "plus", "preview", "print", "product-menu-manage", "product-menu-search", "product-menu", "queue-add", "queue", "recent", "refresh", "register", "reply", "report-download", "sample", "save", "scale-law", "scale-weight", "search", "seed-cycle", "share", "shop-bag-browse", "shop-bag-reorder", "shop-bag", "shop-basket", "shop-cart-add", "shop-cart", "show", "sign-dollar", "sign-percent", "sort", "split", "star-filled", "star-outline", "storefront", "submit", "swap-horizontal", "swap-vertical", "tag-star", "tag", "test-results", "ticket-star", "ticket", "tool-dropper", "tool-wrench", "transfer", "trashcan", "truck", "upload", "user-add", "user-admin", "user-check", "user", "view-card", "view-detailed", "view-list", "warehouse", "working"];
89
89
 
90
90
  declare type StashCommonColor = `${StashCommonColors}`;
91
91
 
package/dist/IntegrationIcon.js CHANGED
@@ -1,4 +1,4 @@
1
- import { defineComponent as d, useCssModule as u, inject as f, computed as m, openBlock as _, createBlock as p, unref as s, normalizeClass as h } from "vue";
1
+ import { defineComponent as d, useCssModule as u, inject as f, computed as m, openBlock as _, createBlock as h, unref as s, normalizeClass as p } from "vue";
2
2
  import b from "lodash-es/uniqueId";
3
3
  import { I as x } from "./index-9e1095ef.js";
4
4
  import { _ as y } from "./_plugin-vue_export-helper-dad06003.js";
@@ -33,50 +33,48 @@ const N = [
33
33
  name: {},
34
34
  title: { default: "" },
35
35
  size: { default: "standard" },
36
- dense: { type: Boolean },
37
- small: { type: Boolean },
38
36
  staticPath: { default: "" }
39
37
  },
40
38
  setup(c) {
41
- const e = c, a = u(), o = f("stashOptions", {
39
+ const t = c, a = u(), o = f("stashOptions", {
42
40
  staticPath: "/static"
43
- }), l = m(() => e.staticPath || (o == null ? void 0 : o.staticPath)), i = (t) => {
44
- if (!t)
45
- return t;
41
+ }), i = m(() => t.staticPath || (o == null ? void 0 : o.staticPath)), l = (e) => {
42
+ if (!e)
43
+ return e;
46
44
  const n = document.createElement("use");
47
- n.setAttribute("href", `#${e.name}`);
48
- const r = t.querySelector(`#${e.name}`);
49
- return r ? (t.replaceChildren(r, n), t) : (t.insertBefore(n, t.firstChild), t);
45
+ n.setAttribute("href", `#${t.name}`);
46
+ const r = e.querySelector(`#${t.name}`);
47
+ return r ? (e.replaceChildren(r, n), e) : (e.insertBefore(n, e.firstChild), e);
50
48
  };
51
- return (t, n) => (_(), p(s(x), {
52
- id: e.id,
49
+ return (e, n) => (_(), h(s(x), {
50
+ id: t.id,
53
51
  role: "presentation",
54
- "aria-labelledby": e.id,
55
- class: h(["stash-icon", [
52
+ "aria-labelledby": t.id,
53
+ class: p(["stash-icon", [
56
54
  s(a).icon,
57
- `icon--${e.name}`,
55
+ `icon--${t.name}`,
58
56
  {
59
- [s(a).standard]: e.size === "standard",
60
- [s(a).dense]: e.size === "dense" || e.dense,
61
- [s(a).small]: e.size === "small" || e.small,
62
- [s(a).large]: e.size === "large"
57
+ [s(a).standard]: t.size === "standard",
58
+ [s(a).dense]: t.size === "dense",
59
+ [s(a).small]: t.size === "small",
60
+ [s(a).large]: t.size === "large"
63
61
  }
64
62
  ]]),
65
63
  "data-test": "stash-integration-icon",
66
- src: `${l.value}/spritesheet.svg`,
67
- title: e.title,
68
- "transform-source": i
64
+ src: `${i.value}/spritesheet.svg`,
65
+ title: t.title,
66
+ "transform-source": l
69
67
  }, null, 8, ["id", "aria-labelledby", "class", "src", "title"]));
70
68
  }
71
- }), I = "_icon_1x7lf_2", g = "_standard_1x7lf_8", k = "_dense_1x7lf_15", B = "_small_1x7lf_22", C = "_large_1x7lf_29", P = {
69
+ }), I = "_icon_1x7lf_2", g = "_standard_1x7lf_8", k = "_dense_1x7lf_15", C = "_small_1x7lf_22", P = "_large_1x7lf_29", S = {
72
70
  icon: I,
73
71
  standard: g,
74
72
  dense: k,
75
- small: B,
76
- large: C
77
- }, S = {
78
- $style: P
79
- }, j = /* @__PURE__ */ y(z, [["__cssModules", S]]);
73
+ small: C,
74
+ large: P
75
+ }, $ = {
76
+ $style: S
77
+ }, j = /* @__PURE__ */ y(z, [["__cssModules", $]]);
80
78
  export {
81
79
  j as default,
82
80
  N as integrationIconNames
package/dist/IntegrationIcon.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"IntegrationIcon.js","sources":["../src/components/IntegrationIcon/IntegrationIcon.types.ts","../src/components/IntegrationIcon/IntegrationIcon.vue"],"sourcesContent":["export const integrationIconNames = [\n 'batchbud',\n 'biotrack',\n 'blaze',\n 'canix',\n 'cannveya',\n 'cova',\n 'distru',\n 'dutchie',\n 'dynamics365',\n 'flourish',\n 'flowhub',\n 'growflow',\n 'maxq',\n 'meadow',\n 'metrc',\n 'quickbooks',\n 'roshi',\n 'sage-intacct',\n 'salesforce',\n 'stashstock',\n 'xero',\n 'zohobooks',\n] as const;\n\nexport type IntegrationIconName = typeof integrationIconNames[number];\n","<script lang=\"ts\">\n export * from './IntegrationIcon.types';\n</script>\n\n<script lang=\"ts\" setup>\n import uniqueId from 'lodash-es/uniqueId';\n import { computed, inject, useCssModule } from 'vue';\n import InlineSvg from 'vue-inline-svg';\n\n import { StashProvideState } from '../../../types/misc';\n import { IconSize } from '../Icon/Icon.types';\n import { IntegrationIconName } from './IntegrationIcon.types';\n\n export interface IntegrationIconProps {\n id?: string;\n\n /**\n * The filename of the icon that should be displayed\n */\n name: IntegrationIconName;\n\n /**\n * Accessible, short-text description for the icon. Not rendered as part of the graphic, but\n * browsers usually display it as a tooltip and screen readers use this.\n */\n title?: string;\n\n /**\n * The size of the icon\n * Options: large (32x32px), default (24x24px), dense (20x20px), small (14x14px).\n */\n size?: IconSize;\n\n /**\n * @deprecated Use the `size` prop with value \"dense\" instead\n */\n dense?: boolean;\n\n /**\n` * @deprecated Use the `size` prop with value \"small\" instead\n */\n small?: boolean;\n\n /**\n * Icon's custom static path. It'll default to either the staticPath defined on the library installation or '/static' if none are provided.\n */\n staticPath?: string;\n }\n\n defineOptions({\n name: 'll-icon',\n });\n\n const props = withDefaults(defineProps<IntegrationIconProps>(), {\n id: () => uniqueId('ll-icon-'),\n size: 'standard',\n title: '',\n staticPath: '',\n });\n const classes = useCssModule();\n const stashOptions = inject<Partial<StashProvideState>>('stashOptions', {\n staticPath: '/static',\n });\n\n const computedStaticPath = computed(() => {\n return props.staticPath || stashOptions?.staticPath;\n });\n\n /**\n * Event handler to add the use tag for the specific icon we need to the svg\n */\n const transformSvgSource = (svgElem: SVGElement) => {\n if (!svgElem) {\n return svgElem;\n }\n\n const useNode = document.createElement('use');\n useNode.setAttribute('href', `#${props.name}`);\n\n // Grab icon from sprite\n const symbolNode = svgElem.querySelector(`#${props.name}`);\n\n // This really shouldn't happen but if the spritesheet gets out of sync with the `IconName` type it could\n if (!symbolNode) {\n // still insert <use> element but it will not be found (this is more for tests than anything else)\n svgElem.insertBefore(useNode, svgElem.firstChild);\n return svgElem;\n }\n\n /**\n * Repeatedly inlining the entire spritesheet was causing failures in mobile Safari, and also\n * performance issues on long list pages where the svg was being inlined over and over.\n * Since the SVG is cached after the first request, this callback is just removing the unnecessary\n * <symbol> nodes to slim down the DOM manipulation and insertion.\n */\n // Replace all children with just the one <symbol> element and <use> element\n svgElem.replaceChildren(symbolNode, useNode);\n\n return svgElem;\n };\n</script>\n\n<!-- Use inline svg so that requests to pull the spritesheet are done via JS and avoid\n browser restrictions for different domains for svgs. inline svg also caches the requests\n so we don't load the spritesheet multiple times\n Reference: https://oreillymedia.github.io/Using_SVG/extras/ch10-cors.html -->\n<template>\n <InlineSvg\n :id=\"props.id\"\n role=\"presentation\"\n :aria-labelledby=\"props.id\"\n class=\"stash-icon\"\n :class=\"[\n classes.icon,\n `icon--${props.name}`,\n {\n [classes.standard]: props.size === 'standard',\n [classes.dense]: props.size === 'dense' || props.dense,\n [classes.small]: props.size === 'small' || props.small,\n [classes.large]: props.size === 'large',\n },\n ]\"\n data-test=\"stash-integration-icon\"\n :src=\"`${computedStaticPath}/spritesheet.svg`\"\n :title=\"props.title\"\n :transform-source=\"transformSvgSource\"\n />\n</template>\n\n<style module>\n .icon {\n display: inline-block;\n fill: currentcolor;\n vertical-align: middle;\n }\n\n .standard {\n height: 24px;\n min-height: 24px;\n min-width: 24px;\n width: 24px;\n }\n\n .dense {\n height: 20px;\n min-height: 20px;\n min-width: 20px;\n width: 20px;\n }\n\n .small {\n height: 14px;\n min-height: 14px;\n min-width: 14px;\n width: 14px;\n }\n\n .large {\n height: 32px;\n min-height: 32px;\n min-width: 32px;\n width: 32px;\n }\n</style>\n"],"names":["integrationIconNames","classes","useCssModule","stashOptions","inject","computedStaticPath","computed","props","transformSvgSource","svgElem","useNode","symbolNode"],"mappings":";;;;AAAO,MAAMA,IAAuB;AAAA,EAClC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF;;;;;;;;;;;;;iBCoCQC,IAAUC,KACVC,IAAeC,EAAmC,gBAAgB;AAAA,MACtE,YAAY;AAAA,IAAA,CACb,GAEKC,IAAqBC,EAAS,MAC3BC,EAAM,eAAcJ,KAAA,gBAAAA,EAAc,WAC1C,GAKKK,IAAqB,CAACC,MAAwB;AAClD,UAAI,CAACA;AACI,eAAAA;AAGH,YAAAC,IAAU,SAAS,cAAc,KAAK;AAC5C,MAAAA,EAAQ,aAAa,QAAQ,IAAIH,EAAM,MAAM;AAG7C,YAAMI,IAAaF,EAAQ,cAAc,IAAIF,EAAM,MAAM;AAGzD,aAAKI,KAaGF,EAAA,gBAAgBE,GAAYD,CAAO,GAEpCD,MAbGA,EAAA,aAAaC,GAASD,EAAQ,UAAU,GACzCA;AAAA,IAYF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
1
+ {"version":3,"file":"IntegrationIcon.js","sources":["../src/components/IntegrationIcon/IntegrationIcon.types.ts","../src/components/IntegrationIcon/IntegrationIcon.vue"],"sourcesContent":["export const integrationIconNames = [\n 'batchbud',\n 'biotrack',\n 'blaze',\n 'canix',\n 'cannveya',\n 'cova',\n 'distru',\n 'dutchie',\n 'dynamics365',\n 'flourish',\n 'flowhub',\n 'growflow',\n 'maxq',\n 'meadow',\n 'metrc',\n 'quickbooks',\n 'roshi',\n 'sage-intacct',\n 'salesforce',\n 'stashstock',\n 'xero',\n 'zohobooks',\n] as const;\n\nexport type IntegrationIconName = typeof integrationIconNames[number];\n","<script lang=\"ts\">\n export * from './IntegrationIcon.types';\n</script>\n\n<script lang=\"ts\" setup>\n import uniqueId from 'lodash-es/uniqueId';\n import { computed, inject, useCssModule } from 'vue';\n import InlineSvg from 'vue-inline-svg';\n\n import { StashProvideState } from '../../../types/misc';\n import { IconSize } from '../Icon/Icon.types';\n import { IntegrationIconName } from './IntegrationIcon.types';\n\n export interface IntegrationIconProps {\n id?: string;\n\n /**\n * The filename of the icon that should be displayed\n */\n name: IntegrationIconName;\n\n /**\n * Accessible, short-text description for the icon. Not rendered as part of the graphic, but\n * browsers usually display it as a tooltip and screen readers use this.\n */\n title?: string;\n\n /**\n * The size of the icon\n * Options: large (32x32px), default (24x24px), dense (20x20px), small (14x14px).\n */\n size?: IconSize;\n\n /**\n * Icon's custom static path. It'll default to either the staticPath defined on the library installation or '/static' if none are provided.\n */\n staticPath?: string;\n }\n\n defineOptions({\n name: 'll-icon',\n });\n\n const props = withDefaults(defineProps<IntegrationIconProps>(), {\n id: () => uniqueId('ll-icon-'),\n size: 'standard',\n title: '',\n staticPath: '',\n });\n const classes = useCssModule();\n const stashOptions = inject<Partial<StashProvideState>>('stashOptions', {\n staticPath: '/static',\n });\n\n const computedStaticPath = computed(() => {\n return props.staticPath || stashOptions?.staticPath;\n });\n\n /**\n * Event handler to add the use tag for the specific icon we need to the svg\n */\n const transformSvgSource = (svgElem: SVGElement) => {\n if (!svgElem) {\n return svgElem;\n }\n\n const useNode = document.createElement('use');\n useNode.setAttribute('href', `#${props.name}`);\n\n // Grab icon from sprite\n const symbolNode = svgElem.querySelector(`#${props.name}`);\n\n // This really shouldn't happen but if the spritesheet gets out of sync with the `IconName` type it could\n if (!symbolNode) {\n // still insert <use> element but it will not be found (this is more for tests than anything else)\n svgElem.insertBefore(useNode, svgElem.firstChild);\n return svgElem;\n }\n\n /**\n * Repeatedly inlining the entire spritesheet was causing failures in mobile Safari, and also\n * performance issues on long list pages where the svg was being inlined over and over.\n * Since the SVG is cached after the first request, this callback is just removing the unnecessary\n * <symbol> nodes to slim down the DOM manipulation and insertion.\n */\n // Replace all children with just the one <symbol> element and <use> element\n svgElem.replaceChildren(symbolNode, useNode);\n\n return svgElem;\n };\n</script>\n\n<!-- Use inline svg so that requests to pull the spritesheet are done via JS and avoid\n browser restrictions for different domains for svgs. inline svg also caches the requests\n so we don't load the spritesheet multiple times\n Reference: https://oreillymedia.github.io/Using_SVG/extras/ch10-cors.html -->\n<template>\n <InlineSvg\n :id=\"props.id\"\n role=\"presentation\"\n :aria-labelledby=\"props.id\"\n class=\"stash-icon\"\n :class=\"[\n classes.icon,\n `icon--${props.name}`,\n {\n [classes.standard]: props.size === 'standard',\n [classes.dense]: props.size === 'dense',\n [classes.small]: props.size === 'small',\n [classes.large]: props.size === 'large',\n },\n ]\"\n data-test=\"stash-integration-icon\"\n :src=\"`${computedStaticPath}/spritesheet.svg`\"\n :title=\"props.title\"\n :transform-source=\"transformSvgSource\"\n />\n</template>\n\n<style module>\n .icon {\n display: inline-block;\n fill: currentcolor;\n vertical-align: middle;\n }\n\n .standard {\n height: 24px;\n min-height: 24px;\n min-width: 24px;\n width: 24px;\n }\n\n .dense {\n height: 20px;\n min-height: 20px;\n min-width: 20px;\n width: 20px;\n }\n\n .small {\n height: 14px;\n min-height: 14px;\n min-width: 14px;\n width: 14px;\n }\n\n .large {\n height: 32px;\n min-height: 32px;\n min-width: 32px;\n width: 32px;\n }\n</style>\n"],"names":["integrationIconNames","classes","useCssModule","stashOptions","inject","computedStaticPath","computed","props","transformSvgSource","svgElem","useNode","symbolNode"],"mappings":";;;;AAAO,MAAMA,IAAuB;AAAA,EAClC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF;;;;;;;;;;;iBC0BQC,IAAUC,KACVC,IAAeC,EAAmC,gBAAgB;AAAA,MACtE,YAAY;AAAA,IAAA,CACb,GAEKC,IAAqBC,EAAS,MAC3BC,EAAM,eAAcJ,KAAA,gBAAAA,EAAc,WAC1C,GAKKK,IAAqB,CAACC,MAAwB;AAClD,UAAI,CAACA;AACI,eAAAA;AAGH,YAAAC,IAAU,SAAS,cAAc,KAAK;AAC5C,MAAAA,EAAQ,aAAa,QAAQ,IAAIH,EAAM,MAAM;AAG7C,YAAMI,IAAaF,EAAQ,cAAc,IAAIF,EAAM,MAAM;AAGzD,aAAKI,KAaGF,EAAA,gBAAgBE,GAAYD,CAAO,GAEpCD,MAbGA,EAAA,aAAaC,GAASD,EAAQ,UAAU,GACzCA;AAAA,IAYF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
package/dist/IntegrationIcon.vue.d.ts CHANGED
@@ -74,14 +74,6 @@ export declare interface IntegrationIconProps {
74
74
  * Options: large (32x32px), default (24x24px), dense (20x20px), small (14x14px).
75
75
  */
76
76
  size?: IconSize;
77
- /**
78
- * @deprecated Use the `size` prop with value "dense" instead
79
- */
80
- dense?: boolean;
81
- /**
82
- ` * @deprecated Use the `size` prop with value "small" instead
83
- */
84
- small?: boolean;
85
77
  /**
86
78
  * Icon's custom static path. It'll default to either the staticPath defined on the library installation or '/static' if none are provided.
87
79
  */
package/dist/QuickAction.vue.d.ts CHANGED
@@ -23,7 +23,7 @@ export default _default;
23
23
 
24
24
  declare type IconName = typeof iconNames[number];
25
25
 
26
- declare const iconNames: readonly ["action-dots", "activity", "alert-bell", "archive", "arrow-down", "arrow-left", "arrow-right", "arrow-up", "badge-discount", "badge-seller-elite", "badge-seller-power", "badge-seller-verified", "book-customer", "building-office", "bulk-add", "calendar-reschedule", "calendar", "caret-down", "caret-up", "change-log", "check", "chevron-down", "chevron-left", "chevron-right", "chevron-up", "circle-check", "circle-close", "circle-dollar", "circle-info", "circle-partial", "circle-percent", "circle-question-mark", "circle-status", "circle-warning", "clipboard-checkmark", "clipboard-inventory", "close", "combine", "compass", "contact", "contract", "copy", "credit-card", "credit-profile", "dashboard", "document-accept", "document-invoice", "document-recieved", "document-sent", "document-view", "document", "dolly", "download", "edit", "ellipsis", "envelope-open", "envelope", "equals", "export", "figma", "file-csv", "file", "filter-funnel", "filter-line", "flag", "folder", "folder-bar-graph", "folder-orders", "font-bold", "font-clear-format", "font-italic", "font-underline", "gear", "github", "globe", "graph-bar-chart", "graph-line-chart", "graph-pie-chart", "hazard", "hazard-outline", "headset-agent", "headset-mic", "heart-filled", "heart-outline", "help-question-mark", "hide", "history", "image", "keyboard-return", "license-approved", "license-certificate", "lightbulb", "link-add", "link-unlink", "link", "list-bulleted", "list-items", "list-numbered", "loading-big", "loading-small", "location", "lock-unlock", "lock", "logo-facebook", "logo-instagram", "logo-linkedin", "logo-ll", "logo-metrc", "logo-plaid", "logo-x", "logo-youtube", "logout", "medical", "megaphone-sound", "megaphone", "menu", "message-dispute", "message-reply", "message", "minus", "mj-leaf", "money", "note-add", "note", "open-in-new", "paperclip", "paper-plane", "performance", "phone", "plus", "preview", "print", "product-menu-manage", "product-menu-search", "product-menu", "queue-add", "queue", "recent", "refresh", "register", "reply", "report-download", "sample", "save", "scale-law", "scale-weight", "search", "seed-cycle", "share", "shop-bag-browse", "shop-bag-reorder", "shop-bag", "shop-basket", "shop-cart-add", "shop-cart", "show", "sign-dollar", "sign-percent", "sort", "split", "star-filled", "star-outline", "storefront", "submit", "swap-horizontal", "swap-vertical", "tag-star", "tag", "test-results", "ticket-star", "ticket", "tool-dropper", "tool-wrench", "transfer", "trashcan", "truck", "upload", "user-add", "user-admin", "user-check", "user", "view-card", "view-detailed", "view-list", "warehouse", "working"];
26
+ declare const iconNames: readonly ["action-dots", "activity", "alert-bell", "archive", "arrow-down", "arrow-left", "arrow-right", "arrow-up", "badge-discount", "badge-seller-elite", "badge-seller-power", "badge-seller-verified", "book-customer", "building-office", "bulk-add", "calendar-reschedule", "calendar", "caret-down", "caret-up", "change-log", "check", "chevron-down", "chevron-left", "chevron-right", "chevron-up", "circle-check", "circle-close", "circle-dollar", "circle-info", "circle-partial", "circle-percent", "circle-question-mark", "circle-status", "circle-warning", "clipboard-checkmark", "clipboard-inventory", "close", "combine", "compass", "contact", "contract", "copy", "credit-card", "credit-profile", "dashboard", "document-accept", "document-invoice", "document-recieved", "document-sent", "document-view", "document", "dolly", "download", "edit", "ellipsis", "envelope-open", "envelope", "equals", "export", "figma", "file-csv", "file", "filter-funnel", "filter-line", "flag", "folder", "folder-bar-graph", "folder-orders", "font-bold", "font-clear-format", "font-italic", "font-underline", "gear", "github", "globe", "graph-bar-chart", "graph-line-chart", "graph-pie-chart", "hazard", "hazard-outline", "headset-agent", "headset-mic", "heart-filled", "heart-outline", "help-question-mark", "hide", "history", "image", "keyboard-return", "license-approved", "license-certificate", "lightbulb", "link-add", "link-unlink", "link", "list-bulleted", "list-items", "list-numbered", "loading-big", "loading-empty", "loading-small", "location", "lock-unlock", "lock", "logo-facebook", "logo-instagram", "logo-linkedin", "logo-ll", "logo-metrc", "logo-plaid", "logo-x", "logo-youtube", "logout", "medical", "megaphone-sound", "megaphone", "menu", "message-dispute", "message-reply", "message", "minus", "mj-leaf", "money", "note-add", "note", "open-in-new", "paperclip", "paper-plane", "performance", "phone", "plus", "preview", "print", "product-menu-manage", "product-menu-search", "product-menu", "queue-add", "queue", "recent", "refresh", "register", "reply", "report-download", "sample", "save", "scale-law", "scale-weight", "search", "seed-cycle", "share", "shop-bag-browse", "shop-bag-reorder", "shop-bag", "shop-basket", "shop-cart-add", "shop-cart", "show", "sign-dollar", "sign-percent", "sort", "split", "star-filled", "star-outline", "storefront", "submit", "swap-horizontal", "swap-vertical", "tag-star", "tag", "test-results", "ticket-star", "ticket", "tool-dropper", "tool-wrench", "transfer", "trashcan", "truck", "upload", "user-add", "user-admin", "user-check", "user", "view-card", "view-detailed", "view-list", "warehouse", "working"];
27
27
 
28
28
  export declare interface QuickActionProps {
29
29
  /**
package/dist/SearchBar.js CHANGED
@@ -1,9 +1,9 @@
1
- import { defineComponent as C, useCssModule as B, useSlots as S, ref as m, openBlock as h, createBlock as f, normalizeClass as o, unref as r, withKeys as V, createSlots as w, withCtx as n, createVNode as u, createCommentVNode as I, renderSlot as L } from "vue";
2
- import { t as b } from "./locale.js";
3
- import _ from "./Button.js";
1
+ import { defineComponent as K, useCssModule as S, useSlots as V, ref as m, computed as I, openBlock as f, createBlock as b, normalizeClass as n, unref as c, withKeys as s, createSlots as T, withCtx as u, createVNode as p, createCommentVNode as L, renderSlot as W } from "vue";
2
+ import { t as _ } from "./locale.js";
3
+ import y from "./Button.js";
4
4
  import v from "./Icon.js";
5
- import T from "./Input.js";
6
- import { _ as j } from "./_plugin-vue_export-helper-dad06003.js";
5
+ import w from "./Input.js";
6
+ import { _ as M } from "./_plugin-vue_export-helper-dad06003.js";
7
7
  import "lodash-es/get";
8
8
  import "./Button.vue_used_vue_type_style_index_0_lang.module-a9290468.js";
9
9
  import "lodash-es/uniqueId";
@@ -14,92 +14,101 @@ import "./utils/i18n.js";
14
14
  import "./constants.js";
15
15
  import "./Field.vue_vue_type_script_setup_true_lang-e1e4ff03.js";
16
16
  import "./Label.vue_vue_type_script_setup_true_lang-4b02087f.js";
17
- const M = /* @__PURE__ */ C({
17
+ const N = /* @__PURE__ */ K({
18
18
  name: "ll-search-bar",
19
19
  __name: "SearchBar",
20
20
  props: {
21
21
  isLoading: { type: Boolean, default: !1 },
22
22
  isWorking: { type: Boolean, default: !1 },
23
23
  modelValue: { default: "" },
24
- placeholder: { default: b("ll.search") },
25
- label: { default: b("ll.search") },
24
+ placeholder: { default: _("ll.search") },
25
+ label: { default: _("ll.search") },
26
26
  hintText: { default: void 0 }
27
27
  },
28
28
  emits: ["search", "update:model-value"],
29
- setup(k, { emit: s }) {
30
- const e = k, c = B(), g = S(), t = m(e.modelValue), i = m();
31
- function d() {
32
- s("search", t.value);
29
+ setup(k, { emit: o }) {
30
+ const e = k, i = S(), g = V(), a = m(e.modelValue), h = m(), x = I(() => a.value ? 0 : -1);
31
+ function l() {
32
+ e.isLoading || e.isWorking || o("search", a.value);
33
33
  }
34
- function y() {
35
- var l, a;
36
- t.value = "", s("search", ""), s("update:model-value", ""), (a = (l = i.value) == null ? void 0 : l.inputEl) == null || a.focus();
34
+ function d() {
35
+ var r, t;
36
+ a.value = "", o("search", ""), o("update:model-value", ""), (t = (r = h.value) == null ? void 0 : r.inputEl) == null || t.focus();
37
37
  }
38
- function x() {
39
- s("update:model-value", t.value);
38
+ function C() {
39
+ o("update:model-value", a.value);
40
40
  }
41
- return (l, a) => (h(), f(T, {
41
+ return (r, t) => (f(), b(w, {
42
42
  ref_key: "stashInputRef",
43
- ref: i,
44
- modelValue: t.value,
43
+ ref: h,
44
+ modelValue: a.value,
45
45
  "onUpdate:modelValue": [
46
- a[0] || (a[0] = (p) => t.value = p),
47
- x
46
+ t[0] || (t[0] = (B) => a.value = B),
47
+ C
48
48
  ],
49
- class: o(["stash-search-bar", r(c)["search-input"]]),
49
+ class: n(["stash-search-bar", c(i)["search-input"]]),
50
50
  label: e.label,
51
51
  placeholder: e.placeholder,
52
52
  "hint-text": e.hintText,
53
53
  "data-test": "stash-search-bar",
54
- onKeyup: a[1] || (a[1] = V((p) => !e.isLoading && d(), ["enter"]))
55
- }, w({
56
- append: n(() => [
57
- t.value ? (h(), f(_, {
54
+ onKeyup: s(l, ["enter"])
55
+ }, T({
56
+ append: u(() => [
57
+ a.value ? (f(), b(y, {
58
58
  key: 0,
59
- class: o(r(c)["clear-button"]),
59
+ class: n(c(i)["clear-button"]),
60
60
  disabled: e.isLoading,
61
61
  "data-test": "stash-search-bar|clear-button",
62
- onClick: y
62
+ onClick: d,
63
+ onKeyup: [
64
+ s(d, ["enter"]),
65
+ s(d, ["space"])
66
+ ]
63
67
  }, {
64
- default: n(() => [
65
- u(v, { name: "close" })
68
+ default: u(() => [
69
+ p(v, { name: "close" })
66
70
  ]),
67
71
  _: 1
68
- }, 8, ["class", "disabled"])) : I("", !0),
69
- u(_, {
72
+ }, 8, ["class", "disabled", "onKeyup"])) : L("", !0),
73
+ p(y, {
74
+ tabindex: x.value,
70
75
  "data-test": "stash-search-bar|search-button",
71
76
  disabled: e.isLoading,
72
- class: o(r(c)["search-button"]),
73
- onClick: d
77
+ class: n(c(i)["search-button"]),
78
+ onClick: l,
79
+ onKeyup: [
80
+ s(l, ["enter"]),
81
+ s(l, ["space"])
82
+ ]
74
83
  }, {
75
- default: n(() => [
76
- u(v, {
77
- class: o({ "tw-animate-spin tw-text-teal-500": e.isWorking }),
78
- name: e.isWorking ? "working" : "search"
84
+ default: u(() => [
85
+ p(v, {
86
+ class: n({ "tw-animate-spin": e.isWorking }),
87
+ name: e.isWorking ? "loading-empty" : "search"
79
88
  }, null, 8, ["class", "name"])
80
89
  ]),
81
90
  _: 1
82
- }, 8, ["disabled", "class"])
91
+ }, 8, ["tabindex", "disabled", "class", "onKeyup"])
83
92
  ]),
84
93
  _: 2
85
94
  }, [
86
- r(g).hint ? {
95
+ c(g).hint ? {
87
96
  name: "hint",
88
- fn: n(() => [
89
- L(l.$slots, "hint")
97
+ fn: u(() => [
98
+ W(r.$slots, "hint")
90
99
  ]),
91
100
  key: "0"
92
101
  } : void 0
93
- ]), 1032, ["modelValue", "class", "label", "placeholder", "hint-text"]));
102
+ ]), 1032, ["modelValue", "class", "label", "placeholder", "hint-text", "onKeyup"]));
94
103
  }
95
- }), W = {
96
- "search-input": "_search-input_jm4a0_2",
97
- "clear-button": "_clear-button_jm4a0_8",
98
- "search-button": "_search-button_jm4a0_23"
104
+ }), R = {
105
+ "search-input": "_search-input_1e71y_2",
106
+ "clear-button": "_clear-button_1e71y_13",
107
+ "search-button": "_search-button_1e71y_40"
99
108
  }, $ = {
100
- $style: W
101
- }, X = /* @__PURE__ */ j(M, [["__cssModules", $]]);
109
+ $style: R
110
+ }, Z = /* @__PURE__ */ M(N, [["__cssModules", $]]);
102
111
  export {
103
- X as default
112
+ Z as default
104
113
  };
105
114
  //# sourceMappingURL=SearchBar.js.map
package/dist/SearchBar.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"SearchBar.js","sources":["../src/components/SearchBar/SearchBar.vue"],"sourcesContent":["<script lang=\"ts\" setup>\n import { ref, useCssModule, useSlots } from 'vue';\n\n import { t } from '../../locale';\n import Button from '../Button/Button.vue';\n import Icon from '../Icon/Icon.vue';\n import Input from '../Input/Input.vue';\n\n export interface SearchBarProps {\n /**\n * Indicates loading activity (for example async request) that should prevent search\n */\n isLoading?: boolean;\n\n /**\n * Sets a visual indicator that the search is active\n */\n isWorking?: boolean;\n\n /**\n * The search term\n */\n modelValue?: string;\n\n /**\n * Placeholder text for the input\n */\n placeholder?: string;\n\n /**\n * Label for search bar\n */\n label?: string;\n\n /**\n * Text below the input\n */\n hintText?: string;\n }\n\n defineOptions({\n name: 'll-search-bar',\n });\n\n const props = withDefaults(defineProps<SearchBarProps>(), {\n isLoading: false,\n isWorking: false,\n modelValue: '',\n placeholder: t('ll.search'),\n label: t('ll.search'),\n hintText: undefined,\n });\n\n const emit =\n defineEmits<{\n /**\n * Emitted when searching or clearing the search input\n */\n (e: 'search', searchTerm: string): void;\n\n /**\n * Emitted when the search term changes\n */\n (e: 'update:model-value', searchTerm: string): void;\n }>();\n\n const classes = useCssModule();\n const slots = useSlots();\n const searchTerm = ref(props.modelValue);\n const stashInputRef = ref<InstanceType<typeof Input>>();\n\n function onSearch() {\n emit('search', searchTerm.value);\n }\n\n function clearSearchTerm() {\n searchTerm.value = '';\n emit('search', '');\n emit('update:model-value', '');\n\n stashInputRef.value?.inputEl?.focus();\n }\n\n function handleChange() {\n emit('update:model-value', searchTerm.value);\n }\n</script>\n\n<template>\n <Input\n ref=\"stashInputRef\"\n v-model=\"searchTerm\"\n class=\"stash-search-bar\"\n :class=\"classes['search-input']\"\n :label=\"props.label\"\n :placeholder=\"props.placeholder\"\n :hint-text=\"props.hintText\"\n data-test=\"stash-search-bar\"\n @update:model-value=\"handleChange\"\n @keyup.enter=\"!props.isLoading && onSearch()\"\n >\n <template #append>\n <Button\n v-if=\"searchTerm\"\n :class=\"classes['clear-button']\"\n :disabled=\"props.isLoading\"\n data-test=\"stash-search-bar|clear-button\"\n @click=\"clearSearchTerm\"\n >\n <Icon name=\"close\" />\n </Button>\n <Button\n data-test=\"stash-search-bar|search-button\"\n :disabled=\"props.isLoading\"\n :class=\"classes['search-button']\"\n @click=\"onSearch\"\n >\n <Icon\n :class=\"{ 'tw-animate-spin tw-text-teal-500': props.isWorking }\"\n :name=\"props.isWorking ? 'working' : 'search'\"\n />\n </Button>\n </template>\n <template v-if=\"slots.hint\" #hint>\n <!-- @slot Overrides the Input hint-text prop -->\n <slot name=\"hint\"></slot>\n </template>\n </Input>\n</template>\n\n<style module>\n .search-input :global(.stash-input-append) {\n display: flex;\n justify-content: flex-end;\n width: 72px; /* double the the default width of 36px */\n }\n\n .search-input :global(.stash-input-append) .clear-button {\n color: var(--color-ice-700);\n height: theme('spacing.9');\n margin: 0;\n min-width: theme('spacing.9');\n padding: 0;\n width: theme('spacing.9');\n background: none;\n }\n\n .search-input :global(.stash-input-append) .clear-button:disabled {\n color: var(--color-ice-500);\n cursor: default;\n }\n\n .search-input :global(.stash-input-append) .search-button {\n border-bottom-left-radius: 0;\n border-left: none;\n border-top-left-radius: 0;\n min-width: theme('spacing.9');\n padding: 0 theme('spacing[1.5]');\n width: theme('spacing.9');\n }\n\n .search-input :global(.stash-input-append) .search-button:focus {\n box-shadow: none;\n }\n\n .search-input :global(.stash-input-append) .search-button:disabled {\n border-color: var(--color-ice-500);\n }\n</style>\n"],"names":["classes","useCssModule","slots","useSlots","searchTerm","ref","props","stashInputRef","onSearch","emit","clearSearchTerm","_b","_a","handleChange"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;iBAkEQA,IAAUC,KACVC,IAAQC,KACRC,IAAaC,EAAIC,EAAM,UAAU,GACjCC,IAAgBF;AAEtB,aAASG,IAAW;AACb,MAAAC,EAAA,UAAUL,EAAW,KAAK;AAAA,IACjC;AAEA,aAASM,IAAkB;;AACzB,MAAAN,EAAW,QAAQ,IACnBK,EAAK,UAAU,EAAE,GACjBA,EAAK,sBAAsB,EAAE,IAEfE,KAAAC,IAAAL,EAAA,UAAA,gBAAAK,EAAO,YAAP,QAAAD,EAAgB;AAAA,IAChC;AAEA,aAASE,IAAe;AACjB,MAAAJ,EAAA,sBAAsBL,EAAW,KAAK;AAAA,IAC7C;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
1
+ {"version":3,"file":"SearchBar.js","sources":["../src/components/SearchBar/SearchBar.vue"],"sourcesContent":["<script lang=\"ts\" setup>\n import { computed, ref, useCssModule, useSlots } from 'vue';\n\n import { t } from '../../locale';\n import Button from '../Button/Button.vue';\n import Icon from '../Icon/Icon.vue';\n import Input from '../Input/Input.vue';\n\n export interface SearchBarProps {\n /**\n * Indicates loading activity (for example async request) that should prevent search\n */\n isLoading?: boolean;\n\n /**\n * Sets a visual indicator that the search is active\n */\n isWorking?: boolean;\n\n /**\n * The search term\n */\n modelValue?: string;\n\n /**\n * Placeholder text for the input\n */\n placeholder?: string;\n\n /**\n * Label for search bar\n */\n label?: string;\n\n /**\n * Text below the input\n */\n hintText?: string;\n }\n\n defineOptions({\n name: 'll-search-bar',\n });\n\n const props = withDefaults(defineProps<SearchBarProps>(), {\n isLoading: false,\n isWorking: false,\n modelValue: '',\n placeholder: t('ll.search'),\n label: t('ll.search'),\n hintText: undefined,\n });\n\n const emit =\n defineEmits<{\n /**\n * Emitted when searching or clearing the search input\n */\n (e: 'search', searchTerm: string): void;\n\n /**\n * Emitted when the search term changes\n */\n (e: 'update:model-value', searchTerm: string): void;\n }>();\n\n const classes = useCssModule();\n const slots = useSlots();\n const searchTerm = ref(props.modelValue);\n const stashInputRef = ref<InstanceType<typeof Input>>();\n\n const searchTabIndex = computed(() => (searchTerm.value ? 0 : -1));\n\n function onSearch() {\n if (props.isLoading || props.isWorking) {\n return;\n }\n emit('search', searchTerm.value);\n }\n\n function clearSearchTerm() {\n searchTerm.value = '';\n emit('search', '');\n emit('update:model-value', '');\n\n stashInputRef.value?.inputEl?.focus();\n }\n\n function handleChange() {\n emit('update:model-value', searchTerm.value);\n }\n</script>\n\n<template>\n <Input\n ref=\"stashInputRef\"\n v-model=\"searchTerm\"\n class=\"stash-search-bar\"\n :class=\"classes['search-input']\"\n :label=\"props.label\"\n :placeholder=\"props.placeholder\"\n :hint-text=\"props.hintText\"\n data-test=\"stash-search-bar\"\n @update:model-value=\"handleChange\"\n @keyup.enter=\"onSearch\"\n >\n <template #append>\n <Button\n v-if=\"searchTerm\"\n :class=\"classes['clear-button']\"\n :disabled=\"props.isLoading\"\n data-test=\"stash-search-bar|clear-button\"\n @click=\"clearSearchTerm\"\n @keyup.enter=\"clearSearchTerm\"\n @keyup.space=\"clearSearchTerm\"\n >\n <Icon name=\"close\" />\n </Button>\n <Button\n :tabindex=\"searchTabIndex\"\n data-test=\"stash-search-bar|search-button\"\n :disabled=\"props.isLoading\"\n :class=\"classes['search-button']\"\n @click=\"onSearch\"\n @keyup.enter=\"onSearch\"\n @keyup.space=\"onSearch\"\n >\n <Icon :class=\"{ 'tw-animate-spin': props.isWorking }\" :name=\"props.isWorking ? 'loading-empty' : 'search'\" />\n </Button>\n </template>\n <template v-if=\"slots.hint\" #hint>\n <!-- @slot Overrides the Input hint-text prop -->\n <slot name=\"hint\"></slot>\n </template>\n </Input>\n</template>\n\n<style module>\n .search-input input:hover {\n border: 1px solid var(--color-blue-500);\n }\n\n .search-input :global(.stash-input-append) {\n display: flex;\n justify-content: flex-end;\n width: 72px; /* double the the default width of 36px */\n overflow: visible;\n }\n\n .search-input :global(.stash-input-append) .clear-button {\n color: var(--color-ice-700);\n height: theme('spacing.9');\n min-width: theme('spacing.9');\n width: theme('spacing.9');\n background: none;\n display: flex;\n align-items: center;\n justify-content: center;\n\n &:focus-visible {\n outline: none;\n box-shadow: none;\n\n & svg {\n border-radius: theme(borderRadius.DEFAULT);\n\n @apply tw-ring-4 tw-ring-blue-500 tw-ring-opacity-15;\n }\n }\n }\n\n .search-input :global(.stash-input-append) .clear-button:disabled {\n color: var(--color-ice-500);\n cursor: default;\n }\n\n .search-input :global(.stash-input-append) .search-button {\n border-bottom-left-radius: 0;\n border-top-left-radius: 0;\n height: theme('spacing.9');\n min-width: theme('spacing.9');\n width: theme('spacing.9');\n display: flex;\n align-items: center;\n justify-content: center;\n\n &:focus {\n box-shadow: none;\n }\n\n &:disabled {\n border-color: var(--color-ice-500);\n }\n\n &:hover {\n background-color: var(--color-blue-600);\n }\n\n &:active {\n background-color: var(--color-blue-700);\n }\n\n &:focus-visible {\n outline: none;\n border: 1px solid var(--color-blue-900);\n /* Simulating a bigger border so the design does not break */\n box-shadow: inset 0 0 0 1px var(--color-blue-900), 0 0 0 4px rgb(0 114 240 / 15%); /* Unfortunatelly, we have to use RGBA to make the shadow transparent, this is blue-500 */\n }\n }\n</style>\n"],"names":["classes","useCssModule","slots","useSlots","searchTerm","ref","props","stashInputRef","searchTabIndex","computed","onSearch","emit","clearSearchTerm","_b","_a","handleChange"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;iBAkEQA,IAAUC,KACVC,IAAQC,KACRC,IAAaC,EAAIC,EAAM,UAAU,GACjCC,IAAgBF,KAEhBG,IAAiBC,EAAS,MAAOL,EAAW,QAAQ,IAAI,EAAG;AAEjE,aAASM,IAAW;AACd,MAAAJ,EAAM,aAAaA,EAAM,aAGxBK,EAAA,UAAUP,EAAW,KAAK;AAAA,IACjC;AAEA,aAASQ,IAAkB;;AACzB,MAAAR,EAAW,QAAQ,IACnBO,EAAK,UAAU,EAAE,GACjBA,EAAK,sBAAsB,EAAE,IAEfE,KAAAC,IAAAP,EAAA,UAAA,gBAAAO,EAAO,YAAP,QAAAD,EAAgB;AAAA,IAChC;AAEA,aAASE,IAAe;AACjB,MAAAJ,EAAA,sBAAsBP,EAAW,KAAK;AAAA,IAC7C;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}