@sula-tech/webcomponents 0.20.1 → 0.22.0

package/dist/esm/{sula-menu.model-Cs9RR1ZV.js → sula-calendar.model-BbsLJDfp.js}

@@ -10,7 +10,13 @@ var SulaMenuLabelOverflow;
     SulaMenuLabelOverflow["Wrap"] = "wrap";
 })(SulaMenuLabelOverflow || (SulaMenuLabelOverflow = {}));
 
-export { SulaMenuDensity as S, SulaMenuLabelOverflow as a };
-//# sourceMappingURL=sula-menu.model-Cs9RR1ZV.js.map
+var SulaCalendarStatus;
+(function (SulaCalendarStatus) {
+    SulaCalendarStatus["Default"] = "default";
+    SulaCalendarStatus["Error"] = "error";
+})(SulaCalendarStatus || (SulaCalendarStatus = {}));
 
-//# sourceMappingURL=sula-menu.model-Cs9RR1ZV.js.map
+export { SulaMenuDensity as S, SulaMenuLabelOverflow as a, SulaCalendarStatus as b };
+//# sourceMappingURL=sula-calendar.model-BbsLJDfp.js.map
+
+//# sourceMappingURL=sula-calendar.model-BbsLJDfp.js.map

package/dist/esm/sula-calendar.model-BbsLJDfp.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"sula-calendar.model-BbsLJDfp.js","sources":["src/components/sula-menu/model/sula-menu.model.ts","src/components/sula-calendar/model/sula-calendar.model.ts"],"sourcesContent":["export enum SulaMenuDensity {\n  Compact = 'compact',\n  Default = 'default',\n  Comfortable = 'comfortable',\n}\n\nexport enum SulaMenuLabelOverflow {\n  Truncate = 'truncate',\n  Wrap = 'wrap',\n}\n\nexport interface SulaMenuMainItem extends SulaMenuItem {\n  children?: SulaMenuSubItem[];\n}\n\nexport interface SulaMenuSubItem extends SulaMenuItem {\n  children?: SulaMenuItem[];\n}\n\nexport interface SulaMenuItem {\n  id: string;\n  label: string;\n  icon: string;\n  hidden?: boolean;\n  open?: boolean;\n  route?: string;\n  expanded?: boolean;\n  selected?: boolean;\n  disabled?: boolean;\n}\n\nexport type SelectedMenuItem = {\n  id: string;\n  parentItemId?: string;\n  parentChildId?: string;\n};\n","export enum SulaCalendarStatus {\n  Default = 'default',\n  Error = 'error',\n}\n\nexport interface SulaCalendarDay {\n  date: Date;\n  day: number;\n  isCurrentMonth: boolean;\n  isSelected: boolean;\n  isRangeStart: boolean;\n  isRangeEnd: boolean;\n  isInRange: boolean;\n  isRangePreview: boolean;\n  isToday: boolean;\n  isDisabled: boolean;\n}\n\nexport interface SulaCalendarRange {\n  start: string;\n  end: string;\n}\n\nexport interface SulaCalendarWeekday {\n  short: string;\n  long: string;\n}\n\nexport interface SulaCalendarMonthChange {\n  month: number;\n  year: number;\n}\n"],"names":[],"mappings":"IAAY;AAAZ,CAAA,UAAY,eAAe,EAAA;AACzB,IAAA,eAAA,CAAA,SAAA,CAAA,GAAA,SAAmB;AACnB,IAAA,eAAA,CAAA,SAAA,CAAA,GAAA,SAAmB;AACnB,IAAA,eAAA,CAAA,aAAA,CAAA,GAAA,aAA2B;AAC7B,CAAC,EAJW,eAAe,KAAf,eAAe,GAI1B,EAAA,CAAA,CAAA;IAEW;AAAZ,CAAA,UAAY,qBAAqB,EAAA;AAC/B,IAAA,qBAAA,CAAA,UAAA,CAAA,GAAA,UAAqB;AACrB,IAAA,qBAAA,CAAA,MAAA,CAAA,GAAA,MAAa;AACf,CAAC,EAHW,qBAAqB,KAArB,qBAAqB,GAGhC,EAAA,CAAA,CAAA;;ICTW;AAAZ,CAAA,UAAY,kBAAkB,EAAA;AAC5B,IAAA,kBAAA,CAAA,SAAA,CAAA,GAAA,SAAmB;AACnB,IAAA,kBAAA,CAAA,OAAA,CAAA,GAAA,OAAe;AACjB,CAAC,EAHW,kBAAkB,KAAlB,kBAAkB,GAG7B,EAAA,CAAA,CAAA;;;;"}

package/dist/esm/sula-toast-stack.entry.js

@@ -270,7 +270,7 @@ const SulaToastStack = class {
     render() {
         const expanded = this.expanded;
         const visibleItems = this.visibleItems;
-        return (h(Host, { key: 'e52aeb1dd9f0d54498a4c7a0ad2300cdc5d24484' }, h("section", { key: '7c829968e841616450c308571cd1b60341b3c38b', ref: el => (this.region = el), role: "region", "aria-label": "Notifica\u00E7\u00F5es", tabIndex: 0, class: "toast-region w-full rounded-sm focus-visible:outline focus-visible:outline-2 focus-visible:outline-feedback-informational focus-visible:outline-offset-2", onMouseEnter: () => {
+        return (h(Host, { key: 'f80b3b3f370e40ba87a261825af7ee9f55fe99dc' }, h("section", { key: 'd5a233e0b204060a1bde1bb09eac204a5c8f5ca7', ref: el => (this.region = el), role: "region", "aria-label": "Notifica\u00E7\u00F5es", tabIndex: 0, class: "toast-region w-full rounded-sm focus-visible:outline focus-visible:outline-2 focus-visible:outline-feedback-informational focus-visible:outline-offset-2", onMouseEnter: () => {
                 if (!this.noHover)
                     this.hovering = true;
             }, onMouseLeave: () => (this.hovering = false), onPointerDown: () => {
@@ -279,7 +279,7 @@ const SulaToastStack = class {
             }, onKeyDown: () => {
                 this.keyboardInteraction = true;
                 this.stopRetainingPointerExpansion();
-            }, onFocusin: () => (this.focused = true), onFocusout: this.handleFocusOut }, h("div", { key: '2327880499750943034cf47d8f2ea2dfd13d0e5a', ref: el => (this.list = el), class: { 'toast-list relative flex flex-col gap-12': true, 'toast-list--collapsed': !expanded }, style: {
+            }, onFocusin: () => (this.focused = true), onFocusout: this.handleFocusOut }, h("div", { key: 'e409f3009f2c19839304f06b05b0409d9cc6a819', ref: el => (this.list = el), class: { 'toast-list relative flex flex-col gap-12': true, 'toast-list--collapsed': !expanded }, style: {
                 '--toast-layer-offset': `${Math.max(0, visibleItems.length - 1) * LAYER_OFFSET}px`,
             } }, visibleItems.map((item, index) => {
             var _a, _b, _c, _d;
@@ -293,9 +293,9 @@ const SulaToastStack = class {
                     '--toast-depth': String(depth),
                     '--toast-width': `${100 - Math.min(depth, MAX_VISIBLE_LAYERS - 1) * LAYER_WIDTH_STEP}%`,
                 } }, h("sula-toast", { toastTitle: item.title, message: (_a = item.message) !== null && _a !== void 0 ? _a : '', type: item.type, icon: item.icon, actionText: (_b = item.actionText) !== null && _b !== void 0 ? _b : '', closable: (_c = item.closable) !== null && _c !== void 0 ? _c : true, duration: item.duration, closeLabel: (_d = item.closeLabel) !== null && _d !== void 0 ? _d : 'Fechar notificação', paused: covered || this.hovering || this.focused || this.retainingPointerExpansion, announcement: "off", animated: depth === 0, onToastDismissRequested: event => this.dismiss(event, item.id), onToastAction: event => this.action(event, item.id) })));
-        }))), h("div", { key: 'be446beb46594f14b6079a5a0649c9bf3a17b0cb', class: "sr-only", role: "status", "aria-live": "polite", "aria-atomic": "false", "aria-relevant": "additions text" }, this.announcements
+        }))), h("div", { key: '2b2eadddfde8a784d9c2f1c7f431d82619eb57dc', class: "sr-only", role: "status", "aria-live": "polite", "aria-atomic": "false", "aria-relevant": "additions text" }, this.announcements
             .filter(record => record.priority === 'polite')
-            .map(record => (h("p", { key: record.version }, record.text)))), h("div", { key: '5d9e871c11e91fb293f22c92ddd5a590517576f1', class: "sr-only", role: "alert", "aria-live": "assertive", "aria-atomic": "false", "aria-relevant": "additions text" }, this.announcements
+            .map(record => (h("p", { key: record.version }, record.text)))), h("div", { key: '0207426e568669405be5a1d99c47338d72607bdf', class: "sr-only", role: "alert", "aria-live": "assertive", "aria-atomic": "false", "aria-relevant": "additions text" }, this.announcements
             .filter(record => record.priority === 'assertive')
             .map(record => (h("p", { key: record.version }, record.text))))));
     }

package/dist/esm/sula-toast.entry.js

@@ -170,10 +170,10 @@ const SulaToast = class {
     }
     render() {
         const intent = this.intent;
-        return (h(Host, { key: 'af689f4f1497431d4a9664ddb5452079f09ef03f', onMouseEnter: () => this.setHover(true), onMouseLeave: () => this.setHover(false), onFocusin: () => {
+        return (h(Host, { key: 'be9ec64bd756310cbc5a41d218ff47c53f04de54', onMouseEnter: () => this.setHover(true), onMouseLeave: () => this.setHover(false), onFocusin: () => {
                 this.focused = true;
                 this.updateTimeout();
-            }, onFocusout: this.handleFocusOut }, h("div", { key: '51d418a2bcd9610ec55551828cff4aab8c085a62', part: "container", class: `toast-surface relative isolate box-border flex items-center w-full p-16 gap-12 rounded-sm border bg-opacity-toast ${intent.border} ${this.animated ? 'toast-surface--animated' : ''}`, style: { '--toast-border-color': intent.borderColor } }, this.icon && (h("div", { key: '383e8204c8f6cbfd13270a1543baea5273149bca', part: "icon", "aria-hidden": "true", class: `flex shrink-0 items-center justify-center w-44 h-44 rounded-xxl ${intent.background}` }, h("sula-icon", { key: 'b2a17f14dbfbd6975b29ccb63ee7a76705e20e12', icon: this.icon, customClass: `text-2xl ${intent.color}`, class: "flex leading-none" }))), h("div", { key: '8bd8d7c43b25d9c408b5e0e107fc3d5f78d92c4a', part: "content", class: `flex min-w-0 flex-1 flex-col gap-8 ${this.closable ? 'pr-48' : ''}` }, h("div", { key: 'fe41d0b855c17fb145c760815abc5fdd64e1dbc4', class: "flex flex-col gap-4" }, this.toastTitle && (h("p", { key: '0403d060fe5d28161bbf29cb937b8a0d90daf17d', class: "toast-copy toast-title text-label-medium-bold text-text-primary", title: this.toastTitle }, this.toastTitle)), this.message && (h("p", { key: 'b163c773c6a82f5dbb455770708ac9690efbffbe', class: "toast-copy toast-message text-label-medium-regular text-text-secondary", title: this.message }, this.message))), this.actionText && (h("button", { key: '07890efac226f3d8ad4dfa71422781ad94ab9be8', type: "button", class: `toast-copy toast-action self-start text-left text-label-medium-bold text-text-link underline rounded ${FOCUS_RING_CLASSES}`, title: this.actionText, onClick: () => this.toastAction.emit() }, this.actionText))), this.closable && (h("button", { key: 'da40e440a9b8efb785bb808718ae51d72c4550bc', part: "close-button", type: "button", "aria-label": this.closeLabel, class: `absolute top-16 right-16 flex items-center justify-center w-24 h-24 rounded ${intent.color} ${FOCUS_RING_CLASSES}`, onClick: () => this.toastDismissRequested.emit({ reason: 'close' }) }, h("sula-icon", { key: 'a326223db3ae4de7e0c2139b7b1b5f2ce3bf79ba', "aria-hidden": "true", icon: "ph ph-x", customClass: "text-2xl", class: "flex leading-none" }))), h("svg", { key: '6f0c0004ff519d857abcbed244215c9f2b9b7598', class: "toast-border", "aria-hidden": "true", focusable: "false" }, h("rect", { key: 'a2fec270e4bfc1afe1567e492c915304d6bd4f85', class: "toast-border__path", pathLength: "1" }))), h("div", { key: 'be19cd8661299b03aebc46d9eb94c53f948924f4', class: "sr-only", role: "status", "aria-live": "polite", "aria-atomic": "true" }, this.announcement === 'polite' ? this.announcedText : ''), h("div", { key: '2582e166e21d087d1e3f2b66d39b2a05d4d8bbb2', class: "sr-only", role: "alert", "aria-live": "assertive", "aria-atomic": "true" }, this.announcement === 'assertive' ? this.announcedText : '')));
+            }, onFocusout: this.handleFocusOut }, h("div", { key: '712abcedfd6615db3de20ac66acd872f34db2737', part: "container", class: `toast-surface relative isolate box-border flex items-center w-full p-16 gap-12 rounded-sm border bg-opacity-toast ${intent.border} ${this.animated ? 'toast-surface--animated' : ''}`, style: { '--toast-border-color': intent.borderColor } }, this.icon && (h("div", { key: '656903d50bf672c3058c1ff1aa564a8f25ec4a71', part: "icon", "aria-hidden": "true", class: `flex shrink-0 items-center justify-center w-44 h-44 rounded-xxl ${intent.background}` }, h("sula-icon", { key: '649ec85c3ffe3c1d8ba49301df36dafcef68df19', icon: this.icon, customClass: `text-2xl ${intent.color}`, class: "flex leading-none" }))), h("div", { key: '7c0259e7e101e37f740fc44f56ed6b8aba89ebce', part: "content", class: `flex min-w-0 flex-1 flex-col gap-8 ${this.closable ? 'pr-48' : ''}` }, h("div", { key: 'a8d4be58976ba60577b72fb18cf5adde5302e4a9', class: "flex flex-col gap-4" }, this.toastTitle && (h("p", { key: 'a68c9bef629be007bf7e8e2fe9e171103f0da293', class: "toast-copy toast-title text-label-medium-bold text-text-primary", title: this.toastTitle }, this.toastTitle)), this.message && (h("p", { key: 'fd3df25e0dbb73a322e55f5464699c6b36dc558c', class: "toast-copy toast-message text-label-medium-regular text-text-secondary", title: this.message }, this.message))), this.actionText && (h("button", { key: 'a64c83ed689f099928ed8e89ddfbd1a29f9d7d37', type: "button", class: `toast-copy toast-action self-start text-left text-label-medium-bold text-text-link underline rounded ${FOCUS_RING_CLASSES}`, title: this.actionText, onClick: () => this.toastAction.emit() }, this.actionText))), this.closable && (h("button", { key: 'ec4cb316444689bc05aa176f86b51c1b6d5e88af', part: "close-button", type: "button", "aria-label": this.closeLabel, class: `absolute top-16 right-16 flex items-center justify-center w-24 h-24 rounded ${intent.color} ${FOCUS_RING_CLASSES}`, onClick: () => this.toastDismissRequested.emit({ reason: 'close' }) }, h("sula-icon", { key: '9be25e6384c6a154a359a15ab2ec0d732befe282', "aria-hidden": "true", icon: "ph ph-x", customClass: "text-2xl", class: "flex leading-none" }))), h("svg", { key: '8996d6309d39d79e5db7671fcbd8c1b6cbfeda5c', class: "toast-border", "aria-hidden": "true", focusable: "false" }, h("rect", { key: '141c0776c32283daef59b261b04e4059beee3aca', class: "toast-border__path", pathLength: "1" }))), h("div", { key: '318987642827371f72b5754827c8019a6a1b968a', class: "sr-only", role: "status", "aria-live": "polite", "aria-atomic": "true" }, this.announcement === 'polite' ? this.announcedText : ''), h("div", { key: '6c1e12a9c15f11afb7f517d911441a868978c2ba', class: "sr-only", role: "alert", "aria-live": "assertive", "aria-atomic": "true" }, this.announcement === 'assertive' ? this.announcedText : '')));
     }
     get hostElement() { return getElement(this); }
     static get watchers() { return {

package/dist/esm/webcomponents.js

@@ -16,7 +16,7 @@ var patchBrowser = () => {
 
 patchBrowser().then(async (options) => {
   await globalScripts();
-  return bootstrapLazy([["sula-avatar_31",[[1,"sula-icon-picker",{"label":[1025],"required":[1028],"disabled":[1028],"error":[1025],"value":[1025],"showSearch":[4,"show-search"],"searchPlaceholder":[1,"search-placeholder"],"icons":[1040],"maxVisibleIcons":[2,"max-visible-icons"],"menuMaxHeight":[2,"menu-max-height"],"selectedIcon":[32],"searchTerm":[32]},null,{"value":["handleValueChange"],"icons":["handleIconsChange"]}],[1,"sula-modal",{"opened":[1028],"blockBodyScroll":[1028,"block-body-scroll"],"closeOnClickOutside":[1028,"close-on-click-outside"],"type":[1],"headerIcon":[1,"header-icon"],"modalTitle":[1,"modal-title"],"promoImage":[1,"promo-image"],"subTitle":[1,"sub-title"],"primaryButtonText":[1,"primary-button-text"],"secondaryButtonText":[1,"secondary-button-text"],"slotOverflow":[1,"slot-overflow"],"isAnimating":[32],"shouldRender":[32]},null,{"opened":["handleOpenedChange"]}],[1,"sula-chip",{"text":[1025],"appearance":[1025],"disabled":[1028],"items":[1040],"selected":[1028],"isFocused":[32],"showItems":[32]},[[4,"click","handleDocumentClick"]]],[1,"sula-avatar",{"size":[1],"imageUrl":[1,"image-url"],"text":[1],"icon":[1]}],[1,"sula-badge",{"status":[1025],"size":[1025],"type":[1025],"text":[1025],"icon":[1025],"hasSlotContent":[32]}],[1,"sula-breadcrumb",{"items":[1040]}],[1,"sula-checkbox",{"type":[1025],"label":[1025],"subTitle":[1025,"sub-title"],"disabled":[1028],"checked":[1028],"isFocus":[32]}],[1,"sula-menu",{"menuTitle":[1,"menu-title"],"image":[1],"width":[1],"density":[1],"labelOverflow":[1,"label-overflow"],"items":[1040],"collapsed":[32],"previewExpanded":[32],"selectedItem":[32]},null,{"items":["syncSelectedItemFromItems"]}],[1,"sula-progress-bar",{"appearance":[1025],"state":[1025],"topLabel":[1025,"top-label"],"bottomLabel":[1025,"bottom-label"],"progress":[1026],"showProgress":[1028,"show-progress"]},null,{"progress":["validateProgress"]}],[1,"sula-segmented-control",{"items":[1040],"type":[1025],"size":[1025],"color":[1025]}],[1,"sula-tag",{"label":[1025],"icon":[1025],"iconStatus":[1025,"icon-status"],"size":[1025],"appearance":[1025],"fontWeight":[1025,"font-weight"]}],[1,"sula-textfield",{"value":[1025],"type":[1],"status":[1025],"label":[1],"placeholder":[1],"disabled":[1028],"helpText":[1,"help-text"],"maxLength":[2,"max-length"],"icon":[1],"maskPattern":[1,"mask-pattern"],"maskPatternSwitchMaxLength":[2,"mask-pattern-switch-max-length"],"inputIsOpen":[32],"textValue":[32],"showPassword":[32],"inputIsFocused":[32]},[[4,"click","handleClick"]],{"value":["watchValueHandler"],"maskPattern":["watchMaskPatternHandler"],"maskPatternSwitchMaxLength":["watchMaskPatternSwitchMaxLengthHandler"]}],[1,"sula-tiles",{"type":[1],"size":[1],"ellipsis":[4],"icon":[1],"text":[1],"subText":[1,"sub-text"],"disabled":[4]}],[1,"sula-timeline-list",{"sulaTimelineList":[1040,"sula-timeline-list"]}],[1,"sula-toggle",{"selected":[1028],"buttonDisabled":[1028,"button-disabled"],"icon":[1]}],[1,"sula-tooltip",{"text":[1],"position":[1],"icon":[1],"iconClass":[1,"icon-class"],"focused":[4],"trigger":[1],"appendToBody":[4,"append-to-body"],"isVisible":[32]},null,{"text":["handleTextChange"]}],[1,"sula-radio-button",{"checked":[1028],"label":[1025],"disabled":[1028],"radioIsFocus":[32]}],[1,"sula-switch",{"type":[1025],"active":[1028],"disabled":[1028],"label":[1025],"subTitle":[1025,"sub-title"],"responsive":[4],"isFocus":[32]}],[4,"sula-table",{"density":[1],"equalWidth":[4,"equal-width"],"fullWidth":[4,"full-width"]}],[4,"sula-table-body"],[4,"sula-table-cell"],[4,"sula-table-head-cell"],[4,"sula-table-header"],[4,"sula-table-row"],[1,"sula-textarea",{"value":[1025],"status":[1025],"label":[1],"placeholder":[1],"disabled":[1028],"helpText":[1,"help-text"],"maxLength":[2,"max-length"],"rows":[2],"isActive":[32],"textValue":[32],"textareaIsFocused":[32],"labelPadding":[32]},[[4,"click","handleClick"]],{"value":["watchValueHandler"]}],[1,"sula-button",{"text":[1025],"icon":[1025],"leftIcon":[1025,"left-icon"],"rightIcon":[1025,"right-icon"],"appearance":[1025],"type":[1025],"size":[1025],"status":[1025],"loading":[1028],"buttonDisabled":[1028,"button-disabled"],"fullWidth":[1028,"full-width"]}],[1,"sula-dropdown",{"label":[1025],"disabled":[1028],"hasError":[1540,"has-error"],"items":[1040],"value":[1040],"searchable":[516],"menuMaxHeight":[2,"menu-max-height"],"contentMaxHeight":[2,"content-max-height"],"customContent":[516,"custom-content"],"closeOnSelect":[4,"close-on-select"],"showContent":[1540,"show-content"],"selectedItem":[32],"isFocused":[32],"searchTerm":[32],"filteredItems":[32],"openUpward":[32]},[[4,"click","handleDocumentClick"],[9,"resize","handleWindowResize"]],{"value":["handleValueChange"],"showContent":["handleShowContentChange"]}],[1,"sula-search-bar",{"value":[1025],"searchBarStyle":[1025,"search-bar-style"],"placeholder":[1025],"leftIcon":[1025,"left-icon"],"rightIcon":[1025,"right-icon"],"isFocused":[32],"textValue":[32]}],[1,"sula-loader",{"size":[1],"animationInstance":[32]}],[1,"sula-menu-select-list",{"items":[1040],"fullWidth":[4,"full-width"],"maxHeight":[2,"max-height"],"selectedValue":[16,"selected-value"]}],[0,"sula-icon",{"icon":[1],"customClass":[1,"custom-class"]}]]],["sula-toast",[[1,"sula-toast",{"toastTitle":[1,"toast-title"],"message":[1],"type":[1],"icon":[1],"actionText":[1,"action-text"],"closable":[4],"duration":[2],"paused":[4],"animated":[4],"announcement":[1],"closeLabel":[1,"close-label"],"announcedText":[32]},[[4,"visibilitychange","updateTimeout"]],{"toastTitle":["handleContentChange"],"message":["handleContentChange"],"actionText":["handleContentChange"],"duration":["handleContentChange"],"announcement":["updateAnnouncement"],"paused":["updateTimeout"]}]]],["sula-toast-stack",[[1,"sula-toast-stack",{"items":[16],"hovering":[32],"focused":[32],"noHover":[32],"retainingPointerExpansion":[32],"announcements":[32]},null,{"items":["handleItemsChange"]}]]]], options);
+  return bootstrapLazy([["sula-avatar_32",[[1,"sula-icon-picker",{"label":[1025],"required":[1028],"disabled":[1028],"error":[1025],"value":[1025],"showSearch":[4,"show-search"],"searchPlaceholder":[1,"search-placeholder"],"icons":[1040],"maxVisibleIcons":[2,"max-visible-icons"],"menuMaxHeight":[2,"menu-max-height"],"selectedIcon":[32],"searchTerm":[32]},null,{"value":["handleValueChange"],"icons":["handleIconsChange"]}],[1,"sula-modal",{"opened":[1028],"blockBodyScroll":[1028,"block-body-scroll"],"closeOnClickOutside":[1028,"close-on-click-outside"],"type":[1],"headerIcon":[1,"header-icon"],"modalTitle":[1,"modal-title"],"promoImage":[1,"promo-image"],"subTitle":[1,"sub-title"],"primaryButtonText":[1,"primary-button-text"],"secondaryButtonText":[1,"secondary-button-text"],"slotOverflow":[1,"slot-overflow"],"isAnimating":[32],"shouldRender":[32]},null,{"opened":["handleOpenedChange"]}],[1,"sula-calendar",{"label":[1],"value":[1025],"placeholder":[1],"disabled":[4],"helpText":[1,"help-text"],"status":[1],"locale":[1],"minDate":[1,"min-date"],"maxDate":[1,"max-date"],"range":[4],"allowTyping":[4,"allow-typing"],"inline":[4],"compact":[4],"firstDayOfWeek":[2,"first-day-of-week"],"closeOnSelect":[4,"close-on-select"],"showCalendar":[32],"openUpward":[32],"viewMonth":[32],"viewYear":[32],"hoverDate":[32]},[[4,"click","handleDocumentClick"],[4,"keydown","handleDocumentKeydown"]],{"value":["handleValueChange"]}],[1,"sula-chip",{"text":[1025],"appearance":[1025],"disabled":[1028],"items":[1040],"itemsPlacement":[1025,"items-placement"],"selected":[1028],"isFocused":[32],"showItems":[32]},[[4,"click","handleDocumentClick"]]],[1,"sula-avatar",{"size":[1],"imageUrl":[1,"image-url"],"text":[1],"icon":[1]}],[1,"sula-badge",{"status":[1025],"size":[1025],"type":[1025],"text":[1025],"icon":[1025],"hasSlotContent":[32]}],[1,"sula-breadcrumb",{"items":[1040]}],[1,"sula-checkbox",{"type":[1025],"label":[1025],"subTitle":[1025,"sub-title"],"disabled":[1028],"checked":[1028],"isFocus":[32]}],[1,"sula-menu",{"menuTitle":[1,"menu-title"],"image":[1],"width":[1],"density":[1],"labelOverflow":[1,"label-overflow"],"items":[1040],"collapsed":[32],"previewExpanded":[32],"selectedItem":[32]},null,{"items":["syncSelectedItemFromItems"]}],[1,"sula-progress-bar",{"appearance":[1025],"state":[1025],"topLabel":[1025,"top-label"],"bottomLabel":[1025,"bottom-label"],"progress":[1026],"showProgress":[1028,"show-progress"]},null,{"progress":["validateProgress"]}],[1,"sula-segmented-control",{"items":[1040],"type":[1025],"size":[1025],"color":[1025]}],[1,"sula-tag",{"label":[1025],"icon":[1025],"iconStatus":[1025,"icon-status"],"size":[1025],"appearance":[1025],"fontWeight":[1025,"font-weight"]}],[1,"sula-tiles",{"type":[1],"size":[1],"ellipsis":[4],"icon":[1],"text":[1],"subText":[1,"sub-text"],"disabled":[4]}],[1,"sula-timeline-list",{"sulaTimelineList":[1040,"sula-timeline-list"]}],[1,"sula-toggle",{"selected":[1028],"buttonDisabled":[1028,"button-disabled"],"icon":[1]}],[1,"sula-tooltip",{"text":[1],"position":[1],"icon":[1],"iconClass":[1,"icon-class"],"focused":[4],"trigger":[1],"appendToBody":[4,"append-to-body"],"isVisible":[32]},null,{"text":["handleTextChange"]}],[1,"sula-radio-button",{"checked":[1028],"label":[1025],"disabled":[1028],"radioIsFocus":[32]}],[1,"sula-switch",{"type":[1025],"active":[1028],"disabled":[1028],"label":[1025],"subTitle":[1025,"sub-title"],"responsive":[4],"isFocus":[32]}],[4,"sula-table",{"density":[1],"equalWidth":[4,"equal-width"],"fullWidth":[4,"full-width"]}],[4,"sula-table-body"],[4,"sula-table-cell"],[4,"sula-table-head-cell"],[4,"sula-table-header"],[4,"sula-table-row"],[1,"sula-textarea",{"value":[1025],"status":[1025],"label":[1],"placeholder":[1],"disabled":[1028],"helpText":[1,"help-text"],"maxLength":[2,"max-length"],"rows":[2],"isActive":[32],"textValue":[32],"textareaIsFocused":[32],"labelPadding":[32]},[[4,"click","handleClick"]],{"value":["watchValueHandler"]}],[1,"sula-button",{"text":[1025],"icon":[1025],"leftIcon":[1025,"left-icon"],"rightIcon":[1025,"right-icon"],"appearance":[1025],"type":[1025],"size":[1025],"status":[1025],"loading":[1028],"buttonDisabled":[1028,"button-disabled"],"fullWidth":[1028,"full-width"]}],[1,"sula-dropdown",{"label":[1025],"disabled":[1028],"hasError":[1540,"has-error"],"items":[1040],"value":[1040],"searchable":[516],"menuMaxHeight":[2,"menu-max-height"],"contentMaxHeight":[2,"content-max-height"],"customContent":[516,"custom-content"],"closeOnSelect":[4,"close-on-select"],"showContent":[1540,"show-content"],"selectedItem":[32],"isFocused":[32],"searchTerm":[32],"filteredItems":[32],"openUpward":[32]},[[4,"click","handleDocumentClick"],[9,"resize","handleWindowResize"]],{"value":["handleValueChange"],"showContent":["handleShowContentChange"]}],[1,"sula-search-bar",{"value":[1025],"searchBarStyle":[1025,"search-bar-style"],"placeholder":[1025],"leftIcon":[1025,"left-icon"],"rightIcon":[1025,"right-icon"],"isFocused":[32],"textValue":[32]}],[1,"sula-textfield",{"value":[1025],"type":[1],"status":[1025],"label":[1],"placeholder":[1],"disabled":[1028],"readOnly":[4,"read-only"],"helpText":[1,"help-text"],"maxLength":[2,"max-length"],"icon":[1],"maskPattern":[1,"mask-pattern"],"maskPatternSwitchMaxLength":[2,"mask-pattern-switch-max-length"],"inputIsOpen":[32],"textValue":[32],"showPassword":[32],"inputIsFocused":[32]},[[4,"click","handleClick"]],{"value":["watchValueHandler"],"maskPattern":["watchMaskPatternHandler"],"maskPatternSwitchMaxLength":["watchMaskPatternSwitchMaxLengthHandler"]}],[1,"sula-loader",{"size":[1],"animationInstance":[32]}],[1,"sula-menu-select-list",{"items":[1040],"fullWidth":[4,"full-width"],"maxHeight":[2,"max-height"],"selectedValue":[16,"selected-value"]}],[0,"sula-icon",{"icon":[1],"customClass":[1,"custom-class"]}]]],["sula-toast",[[1,"sula-toast",{"toastTitle":[1,"toast-title"],"message":[1],"type":[1],"icon":[1],"actionText":[1,"action-text"],"closable":[4],"duration":[2],"paused":[4],"animated":[4],"announcement":[1],"closeLabel":[1,"close-label"],"announcedText":[32]},[[4,"visibilitychange","updateTimeout"]],{"toastTitle":["handleContentChange"],"message":["handleContentChange"],"actionText":["handleContentChange"],"duration":["handleContentChange"],"announcement":["updateAnnouncement"],"paused":["updateTimeout"]}]]],["sula-toast-stack",[[1,"sula-toast-stack",{"items":[16],"hovering":[32],"focused":[32],"noHover":[32],"retainingPointerExpansion":[32],"announcements":[32]},null,{"items":["handleItemsChange"]}]]]], options);
 });
 //# sourceMappingURL=webcomponents.js.map
 

package/dist/types/components/sula-calendar/model/sula-calendar.model.d.ts

@@ -0,0 +1,28 @@
+export declare enum SulaCalendarStatus {
+    Default = "default",
+    Error = "error"
+}
+export interface SulaCalendarDay {
+    date: Date;
+    day: number;
+    isCurrentMonth: boolean;
+    isSelected: boolean;
+    isRangeStart: boolean;
+    isRangeEnd: boolean;
+    isInRange: boolean;
+    isRangePreview: boolean;
+    isToday: boolean;
+    isDisabled: boolean;
+}
+export interface SulaCalendarRange {
+    start: string;
+    end: string;
+}
+export interface SulaCalendarWeekday {
+    short: string;
+    long: string;
+}
+export interface SulaCalendarMonthChange {
+    month: number;
+    year: number;
+}

package/dist/types/components/sula-calendar/sula-calendar.d.ts

@@ -0,0 +1,134 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+import { SulaTextfieldStatus } from '../sula-textfield/model/sula-textfield.model';
+import { SulaCalendarDay, SulaCalendarMonthChange, SulaCalendarRange, SulaCalendarStatus, SulaCalendarWeekday } from './model/sula-calendar.model';
+export declare class SulaCalendar {
+    /**
+     * The calendar field label
+     */
+    label: string;
+    /**
+     * Selected date in the `DD/MM/YYYY` format. In range mode the format is `DD/MM/YYYY - DD/MM/YYYY`
+     */
+    value: string;
+    /**
+     * The calendar field placeholder
+     */
+    placeholder?: string;
+    /**
+     * The calendar is disabled
+     */
+    disabled: boolean;
+    /**
+     * The help text displayed below the field
+     */
+    helpText?: string;
+    /**
+     * The calendar field status
+     */
+    status: SulaCalendarStatus;
+    /**
+     * Locale used to format month and weekday names
+     */
+    locale: string;
+    /**
+     * Earliest selectable date in the `DD/MM/YYYY` format
+     */
+    minDate?: string;
+    /**
+     * Latest selectable date in the `DD/MM/YYYY` format
+     */
+    maxDate?: string;
+    /**
+     * Enables selecting a date range (start and end dates) instead of a single date
+     */
+    range: boolean;
+    /**
+     * Allows typing the date directly in the field. When false, the date can only be picked in the calendar
+     */
+    allowTyping: boolean;
+    /**
+     * Renders only the calendar panel, without the input field
+     */
+    inline: boolean;
+    /**
+     * Renders a smaller chip-like trigger showing only the selected date (`DD/MM/YY`), instead of the input field
+     */
+    compact: boolean;
+    /**
+     * First day of the week, where 0 is Sunday and 6 is Saturday
+     */
+    firstDayOfWeek: number;
+    /**
+     * Closes the calendar panel after a date is selected
+     */
+    closeOnSelect: boolean;
+    /**
+     * Event emitted when a date is selected, with the date in the `DD/MM/YYYY` format
+     */
+    dateSelected: EventEmitter<string>;
+    /**
+     * Event emitted in range mode when both the start and end dates are selected, either by picking or by typing. In range mode `valueChanged` is not emitted
+     */
+    rangeSelected: EventEmitter<SulaCalendarRange>;
+    /**
+     * Event emitted when the value changes, either by typing or by selecting a date. Not emitted in range mode, use `rangeSelected` instead
+     */
+    valueChanged: EventEmitter<string>;
+    /**
+     * Event emitted when the displayed month changes
+     */
+    monthChanged: EventEmitter<SulaCalendarMonthChange>;
+    /**
+     * Event emitted when the calendar panel is opened
+     */
+    calendarOpened: EventEmitter<void>;
+    /**
+     * Event emitted when the calendar panel is closed
+     */
+    calendarClosed: EventEmitter<void>;
+    showCalendar: boolean;
+    openUpward: boolean;
+    viewMonth: number;
+    viewYear: number;
+    hoverDate: Date | null;
+    node?: HTMLElement;
+    panelNode?: HTMLElement;
+    handleValueChange(): void;
+    handleDocumentClick(event: Event): void;
+    handleDocumentKeydown(event: KeyboardEvent): void;
+    componentWillLoad(): void;
+    componentDidRender(): void;
+    get selectedDate(): Date | null;
+    private getRange;
+    private syncViewWithValue;
+    private parseDate;
+    private formatDate;
+    private capitalize;
+    private isSameDay;
+    private isOutOfRange;
+    private get weekStart();
+    private createFormatter;
+    getMonthLabel(): string;
+    getWeekdays(): SulaCalendarWeekday[];
+    getWeeks(): SulaCalendarDay[][];
+    calculatePanelPosition(): void;
+    open(): void;
+    close(): void;
+    handleFieldClick: () => void;
+    getCompactLabel(): string;
+    handleCompactClick: (event: MouseEvent) => void;
+    handleFieldKeydown: (event: KeyboardEvent) => void;
+    handleInputChanged: (event: CustomEvent<string>) => void;
+    handlePreviousMonth: (event: MouseEvent) => void;
+    handleNextMonth: (event: MouseEvent) => void;
+    changeMonth(step: number): void;
+    handleSelectDay: (event: MouseEvent, day: SulaCalendarDay) => void;
+    selectRangeDay(date: Date): void;
+    handleDayHover(day: SulaCalendarDay): void;
+    handleGridLeave: () => void;
+    getTextfieldStatus(): SulaTextfieldStatus;
+    renderHeader(): any;
+    renderDay(day: SulaCalendarDay): any;
+    renderPanel(): any;
+    render(): any;
+}

package/dist/types/components/sula-calendar/sula-calendar.stories.d.ts

@@ -0,0 +1,169 @@
+declare const _default: {
+    title: string;
+    tags: string[];
+    argTypes: {
+        label: {
+            control: string;
+            defaultValue: string;
+            description: string;
+            type: {
+                required: boolean;
+            };
+        };
+        value: {
+            control: string;
+            defaultValue: string;
+            description: string;
+            type: {
+                required: boolean;
+            };
+        };
+        placeholder: {
+            control: string;
+            defaultValue: string;
+            description: string;
+            type: {
+                required: boolean;
+            };
+        };
+        disabled: {
+            control: string;
+            defaultValue: boolean;
+            description: string;
+            type: {
+                required: boolean;
+            };
+        };
+        helpText: {
+            control: string;
+            defaultValue: string;
+            description: string;
+            type: {
+                required: boolean;
+            };
+        };
+        status: {
+            control: string;
+            options: string[];
+            defaultValue: string;
+            description: string;
+            type: {
+                required: boolean;
+            };
+        };
+        locale: {
+            control: string;
+            defaultValue: string;
+            description: string;
+            type: {
+                required: boolean;
+            };
+        };
+        minDate: {
+            control: string;
+            description: string;
+            type: {
+                required: boolean;
+            };
+        };
+        maxDate: {
+            control: string;
+            description: string;
+            type: {
+                required: boolean;
+            };
+        };
+        range: {
+            control: string;
+            defaultValue: boolean;
+            description: string;
+            type: {
+                required: boolean;
+            };
+        };
+        allowTyping: {
+            control: string;
+            defaultValue: boolean;
+            description: string;
+            type: {
+                required: boolean;
+            };
+        };
+        inline: {
+            control: string;
+            defaultValue: boolean;
+            description: string;
+            type: {
+                required: boolean;
+            };
+        };
+        compact: {
+            control: string;
+            defaultValue: boolean;
+            description: string;
+            type: {
+                required: boolean;
+            };
+        };
+        firstDayOfWeek: {
+            control: string;
+            defaultValue: number;
+            description: string;
+            type: {
+                required: boolean;
+            };
+        };
+        closeOnSelect: {
+            control: string;
+            defaultValue: boolean;
+            description: string;
+            type: {
+                required: boolean;
+            };
+        };
+        dateSelected: {
+            action: string;
+            description: string;
+        };
+        rangeSelected: {
+            action: string;
+            description: string;
+        };
+        valueChanged: {
+            action: string;
+            description: string;
+        };
+        monthChanged: {
+            action: string;
+            description: string;
+        };
+        calendarOpened: {
+            action: string;
+            description: string;
+        };
+        calendarClosed: {
+            action: string;
+            description: string;
+        };
+    };
+    parameters: {
+        docs: {
+            description: {
+                component: string;
+            };
+        };
+    };
+};
+export default _default;
+export declare const Default: any;
+export declare const WithSelectedValue: any;
+export declare const Inline: any;
+export declare const WithDateRange: any;
+export declare const WithHelpText: any;
+export declare const Range: any;
+export declare const RangeInline: any;
+export declare const Compact: any;
+export declare const CompactSingleDate: any;
+export declare const WithoutTyping: any;
+export declare const WithError: any;
+export declare const Disabled: any;

package/dist/types/components/sula-chip/model/sula-chip.model.d.ts

@@ -2,3 +2,7 @@ export declare enum SulaChipAppearance {
     Default = "default",
     Negative = "negative"
 }
+export declare enum SulaChipItemsPlacement {
+    Bottom = "bottom",
+    Top = "top"
+}

package/dist/types/components/sula-chip/sula-chip.d.ts

@@ -1,6 +1,6 @@
 import { EventEmitter } from '../../stencil-public-runtime';
 import { SulaMenuListItem } from '../sula-menu-select-list/model/sula-menu-select-list.model';
-import { SulaChipAppearance } from './model/sula-chip.model';
+import { SulaChipAppearance, SulaChipItemsPlacement } from './model/sula-chip.model';
 import { SulaMenuSelectListCustomEvent } from '../../components';
 export declare class SulaChip {
     /**
@@ -19,6 +19,10 @@ export declare class SulaChip {
      * Items for list
      */
     items: SulaMenuListItem[];
+    /**
+     * Where the items list opens relative to the chip
+     */
+    itemsPlacement: SulaChipItemsPlacement;
     /**
      * Chip is selected
      */

package/dist/types/components/sula-chip/sula-chip.stories.d.ts

@@ -1,4 +1,4 @@
-import { SulaChipAppearance } from './model/sula-chip.model';
+import { SulaChipAppearance, SulaChipItemsPlacement } from './model/sula-chip.model';
 declare const _default: {
     title: string;
     tags: string[];
@@ -46,6 +46,17 @@ declare const _default: {
                 required: boolean;
             };
         };
+        itemsPlacement: {
+            control: {
+                type: string;
+            };
+            options: SulaChipItemsPlacement[];
+            defaultValue: SulaChipItemsPlacement;
+            description: string;
+            type: {
+                required: boolean;
+            };
+        };
         itemClicked: {
             action: string;
             description: string;

package/dist/types/components/sula-textfield/sula-textfield.d.ts

@@ -25,6 +25,10 @@ export declare class SulaTextfield {
      * The textfield is disabled
      */
     disabled: boolean;
+    /**
+     * The textfield is read only, blocking typing while keeping it focusable
+     */
+    readOnly: boolean;
     /**
      * The help text for textfield
      */

package/dist/types/components/sula-textfield/sula-textfield.stories.d.ts

@@ -73,6 +73,14 @@ declare const _default: {
                 required: boolean;
             };
         };
+        readOnly: {
+            control: string;
+            defaultValue: boolean;
+            description: string;
+            type: {
+                required: boolean;
+            };
+        };
         helpText: {
             control: string;
             defaultValue: string;