npm - @zanichelli/albe-web-components - Versions diffs - 13.6.1 → 14.1.0 - Mend

@zanichelli/albe-web-components 13.6.1 → 14.1.0

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 (580) hide show

package/dist/esm/z-toast-notification.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"z-toast-notification.entry.js","mappings":"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","names":[],"sources":["src/components/notification/z-toast-notification/styles.css?tag=z-toast-notification&encapsulation=shadow","src/components/notification/z-toast-notification/index.tsx"],"sourcesContent":[":host {\n display: inline-block;\n width: 100vw;\n min-width: 200px;\n\n --percentuale: 0;\n}\n\n:host(.slide-in-left) {\n animation: slideinleft 1s cubic-bezier(0.25, 0.1, 0.25, 0.1);\n animation-fill-mode: forwards;\n}\n\n:host(.slide-in-right) {\n animation: slideinright 1s cubic-bezier(0.25, 0.1, 0.25, 0.1);\n animation-fill-mode: forwards;\n}\n\n:host(.slide-in-down) {\n animation: slideindown 1s cubic-bezier(0.25, 0.1, 0.25, 0.1);\n animation-fill-mode: forwards;\n}\n\n:host(.slide-in-up) {\n animation: slideinup 1s cubic-bezier(0.25, 0.1, 0.25, 0.1);\n animation-fill-mode: forwards;\n}\n\n:host(.slide-out-left) {\n animation: slideoutleft 0.5s cubic-bezier(0.25, 0.1, 0.25, 0.1);\n animation-fill-mode: forwards;\n}\n\n:host(.slide-out-right) {\n animation: slideoutright 0.5s cubic-bezier(0.25, 0.1, 0.25, 0.1);\n animation-fill-mode: forwards;\n}\n\n:host(.slide-out-down) {\n animation: slideoutdown 0.5s cubic-bezier(0.25, 0.1, 0.25, 0.1);\n animation-fill-mode: forwards;\n}\n\n:host(.slide-out-up) {\n animation: slideoutup 0.5s cubic-bezier(0.25, 0.1, 0.25, 0.1);\n animation-fill-mode: forwards;\n}\n\n@keyframes slideinleft {\n 0% {\n transform: translateX(100%);\n }\n\n 100% {\n transform: translateX(0);\n }\n}\n\n@keyframes slideinright {\n 0% {\n transform: translateX(-100%);\n }\n\n 100% {\n transform: translateX(0);\n }\n}\n\n@keyframes slideinup {\n 0% {\n opacity: 0;\n transform: translateY(100%);\n }\n\n 100% {\n opacity: 1;\n transform: translateY(0);\n }\n}\n\n@keyframes slideindown {\n 0% {\n opacity: 0;\n transform: translateY(-100%);\n }\n\n 100% {\n opacity: 1;\n transform: translateY(0);\n }\n}\n\n@keyframes slideoutleft {\n 0% {\n /* stylelint-disable-next-line alpha-value-notation /\n opacity: calc(100% - var(--percentuale));\n transform: translateX(var(--percentuale));\n }\n\n 100% {\n opacity: 0;\n transform: translateX(-100%);\n }\n}\n\n@keyframes slideoutright {\n 0% {\n / stylelint-disable-next-line alpha-value-notation /\n opacity: calc(100% - var(--percentuale));\n transform: translateX(var(--percentuale));\n }\n\n 100% {\n opacity: 0;\n transform: translateX(100%);\n }\n}\n\n@keyframes slideoutup {\n 0% {\n opacity: 1;\n transform: translateY(var(--percentuale));\n }\n\n 100% {\n opacity: 0;\n transform: translateY(-100%);\n }\n}\n\n@keyframes slideoutdown {\n 0% {\n opacity: 1;\n transform: translateY(var(--percentuale));\n }\n\n 100% {\n opacity: 0;\n transform: translateY(100%);\n }\n}\n\n:host > #external-container {\n display: flex;\n min-height: 52px;\n box-sizing: border-box;\n align-items: center;\n justify-content: space-between;\n padding: calc(var(--space-unit) 1) calc(var(--space-unit) * 2);\n border-radius: 4px;\n box-shadow: var(--shadow-3);\n font-family: var(--font-family-sans);\n font-size: 14px;\n font-weight: var(--font-rg);\n letter-spacing: 0.16px;\n}\n\n:host > #external-container.mobile-wrapped > #icon {\n align-self: flex-start;\n}\n\n:host > #external-container.several-lines-padding {\n padding: calc(var(--space-unit) * 2);\n}\n\n:host > #external-container > #flex-container {\n display: flex;\n width: 100%;\n flex-wrap: wrap;\n align-items: center;\n justify-content: space-between;\n}\n\n:host > #external-container #text {\n margin-right: calc(var(--space-unit) * 2);\n color: var(--color-white);\n letter-spacing: 0.16px;\n line-height: 20px;\n text-align: left;\n}\n\n:host > #external-container #text > .title {\n margin-right: 4px;\n font-weight: 600;\n}\n\n:host > #external-container.mobile-wrapped #button ::slotted(z-button) {\n margin-top: calc(var(--space-unit) * 2);\n}\n\n:host > #external-container #icon {\n margin-left: calc(var(--space-unit) * 2);\n cursor: pointer;\n fill: var(--color-white);\n}\n\n:host > #external-container.dark {\n background: var(--gray800);\n}\n\n:host > #external-container.light {\n background: var(--color-background);\n}\n\n:host > #external-container.light #icon,\n:host > #external-container.warning #text,\n:host > #external-container.warning #icon {\n fill: var(--color-icon01);\n}\n\n:host > #external-container.light #text,\n:host > #external-container.warning #text {\n color: var(--gray800);\n}\n\n:host > #external-container.accent {\n background: var(--color-primary01);\n}\n\n:host > #external-container.error {\n background: var(--color-error-default);\n}\n\n:host > #external-container.success {\n background: var(--color-success-default);\n}\n\n:host > #external-container.warning {\n background: var(--color-warning-default);\n}\n\n/* Tablet breakpoint /\n@media only screen and (min-width: 768px) {\n :host {\n width: unset;\n max-width: 50vw;\n }\n\n :host > #external-container > #flex-container {\n flex-wrap: nowrap;\n }\n\n :host > #external-container #text {\n width: 100%;\n }\n}\n\n/ Wide breakpoint /\n@media only screen and (min-width: 1366px) {\n :host {\n width: unset;\n max-width: 33vw;\n }\n}\n","import {Component, Prop, h, Event, EventEmitter, Element, Host, State, Watch} from \"@stencil/core\";\nimport {ToastNotificationTransition, ToastNotification} from \"../../../beans\";\nimport {mobileBreakpoint} from \"../../../constants/breakpoints\";\n\nimport Hammer from \"hammerjs\";\n\n@Component({\n tag: \"z-toast-notification\",\n styleUrl: \"styles.css\",\n shadow: true,\n})\nexport class ZToastNotification {\n @Element() hostElement: HTMLZToastNotificationElement;\n\n /* toast notification's title /\n @Prop()\n heading?: string;\n\n /* toast notification's message /\n @Prop()\n message: string;\n\n /* toggles closing button rendering /\n @Prop()\n closebutton: boolean;\n\n /* toast notification closing timeout (ms) /\n @Prop()\n autoclose?: number;\n\n /* toast notification autoclose can be paused /\n @Prop()\n pauseonfocusloss?: boolean = true;\n\n /* toast notification type: dark, light, accent, error, success, warning /\n @Prop()\n type?: ToastNotification;\n\n /* toast notification can be draggable/\n @Prop()\n isdraggable?: boolean = true;\n\n /* toast notification draggable percentage/\n @Prop()\n draggablepercentage?: number = 80;\n\n /* toast notification animation type: slide-in-left, slide-in-right, slide-in-down, slide-in-up/\n @Prop()\n transition?: ToastNotificationTransition;\n\n @State()\n percentage: number;\n\n private isTextLong: boolean;\n\n private container!: HTMLElement;\n\n private toastText!: HTMLElement;\n\n private sliderManager: HammerManager;\n\n private elapsedTime: number;\n\n private timeoutHandle: number;\n\n private startTime: number;\n\n private isMobile: boolean;\n\n private isCloseEventCalled = false;\n\n @Watch(\"isdraggable\")\n watchPropIsdraggable(newValue: boolean): void {\n if (newValue) {\n this.sliderManager.get(\"pan\").set({enable: true});\n } else {\n this.sliderManager.get(\"pan\").set({enable: false});\n }\n }\n\n @Watch(\"autoclose\")\n watchPropAutoclose(newValue: number): void {\n clearTimeout(this.timeoutHandle);\n this.startClosingTimeout(newValue);\n }\n\n @Watch(\"pauseonfocusloss\")\n watchPropPauseonfocusloss(newValue: boolean): void {\n if (this.autoclose) {\n if (newValue) {\n document.addEventListener(\"visibilitychange\", this.visibilityChangeEventHandler);\n } else {\n document.removeEventListener(\"visibilitychange\", this.visibilityChangeEventHandler);\n }\n }\n }\n\n /* notification close event /\n @Event()\n toastClose: EventEmitter;\n\n private emitToastClose(cssClass: string): void {\n this.timeoutHandle = null;\n this.elapsedTime = null;\n this.hostElement.classList.add(cssClass);\n this.toastClose.emit();\n }\n\n componentWillLoad(): void {\n this.isMobile = window.innerWidth <= mobileBreakpoint;\n this.validateAutoclose();\n this.percentage = 0;\n }\n\n componentDidLoad(): void {\n this.isTextLong = this.detectWrap() \|\| this.toastText.offsetHeight > 20;\n this.startTime = Date.now();\n if (this.autoclose && this.pauseonfocusloss) {\n document.addEventListener(\"visibilitychange\", this.visibilityChangeEventHandler);\n }\n\n this.isdraggable && this.handleSlideOutDragAnimation();\n }\n\n private visibilityChangeEventHandler(): void {\n if (document.visibilityState === \"hidden\") {\n this.timeoutHandle && this.onBlur();\n } else {\n this.elapsedTime && this.onFocus();\n }\n }\n\n private validateAutoclose(): void {\n if (!this.autoclose && !this.closebutton) {\n console.error(\"At least one between autoclose and closebutton must be present\");\n }\n }\n\n private mapSlideOutClass(): ToastNotificationTransition {\n switch (this.transition) {\n case ToastNotificationTransition.SLIDE_IN_DOWN:\n return ToastNotificationTransition.SLIDE_OUT_UP;\n case ToastNotificationTransition.SLIDE_IN_UP:\n return ToastNotificationTransition.SLIDE_OUT_DOWN;\n case ToastNotificationTransition.SLIDE_IN_LEFT:\n return ToastNotificationTransition.SLIDE_OUT_RIGHT;\n case ToastNotificationTransition.SLIDE_IN_RIGHT:\n return ToastNotificationTransition.SLIDE_OUT_LEFT;\n }\n }\n\n private calculateDraggedPercentage(e): number {\n const bounding = this.hostElement.getBoundingClientRect();\n\n return Math.round((100 e.deltaX) / bounding.width);\n }\n\n private handleSlideOutDragAnimation(): void {\n this.sliderManager = new Hammer(this.hostElement);\n this.sliderManager.get(\"pan\").set({\n direction: Hammer.DIRECTION_HORIZONTAL,\n });\n\n this.sliderManager.on(\"pan\", (e) => {\n this.percentage = this.calculateDraggedPercentage(e);\n this.hostElement.style.transition = \"none\";\n this.hostElement.classList.remove(this.transition);\n const translateObj = {\n translate: `translateX(${this.percentage}%)`,\n translateBack: \"translateX(0)\",\n };\n\n this.hostElement.style.opacity = `${100 - Math.abs(this.percentage)}%`;\n if (e.eventType === Hammer.DIRECTION_LEFT \|\| e.eventType === Hammer.DIRECTION_RIGHT) {\n this.hostElement.style.transform = translateObj.translate;\n if (Math.abs(this.percentage) > this.draggablepercentage && !this.isCloseEventCalled) {\n this.isCloseEventCalled = true;\n this.emitToastClose(e.direction === Hammer.DIRECTION_LEFT ? \"slide-out-left\" : \"slide-out-right\");\n }\n }\n\n if (e.isFinal && Math.abs(this.percentage) < this.draggablepercentage) {\n this.hostElement.style.transform = translateObj.translateBack;\n this.hostElement.style.transition = \"all 1s\";\n this.hostElement.style.opacity = \"100%\";\n this.percentage = 0;\n }\n });\n }\n\n private onFocus(): void {\n let time = this.autoclose;\n if (this.elapsedTime) {\n time = this.autoclose - this.elapsedTime;\n }\n if (time > 0) {\n this.startClosingTimeout(time);\n }\n }\n\n private onBlur(): void {\n this.elapsedTime = Date.now() - this.startTime;\n clearTimeout(this.timeoutHandle);\n }\n\n private startClosingTimeout(time: number): void {\n this.timeoutHandle = window.setTimeout(() => this.emitToastClose(this.mapSlideOutClass()), time);\n }\n\n private detectWrap(): boolean {\n const parentWidth = this.container.offsetWidth;\n const children = this.container.children;\n let totalWidth = 0;\n\n for (let i = 0; i < children.length; i++) {\n totalWidth += (children[i] as HTMLElement).offsetWidth;\n }\n\n return totalWidth > parentWidth;\n }\n\n private renderText(): HTMLDivElement {\n return (\n <div\n id=\"text\"\n ref={(el) => (this.toastText = el as HTMLElement)}\n >\n <span class=\"title\">{this.heading}</span>\n <span class=\"message\">{this.message}</span>\n </div>\n );\n }\n\n private renderButton(): HTMLDivElement {\n return (\n <div id=\"button\">\n <slot name=\"button\" />\n </div>\n );\n }\n\n private renderCloseIcon(): HTMLDivElement {\n if (!this.closebutton) {\n return;\n }\n\n return (\n <div id=\"icon\">\n <z-icon\n tabIndex={0}\n name=\"multiply-circled\"\n width={15}\n height={15}\n onClick={() => this.emitToastClose(this.mapSlideOutClass())}\n onKeyPress={(e) => {\n if (e.keyCode == 32 \|\| e.keyCode == 13) {\n e.preventDefault();\n this.emitToastClose(this.mapSlideOutClass());\n }\n }}\n />\n </div>\n );\n }\n\n private renderContainer(): HTMLDivElement {\n return (\n <div\n tabIndex={0}\n id=\"external-container\"\n class={{\n [this.type]: !!this.type,\n \"several-lines-padding\": this.isTextLong,\n }}\n ref={(el) => (this.container = el as HTMLElement)}\n >\n {this.renderText()}\n {this.renderButton()}\n {this.renderCloseIcon()}\n </div>\n );\n }\n\n private renderMobileContainer(): HTMLDivElement {\n return (\n <div\n id=\"external-container\"\n class={{\n [this.type]: !!this.type,\n \"several-lines-padding\": this.isTextLong,\n \"mobile-wrapped\": this.isTextLong,\n }}\n >\n <div\n id=\"flex-container\"\n ref={(el) => (this.container = el as HTMLElement)}\n >\n {this.renderText()}\n {this.renderButton()}\n </div>\n {this.renderCloseIcon()}\n </div>\n );\n }\n\n render(): HTMLZToastNotificationElement {\n return (\n <Host\n style={{\n \"--percentuale\": `${this.percentage}%`,\n }}\n class={this.transition ? this.transition : ToastNotificationTransition.SLIDE_IN_DOWN}\n onAnimationEnd={(e: AnimationEvent) => {\n if (this.autoclose && e.animationName.includes(\"slidein\")) {\n this.startClosingTimeout(this.autoclose);\n }\n if (e.animationName.includes(\"slideout\")) {\n this.hostElement.parentNode.removeChild(this.hostElement);\n }\n }}\n >\n {this.isMobile ? this.renderMobileContainer() : this.renderContainer()}\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"z-toast-notification.entry.js","mappings":";;;;;AAAA,MAAM,SAAS,GAAG,2xHAA2xH,CAAC;AAC9yH,iCAAe,SAAS;;MCUX,kBAAkB;;;;QA0DrB,uBAAkB,GAAG,KAAK,CAAC;;;;;gCArCN,IAAI;;2BAQT,IAAI;mCAIG,EAAE;;;;IA4BjC,oBAAoB,CAAC,QAAiB;QACpC,IAAI,QAAQ,EAAE;YACZ,IAAI,CAAC,aAAa,CAAC,GAAG,CAAC,KAAK,CAAC,CAAC,GAAG,CAAC,EAAC,MAAM,EAAE,IAAI,EAAC,CAAC,CAAC;SACnD;aAAM;YACL,IAAI,CAAC,aAAa,CAAC,GAAG,CAAC,KAAK,CAAC,CAAC,GAAG,CAAC,EAAC,MAAM,EAAE,KAAK,EAAC,CAAC,CAAC;SACpD;KACF;IAGD,kBAAkB,CAAC,QAAgB;QACjC,YAAY,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC;QACjC,IAAI,CAAC,mBAAmB,CAAC,QAAQ,CAAC,CAAC;KACpC;IAGD,yBAAyB,CAAC,QAAiB;QACzC,IAAI,IAAI,CAAC,SAAS,EAAE;YAClB,IAAI,QAAQ,EAAE;gBACZ,QAAQ,CAAC,gBAAgB,CAAC,kBAAkB,EAAE,IAAI,CAAC,4BAA4B,CAAC,CAAC;aAClF;iBAAM;gBACL,QAAQ,CAAC,mBAAmB,CAAC,kBAAkB,EAAE,IAAI,CAAC,4BAA4B,CAAC,CAAC;aACrF;SACF;KACF;IAMO,cAAc,CAAC,QAAgB;QACrC,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC;QAC1B,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC;QACxB,IAAI,CAAC,WAAW,CAAC,SAAS,CAAC,GAAG,CAAC,QAAQ,CAAC,CAAC;QACzC,IAAI,CAAC,UAAU,CAAC,IAAI,EAAE,CAAC;KACxB;IAED,iBAAiB;QACf,IAAI,CAAC,QAAQ,GAAG,MAAM,CAAC,UAAU,IAAI,gBAAgB,CAAC;QACtD,IAAI,CAAC,iBAAiB,EAAE,CAAC;QACzB,IAAI,CAAC,UAAU,GAAG,CAAC,CAAC;KACrB;IAED,gBAAgB;QACd,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC,UAAU,EAAE,IAAI,IAAI,CAAC,SAAS,CAAC,YAAY,GAAG,EAAE,CAAC;QACxE,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,GAAG,EAAE,CAAC;QAC5B,IAAI,IAAI,CAAC,SAAS,IAAI,IAAI,CAAC,gBAAgB,EAAE;YAC3C,QAAQ,CAAC,gBAAgB,CAAC,kBAAkB,EAAE,IAAI,CAAC,4BAA4B,CAAC,CAAC;SAClF;QAED,IAAI,CAAC,WAAW,IAAI,IAAI,CAAC,2BAA2B,EAAE,CAAC;KACxD;IAEO,4BAA4B;QAClC,IAAI,QAAQ,CAAC,eAAe,KAAK,QAAQ,EAAE;YACzC,IAAI,CAAC,aAAa,IAAI,IAAI,CAAC,MAAM,EAAE,CAAC;SACrC;aAAM;YACL,IAAI,CAAC,WAAW,IAAI,IAAI,CAAC,OAAO,EAAE,CAAC;SACpC;KACF;IAEO,iBAAiB;QACvB,IAAI,CAAC,IAAI,CAAC,SAAS,IAAI,CAAC,IAAI,CAAC,WAAW,EAAE;YACxC,OAAO,CAAC,KAAK,CAAC,gEAAgE,CAAC,CAAC;SACjF;KACF;IAEO,gBAAgB;QACtB,QAAQ,IAAI,CAAC,UAAU;YACrB,KAAK,2BAA2B,CAAC,aAAa;gBAC5C,OAAO,2BAA2B,CAAC,YAAY,CAAC;YAClD,KAAK,2BAA2B,CAAC,WAAW;gBAC1C,OAAO,2BAA2B,CAAC,cAAc,CAAC;YACpD,KAAK,2BAA2B,CAAC,aAAa;gBAC5C,OAAO,2BAA2B,CAAC,eAAe,CAAC;YACrD,KAAK,2BAA2B,CAAC,cAAc;gBAC7C,OAAO,2BAA2B,CAAC,cAAc,CAAC;SACrD;KACF;IAEO,0BAA0B,CAAC,CAAC;QAClC,MAAM,QAAQ,GAAG,IAAI,CAAC,WAAW,CAAC,qBAAqB,EAAE,CAAC;QAE1D,OAAO,IAAI,CAAC,KAAK,CAAC,CAAC,GAAG,GAAG,CAAC,CAAC,MAAM,IAAI,QAAQ,CAAC,KAAK,CAAC,CAAC;KACtD;IAEO,2BAA2B;QACjC,IAAI,CAAC,aAAa,GAAG,IAAI,MAAM,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;QAClD,IAAI,CAAC,aAAa,CAAC,GAAG,CAAC,KAAK,CAAC,CAAC,GAAG,CAAC;YAChC,SAAS,EAAE,MAAM,CAAC,oBAAoB;SACvC,CAAC,CAAC;QAEH,IAAI,CAAC,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,CAAC,CAAC;YAC7B,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC,0BAA0B,CAAC,CAAC,CAAC,CAAC;YACrD,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,UAAU,GAAG,MAAM,CAAC;YAC3C,IAAI,CAAC,WAAW,CAAC,SAAS,CAAC,MAAM,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;YACnD,MAAM,YAAY,GAAG;gBACnB,SAAS,EAAE,cAAc,IAAI,CAAC,UAAU,IAAI;gBAC5C,aAAa,EAAE,eAAe;aAC/B,CAAC;YAEF,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,OAAO,GAAG,GAAG,GAAG,GAAG,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,UAAU,CAAC,GAAG,CAAC;YACvE,IAAI,CAAC,CAAC,SAAS,KAAK,MAAM,CAAC,cAAc,IAAI,CAAC,CAAC,SAAS,KAAK,MAAM,CAAC,eAAe,EAAE;gBACnF,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,SAAS,GAAG,YAAY,CAAC,SAAS,CAAC;gBAC1D,IAAI,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,UAAU,CAAC,GAAG,IAAI,CAAC,mBAAmB,IAAI,CAAC,IAAI,CAAC,kBAAkB,EAAE;oBACpF,IAAI,CAAC,kBAAkB,GAAG,IAAI,CAAC;oBAC/B,IAAI,CAAC,cAAc,CAAC,CAAC,CAAC,SAAS,KAAK,MAAM,CAAC,cAAc,GAAG,gBAAgB,GAAG,iBAAiB,CAAC,CAAC;iBACnG;aACF;YAED,IAAI,CAAC,CAAC,OAAO,IAAI,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,UAAU,CAAC,GAAG,IAAI,CAAC,mBAAmB,EAAE;gBACrE,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,SAAS,GAAG,YAAY,CAAC,aAAa,CAAC;gBAC9D,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,UAAU,GAAG,QAAQ,CAAC;gBAC7C,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,OAAO,GAAG,MAAM,CAAC;gBACxC,IAAI,CAAC,UAAU,GAAG,CAAC,CAAC;aACrB;SACF,CAAC,CAAC;KACJ;IAEO,OAAO;QACb,IAAI,IAAI,GAAG,IAAI,CAAC,SAAS,CAAC;QAC1B,IAAI,IAAI,CAAC,WAAW,EAAE;YACpB,IAAI,GAAG,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,WAAW,CAAC;SAC1C;QACD,IAAI,IAAI,GAAG,CAAC,EAAE;YACZ,IAAI,CAAC,mBAAmB,CAAC,IAAI,CAAC,CAAC;SAChC;KACF;IAEO,MAAM;QACZ,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC,GAAG,EAAE,GAAG,IAAI,CAAC,SAAS,CAAC;QAC/C,YAAY,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC;KAClC;IAEO,mBAAmB,CAAC,IAAY;QACtC,IAAI,CAAC,aAAa,GAAG,MAAM,CAAC,UAAU,CAAC,MAAM,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,gBAAgB,EAAE,CAAC,EAAE,IAAI,CAAC,CAAC;KAClG;IAEO,UAAU;QAChB,MAAM,WAAW,GAAG,IAAI,CAAC,SAAS,CAAC,WAAW,CAAC;QAC/C,MAAM,QAAQ,GAAG,IAAI,CAAC,SAAS,CAAC,QAAQ,CAAC;QACzC,IAAI,UAAU,GAAG,CAAC,CAAC;QAEnB,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,QAAQ,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE;YACxC,UAAU,IAAK,QAAQ,CAAC,CAAC,CAAiB,CAAC,WAAW,CAAC;SACxD;QAED,OAAO,UAAU,GAAG,WAAW,CAAC;KACjC;IAEO,UAAU;QAChB,QACE,WACE,EAAE,EAAC,MAAM,EACT,GAAG,EAAE,CAAC,EAAE,MAAM,IAAI,CAAC,SAAS,GAAG,EAAiB,CAAC,IAEjD,YAAM,KAAK,EAAC,OAAO,IAAE,IAAI,CAAC,OAAO,CAAQ,EACzC,YAAM,KAAK,EAAC,SAAS,IAAE,IAAI,CAAC,OAAO,CAAQ,CACvC,EACN;KACH;IAEO,YAAY;QAClB,QACE,WAAK,EAAE,EAAC,QAAQ,IACd,YAAM,IAAI,EAAC,QAAQ,GAAG,CAClB,EACN;KACH;IAEO,eAAe;QACrB,IAAI,CAAC,IAAI,CAAC,WAAW,EAAE;YACrB,OAAO;SACR;QAED,QACE,WAAK,EAAE,EAAC,MAAM,IACZ,cACE,QAAQ,EAAE,CAAC,EACX,IAAI,EAAC,kBAAkB,EACvB,KAAK,EAAE,EAAE,EACT,MAAM,EAAE,EAAE,EACV,OAAO,EAAE,MAAM,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,gBAAgB,EAAE,CAAC,EAC3D,UAAU,EAAE,CAAC,CAAC;gBACZ,IAAI,CAAC,CAAC,OAAO,IAAI,EAAE,IAAI,CAAC,CAAC,OAAO,IAAI,EAAE,EAAE;oBACtC,CAAC,CAAC,cAAc,EAAE,CAAC;oBACnB,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,gBAAgB,EAAE,CAAC,CAAC;iBAC9C;aACF,GACD,CACE,EACN;KACH;IAEO,eAAe;QACrB,QACE,WACE,QAAQ,EAAE,CAAC,EACX,EAAE,EAAC,oBAAoB,EACvB,KAAK,EAAE;gBACL,CAAC,IAAI,CAAC,IAAI,GAAG,CAAC,CAAC,IAAI,CAAC,IAAI;gBACxB,uBAAuB,EAAE,IAAI,CAAC,UAAU;aACzC,EACD,GAAG,EAAE,CAAC,EAAE,MAAM,IAAI,CAAC,SAAS,GAAG,EAAiB,CAAC,IAEhD,IAAI,CAAC,UAAU,EAAE,EACjB,IAAI,CAAC,YAAY,EAAE,EACnB,IAAI,CAAC,eAAe,EAAE,CACnB,EACN;KACH;IAEO,qBAAqB;QAC3B,QACE,WACE,EAAE,EAAC,oBAAoB,EACvB,KAAK,EAAE;gBACL,CAAC,IAAI,CAAC,IAAI,GAAG,CAAC,CAAC,IAAI,CAAC,IAAI;gBACxB,uBAAuB,EAAE,IAAI,CAAC,UAAU;gBACxC,gBAAgB,EAAE,IAAI,CAAC,UAAU;aAClC,IAED,WACE,EAAE,EAAC,gBAAgB,EACnB,GAAG,EAAE,CAAC,EAAE,MAAM,IAAI,CAAC,SAAS,GAAG,EAAiB,CAAC,IAEhD,IAAI,CAAC,UAAU,EAAE,EACjB,IAAI,CAAC,YAAY,EAAE,CAChB,EACL,IAAI,CAAC,eAAe,EAAE,CACnB,EACN;KACH;IAED,MAAM;QACJ,QACE,EAAC,IAAI,qDACH,KAAK,EAAE;gBACL,eAAe,EAAE,GAAG,IAAI,CAAC,UAAU,GAAG;aACvC,EACD,KAAK,EAAE,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC,UAAU,GAAG,2BAA2B,CAAC,aAAa,EACpF,cAAc,EAAE,CAAC,CAAiB;gBAChC,IAAI,IAAI,CAAC,SAAS,IAAI,CAAC,CAAC,aAAa,CAAC,QAAQ,CAAC,SAAS,CAAC,EAAE;oBACzD,IAAI,CAAC,mBAAmB,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;iBAC1C;gBACD,IAAI,CAAC,CAAC,aAAa,CAAC,QAAQ,CAAC,UAAU,CAAC,EAAE;oBACxC,IAAI,CAAC,WAAW,CAAC,UAAU,CAAC,WAAW,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;iBAC3D;aACF,IAEA,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,qBAAqB,EAAE,GAAG,IAAI,CAAC,eAAe,EAAE,CACjE,EACP;KACH;;;;;;;;;;;;","names":[],"sources":["src/components/notification/z-toast-notification/styles.css?tag=z-toast-notification&encapsulation=shadow","src/components/notification/z-toast-notification/index.tsx"],"sourcesContent":[":host {\n display: inline-block;\n width: 100vw;\n min-width: 200px;\n\n --percentuale: 0;\n}\n\n:host(.slide-in-left) {\n animation: slideinleft 1s cubic-bezier(0.25, 0.1, 0.25, 0.1);\n animation-fill-mode: forwards;\n}\n\n:host(.slide-in-right) {\n animation: slideinright 1s cubic-bezier(0.25, 0.1, 0.25, 0.1);\n animation-fill-mode: forwards;\n}\n\n:host(.slide-in-down) {\n animation: slideindown 1s cubic-bezier(0.25, 0.1, 0.25, 0.1);\n animation-fill-mode: forwards;\n}\n\n:host(.slide-in-up) {\n animation: slideinup 1s cubic-bezier(0.25, 0.1, 0.25, 0.1);\n animation-fill-mode: forwards;\n}\n\n:host(.slide-out-left) {\n animation: slideoutleft 0.5s cubic-bezier(0.25, 0.1, 0.25, 0.1);\n animation-fill-mode: forwards;\n}\n\n:host(.slide-out-right) {\n animation: slideoutright 0.5s cubic-bezier(0.25, 0.1, 0.25, 0.1);\n animation-fill-mode: forwards;\n}\n\n:host(.slide-out-down) {\n animation: slideoutdown 0.5s cubic-bezier(0.25, 0.1, 0.25, 0.1);\n animation-fill-mode: forwards;\n}\n\n:host(.slide-out-up) {\n animation: slideoutup 0.5s cubic-bezier(0.25, 0.1, 0.25, 0.1);\n animation-fill-mode: forwards;\n}\n\n@keyframes slideinleft {\n 0% {\n transform: translateX(100%);\n }\n\n 100% {\n transform: translateX(0);\n }\n}\n\n@keyframes slideinright {\n 0% {\n transform: translateX(-100%);\n }\n\n 100% {\n transform: translateX(0);\n }\n}\n\n@keyframes slideinup {\n 0% {\n opacity: 0;\n transform: translateY(100%);\n }\n\n 100% {\n opacity: 1;\n transform: translateY(0);\n }\n}\n\n@keyframes slideindown {\n 0% {\n opacity: 0;\n transform: translateY(-100%);\n }\n\n 100% {\n opacity: 1;\n transform: translateY(0);\n }\n}\n\n@keyframes slideoutleft {\n 0% {\n /* stylelint-disable-next-line alpha-value-notation /\n opacity: calc(100% - var(--percentuale));\n transform: translateX(var(--percentuale));\n }\n\n 100% {\n opacity: 0;\n transform: translateX(-100%);\n }\n}\n\n@keyframes slideoutright {\n 0% {\n / stylelint-disable-next-line alpha-value-notation /\n opacity: calc(100% - var(--percentuale));\n transform: translateX(var(--percentuale));\n }\n\n 100% {\n opacity: 0;\n transform: translateX(100%);\n }\n}\n\n@keyframes slideoutup {\n 0% {\n opacity: 1;\n transform: translateY(var(--percentuale));\n }\n\n 100% {\n opacity: 0;\n transform: translateY(-100%);\n }\n}\n\n@keyframes slideoutdown {\n 0% {\n opacity: 1;\n transform: translateY(var(--percentuale));\n }\n\n 100% {\n opacity: 0;\n transform: translateY(100%);\n }\n}\n\n:host > #external-container {\n display: flex;\n min-height: 52px;\n box-sizing: border-box;\n align-items: center;\n justify-content: space-between;\n padding: calc(var(--space-unit) 1) calc(var(--space-unit) * 2);\n border-radius: 4px;\n box-shadow: var(--shadow-3);\n font-family: var(--font-family-sans);\n font-size: 14px;\n font-weight: var(--font-rg);\n letter-spacing: 0.16px;\n}\n\n:host > #external-container.mobile-wrapped > #icon {\n align-self: flex-start;\n}\n\n:host > #external-container.several-lines-padding {\n padding: calc(var(--space-unit) * 2);\n}\n\n:host > #external-container > #flex-container {\n display: flex;\n width: 100%;\n flex-wrap: wrap;\n align-items: center;\n justify-content: space-between;\n}\n\n:host > #external-container #text {\n margin-right: calc(var(--space-unit) * 2);\n color: var(--color-white);\n letter-spacing: 0.16px;\n line-height: 20px;\n text-align: left;\n}\n\n:host > #external-container #text > .title {\n margin-right: 4px;\n font-weight: 600;\n}\n\n:host > #external-container.mobile-wrapped #button ::slotted(z-button) {\n margin-top: calc(var(--space-unit) * 2);\n}\n\n:host > #external-container #icon {\n margin-left: calc(var(--space-unit) * 2);\n cursor: pointer;\n fill: var(--color-white);\n}\n\n:host > #external-container.dark {\n background: var(--gray800);\n}\n\n:host > #external-container.light {\n background: var(--color-background);\n}\n\n:host > #external-container.light #icon,\n:host > #external-container.warning #text,\n:host > #external-container.warning #icon {\n fill: var(--color-primary01-icon);\n}\n\n:host > #external-container.light #text,\n:host > #external-container.warning #text {\n color: var(--gray800);\n}\n\n:host > #external-container.accent {\n background: var(--color-primary01);\n}\n\n:host > #external-container.error {\n background: var(--color-error-default);\n}\n\n:host > #external-container.success {\n background: var(--color-success-default);\n}\n\n:host > #external-container.warning {\n background: var(--color-warning-default);\n}\n\n/* Tablet breakpoint /\n@media only screen and (min-width: 768px) {\n :host {\n width: unset;\n max-width: 50vw;\n }\n\n :host > #external-container > #flex-container {\n flex-wrap: nowrap;\n }\n\n :host > #external-container #text {\n width: 100%;\n }\n}\n\n/ Wide breakpoint /\n@media only screen and (min-width: 1366px) {\n :host {\n width: unset;\n max-width: 33vw;\n }\n}\n","import {Component, Prop, h, Event, EventEmitter, Element, Host, State, Watch} from \"@stencil/core\";\nimport {ToastNotificationTransition, ToastNotification} from \"../../../beans\";\nimport {mobileBreakpoint} from \"../../../constants/breakpoints\";\n\nimport Hammer from \"hammerjs\";\n\n@Component({\n tag: \"z-toast-notification\",\n styleUrl: \"styles.css\",\n shadow: true,\n})\nexport class ZToastNotification {\n @Element() hostElement: HTMLZToastNotificationElement;\n\n /* toast notification's title /\n @Prop()\n heading?: string;\n\n /* toast notification's message /\n @Prop()\n message: string;\n\n /* toggles closing button rendering /\n @Prop()\n closebutton: boolean;\n\n /* toast notification closing timeout (ms) /\n @Prop()\n autoclose?: number;\n\n /* toast notification autoclose can be paused /\n @Prop()\n pauseonfocusloss?: boolean = true;\n\n /* toast notification type: dark, light, accent, error, success, warning /\n @Prop()\n type?: ToastNotification;\n\n /* toast notification can be draggable/\n @Prop()\n isdraggable?: boolean = true;\n\n /* toast notification draggable percentage/\n @Prop()\n draggablepercentage?: number = 80;\n\n /* toast notification animation type: slide-in-left, slide-in-right, slide-in-down, slide-in-up/\n @Prop()\n transition?: ToastNotificationTransition;\n\n @State()\n percentage: number;\n\n private isTextLong: boolean;\n\n private container!: HTMLElement;\n\n private toastText!: HTMLElement;\n\n private sliderManager: HammerManager;\n\n private elapsedTime: number;\n\n private timeoutHandle: number;\n\n private startTime: number;\n\n private isMobile: boolean;\n\n private isCloseEventCalled = false;\n\n @Watch(\"isdraggable\")\n watchPropIsdraggable(newValue: boolean): void {\n if (newValue) {\n this.sliderManager.get(\"pan\").set({enable: true});\n } else {\n this.sliderManager.get(\"pan\").set({enable: false});\n }\n }\n\n @Watch(\"autoclose\")\n watchPropAutoclose(newValue: number): void {\n clearTimeout(this.timeoutHandle);\n this.startClosingTimeout(newValue);\n }\n\n @Watch(\"pauseonfocusloss\")\n watchPropPauseonfocusloss(newValue: boolean): void {\n if (this.autoclose) {\n if (newValue) {\n document.addEventListener(\"visibilitychange\", this.visibilityChangeEventHandler);\n } else {\n document.removeEventListener(\"visibilitychange\", this.visibilityChangeEventHandler);\n }\n }\n }\n\n /* notification close event /\n @Event()\n toastClose: EventEmitter;\n\n private emitToastClose(cssClass: string): void {\n this.timeoutHandle = null;\n this.elapsedTime = null;\n this.hostElement.classList.add(cssClass);\n this.toastClose.emit();\n }\n\n componentWillLoad(): void {\n this.isMobile = window.innerWidth <= mobileBreakpoint;\n this.validateAutoclose();\n this.percentage = 0;\n }\n\n componentDidLoad(): void {\n this.isTextLong = this.detectWrap() \|\| this.toastText.offsetHeight > 20;\n this.startTime = Date.now();\n if (this.autoclose && this.pauseonfocusloss) {\n document.addEventListener(\"visibilitychange\", this.visibilityChangeEventHandler);\n }\n\n this.isdraggable && this.handleSlideOutDragAnimation();\n }\n\n private visibilityChangeEventHandler(): void {\n if (document.visibilityState === \"hidden\") {\n this.timeoutHandle && this.onBlur();\n } else {\n this.elapsedTime && this.onFocus();\n }\n }\n\n private validateAutoclose(): void {\n if (!this.autoclose && !this.closebutton) {\n console.error(\"At least one between autoclose and closebutton must be present\");\n }\n }\n\n private mapSlideOutClass(): ToastNotificationTransition {\n switch (this.transition) {\n case ToastNotificationTransition.SLIDE_IN_DOWN:\n return ToastNotificationTransition.SLIDE_OUT_UP;\n case ToastNotificationTransition.SLIDE_IN_UP:\n return ToastNotificationTransition.SLIDE_OUT_DOWN;\n case ToastNotificationTransition.SLIDE_IN_LEFT:\n return ToastNotificationTransition.SLIDE_OUT_RIGHT;\n case ToastNotificationTransition.SLIDE_IN_RIGHT:\n return ToastNotificationTransition.SLIDE_OUT_LEFT;\n }\n }\n\n private calculateDraggedPercentage(e): number {\n const bounding = this.hostElement.getBoundingClientRect();\n\n return Math.round((100 e.deltaX) / bounding.width);\n }\n\n private handleSlideOutDragAnimation(): void {\n this.sliderManager = new Hammer(this.hostElement);\n this.sliderManager.get(\"pan\").set({\n direction: Hammer.DIRECTION_HORIZONTAL,\n });\n\n this.sliderManager.on(\"pan\", (e) => {\n this.percentage = this.calculateDraggedPercentage(e);\n this.hostElement.style.transition = \"none\";\n this.hostElement.classList.remove(this.transition);\n const translateObj = {\n translate: `translateX(${this.percentage}%)`,\n translateBack: \"translateX(0)\",\n };\n\n this.hostElement.style.opacity = `${100 - Math.abs(this.percentage)}%`;\n if (e.eventType === Hammer.DIRECTION_LEFT \|\| e.eventType === Hammer.DIRECTION_RIGHT) {\n this.hostElement.style.transform = translateObj.translate;\n if (Math.abs(this.percentage) > this.draggablepercentage && !this.isCloseEventCalled) {\n this.isCloseEventCalled = true;\n this.emitToastClose(e.direction === Hammer.DIRECTION_LEFT ? \"slide-out-left\" : \"slide-out-right\");\n }\n }\n\n if (e.isFinal && Math.abs(this.percentage) < this.draggablepercentage) {\n this.hostElement.style.transform = translateObj.translateBack;\n this.hostElement.style.transition = \"all 1s\";\n this.hostElement.style.opacity = \"100%\";\n this.percentage = 0;\n }\n });\n }\n\n private onFocus(): void {\n let time = this.autoclose;\n if (this.elapsedTime) {\n time = this.autoclose - this.elapsedTime;\n }\n if (time > 0) {\n this.startClosingTimeout(time);\n }\n }\n\n private onBlur(): void {\n this.elapsedTime = Date.now() - this.startTime;\n clearTimeout(this.timeoutHandle);\n }\n\n private startClosingTimeout(time: number): void {\n this.timeoutHandle = window.setTimeout(() => this.emitToastClose(this.mapSlideOutClass()), time);\n }\n\n private detectWrap(): boolean {\n const parentWidth = this.container.offsetWidth;\n const children = this.container.children;\n let totalWidth = 0;\n\n for (let i = 0; i < children.length; i++) {\n totalWidth += (children[i] as HTMLElement).offsetWidth;\n }\n\n return totalWidth > parentWidth;\n }\n\n private renderText(): HTMLDivElement {\n return (\n <div\n id=\"text\"\n ref={(el) => (this.toastText = el as HTMLElement)}\n >\n <span class=\"title\">{this.heading}</span>\n <span class=\"message\">{this.message}</span>\n </div>\n );\n }\n\n private renderButton(): HTMLDivElement {\n return (\n <div id=\"button\">\n <slot name=\"button\" />\n </div>\n );\n }\n\n private renderCloseIcon(): HTMLDivElement {\n if (!this.closebutton) {\n return;\n }\n\n return (\n <div id=\"icon\">\n <z-icon\n tabIndex={0}\n name=\"multiply-circled\"\n width={15}\n height={15}\n onClick={() => this.emitToastClose(this.mapSlideOutClass())}\n onKeyPress={(e) => {\n if (e.keyCode == 32 \|\| e.keyCode == 13) {\n e.preventDefault();\n this.emitToastClose(this.mapSlideOutClass());\n }\n }}\n />\n </div>\n );\n }\n\n private renderContainer(): HTMLDivElement {\n return (\n <div\n tabIndex={0}\n id=\"external-container\"\n class={{\n [this.type]: !!this.type,\n \"several-lines-padding\": this.isTextLong,\n }}\n ref={(el) => (this.container = el as HTMLElement)}\n >\n {this.renderText()}\n {this.renderButton()}\n {this.renderCloseIcon()}\n </div>\n );\n }\n\n private renderMobileContainer(): HTMLDivElement {\n return (\n <div\n id=\"external-container\"\n class={{\n [this.type]: !!this.type,\n \"several-lines-padding\": this.isTextLong,\n \"mobile-wrapped\": this.isTextLong,\n }}\n >\n <div\n id=\"flex-container\"\n ref={(el) => (this.container = el as HTMLElement)}\n >\n {this.renderText()}\n {this.renderButton()}\n </div>\n {this.renderCloseIcon()}\n </div>\n );\n }\n\n render(): HTMLZToastNotificationElement {\n return (\n <Host\n style={{\n \"--percentuale\": `${this.percentage}%`,\n }}\n class={this.transition ? this.transition : ToastNotificationTransition.SLIDE_IN_DOWN}\n onAnimationEnd={(e: AnimationEvent) => {\n if (this.autoclose && e.animationName.includes(\"slidein\")) {\n this.startClosingTimeout(this.autoclose);\n }\n if (e.animationName.includes(\"slideout\")) {\n this.hostElement.parentNode.removeChild(this.hostElement);\n }\n }}\n >\n {this.isMobile ? this.renderMobileContainer() : this.renderContainer()}\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/esm/z-toggle-button.entry.js CHANGED Viewed

@@ -1,6 +1,6 @@
 import { r as registerInstance, c as createEvent, h } from './index-f16bc2ca.js';
-const stylesCss = "button{display:flex;height:36px;align-items:center;padding-right:calc(var(--space-unit) * 2);padding-left:0;border:var(--border-size-medium) solid;border-color:transparent;background-color:var(--color-surface01);border-radius:var(--border-radius);box-shadow:0 0 4px 0 rgb(0 0 0 / 20%);color:var(--color-primary01);cursor:pointer;fill:var(--color-primary01);font-family:var(--font-family-sans);font-size:14px;font-weight:var(--font-sb);outline:none;text-transform:uppercase}button::-moz-focus-inner{border:0}button:hover{color:var(--color-hover-primary);fill:var(--color-hover-primary)}button:focus{box-shadow:var(--shadow-focus-primary)}button:active{border-color:var(--color-pressed-primary);box-shadow:var(--shadow-2);color:var(--color-pressed-primary);fill:var(--color-pressed-primary)}button:disabled{color:var(--color-disabled02);fill:var(--color-disabled02)}z-icon{display:inline-block;margin:0 var(--space-unit) 0 calc(var(--space-unit) * 2);transform:rotate(360deg);transition:all 200ms linear}button.isopen{top:-20px}button.avoid-clicks{pointer-events:none}";
+const stylesCss = "button{display:flex;height:36px;align-items:center;padding-right:calc(var(--space-unit) * 2);padding-left:0;border:var(--border-size-medium) solid;border-color:transparent;background-color:var(--color-surface01);border-radius:var(--border-radius);box-shadow:0 0 4px 0 rgb(0 0 0 / 20%);color:var(--color-primary01);cursor:pointer;fill:var(--color-primary01);font-family:var(--font-family-sans);font-size:14px;font-weight:var(--font-sb);outline:none;text-transform:uppercase}button::-moz-focus-inner{border:0}button:hover{color:var(--color-hover-primary);fill:var(--color-hover-primary)}button:focus{box-shadow:var(--shadow-focus-primary)}button:active{border-color:var(--color-pressed-primary);box-shadow:var(--shadow-2);color:var(--color-pressed-primary);fill:var(--color-pressed-primary)}button:disabled{color:var(--color-disabled03);fill:var(--color-disabled03)}z-icon{display:inline-block;margin:0 var(--space-unit) 0 calc(var(--space-unit) * 2);transform:rotate(360deg);transition:all 200ms linear}button.isopen{top:-20px}button.avoid-clicks{pointer-events:none}";
 const ZToggleButtonStyle0 = stylesCss;
 const ZToggleButton = class {

package/dist/esm/z-toggle-button.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"z-toggle-button.entry.js","mappings":";;AAAA,MAAM,SAAS,GAAG,4iCAA4iC,CAAC;AAC/jC,4BAAe,SAAS;;MCMX,aAAa;;;;;0BAOD,KAAK;;sBAQT,KAAK;yBAIZ,EAAE;;IAMN,eAAe;QACrB,IAAI,IAAI,CAAC,UAAU,EAAE;YACnB,OAAO;SACR;QAED,IAAI,CAAC,MAAM,GAAG,CAAC,IAAI,CAAC,MAAM,CAAC;QAC3B,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;KACpC;IAED,MAAM;QACJ,QACE,+DACE,QAAQ,EAAE,IAAI,CAAC,UAAU,GAAG,IAAI,GAAG,GAAG,EACtC,KAAK,EAAE;gBACL,QAAQ,EAAE,IAAI,CAAC,MAAM;gBACrB,cAAc,EAAE,IAAI,CAAC,UAAU;aAChC,EACD,QAAQ,EAAE,IAAI,CAAC,UAAU,mBACV,IAAI,CAAC,MAAM,GAAG,MAAM,GAAG,OAAO,gBACjC,IAAI,CAAC,SAAS,EAC1B,OAAO,EAAE,MAAM,IAAI,CAAC,eAAe,EAAE,IAErC,+DACE,IAAI,EAAE,IAAI,CAAC,MAAM,GAAG,cAAc,GAAG,YAAY,EACjD,KAAK,EAAE,EAAE,EACT,MAAM,EAAE,EAAE,GACV,EACD,IAAI,CAAC,KAAK,CACJ,EACT;KACH;;;;;;","names":[],"sources":["src/components/buttons/z-toggle-button/styles.css?tag=z-toggle-button&encapsulation=shadow","src/components/buttons/z-toggle-button/index.tsx"],"sourcesContent":["button {\n display: flex;\n height: 36px;\n align-items: center;\n padding-right: calc(var(--space-unit) * 2);\n padding-left: 0;\n border: var(--border-size-medium) solid;\n border-color: transparent;\n background-color: var(--color-surface01);\n border-radius: var(--border-radius);\n box-shadow: 0 0 4px 0 rgb(0 0 0 / 20%);\n color: var(--color-primary01);\n cursor: pointer;\n fill: var(--color-primary01);\n font-family: var(--font-family-sans);\n font-size: 14px;\n font-weight: var(--font-sb);\n outline: none;\n text-transform: uppercase;\n}\n\nbutton::-moz-focus-inner {\n border: 0;\n}\n\nbutton:hover {\n color: var(--color-hover-primary);\n fill: var(--color-hover-primary);\n}\n\nbutton:focus {\n box-shadow: var(--shadow-focus-primary);\n}\n\nbutton:active {\n border-color: var(--color-pressed-primary);\n box-shadow: var(--shadow-2);\n color: var(--color-pressed-primary);\n fill: var(--color-pressed-primary);\n}\n\nbutton:disabled {\n color: var(--color-~~disabled02~~);\n fill: var(--color-~~disabled02~~);\n}\n\nz-icon {\n display: inline-block;\n margin: 0 var(--space-unit) 0 calc(var(--space-unit) * 2);\n transform: rotate(360deg);\n transition: all 200ms linear;\n}\n\nbutton.isopen {\n top: -20px;\n}\n\nbutton.avoid-clicks {\n pointer-events: none;\n}\n","import {Component, Prop, h, Event, EventEmitter} from \"@stencil/core\";\n\n@Component({\n tag: \"z-toggle-button\",\n styleUrl: \"styles.css\",\n shadow: true,\n})\nexport class ZToggleButton {\n /** label text /\n @Prop()\n label: string;\n\n /* disabled status flag (optional) /\n @Prop()\n isdisabled?: boolean = false;\n\n /* avoidclick status flag /\n @Prop()\n avoidclick: boolean;\n\n /* open by default (optional) /\n @Prop({mutable: true})\n opened?: boolean = false;\n\n /* aria-label for the button /\n @Prop()\n ariaLabel = \"\";\n\n /* emitted on toggle button click, returns isOpen */\n @Event()\n toggleClick: EventEmitter;\n\n private emitToggleClick(): void {\n if (this.isdisabled) {\n return;\n }\n\n this.opened = !this.opened;\n this.toggleClick.emit(this.opened);\n }\n\n render(): HTMLButtonElement {\n return (\n <button\n tabindex={this.avoidclick ? \"-1\" : \"0\"}\n class={{\n \"isopen\": this.opened,\n \"avoid-clicks\": this.avoidclick,\n }}\n disabled={this.isdisabled}\n aria-expanded={this.opened ? \"true\" : \"false\"}\n aria-label={this.ariaLabel}\n onClick={() => this.emitToggleClick()}\n >\n <z-icon\n name={this.opened ? \"chevron-down\" : \"chevron-up\"}\n width={16}\n height={16}\n />\n {this.label}\n </button>\n );\n }\n}\n"],"version":3}
1	+ {"file":"z-toggle-button.entry.js","mappings":";;AAAA,MAAM,SAAS,GAAG,4iCAA4iC,CAAC;AAC/jC,4BAAe,SAAS;;MCMX,aAAa;;;;;0BAOD,KAAK;;sBAQT,KAAK;yBAIZ,EAAE;;IAMN,eAAe;QACrB,IAAI,IAAI,CAAC,UAAU,EAAE;YACnB,OAAO;SACR;QAED,IAAI,CAAC,MAAM,GAAG,CAAC,IAAI,CAAC,MAAM,CAAC;QAC3B,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;KACpC;IAED,MAAM;QACJ,QACE,+DACE,QAAQ,EAAE,IAAI,CAAC,UAAU,GAAG,IAAI,GAAG,GAAG,EACtC,KAAK,EAAE;gBACL,QAAQ,EAAE,IAAI,CAAC,MAAM;gBACrB,cAAc,EAAE,IAAI,CAAC,UAAU;aAChC,EACD,QAAQ,EAAE,IAAI,CAAC,UAAU,mBACV,IAAI,CAAC,MAAM,GAAG,MAAM,GAAG,OAAO,gBACjC,IAAI,CAAC,SAAS,EAC1B,OAAO,EAAE,MAAM,IAAI,CAAC,eAAe,EAAE,IAErC,+DACE,IAAI,EAAE,IAAI,CAAC,MAAM,GAAG,cAAc,GAAG,YAAY,EACjD,KAAK,EAAE,EAAE,EACT,MAAM,EAAE,EAAE,GACV,EACD,IAAI,CAAC,KAAK,CACJ,EACT;KACH;;;;;;","names":[],"sources":["src/components/buttons/z-toggle-button/styles.css?tag=z-toggle-button&encapsulation=shadow","src/components/buttons/z-toggle-button/index.tsx"],"sourcesContent":["button {\n display: flex;\n height: 36px;\n align-items: center;\n padding-right: calc(var(--space-unit) * 2);\n padding-left: 0;\n border: var(--border-size-medium) solid;\n border-color: transparent;\n background-color: var(--color-surface01);\n border-radius: var(--border-radius);\n box-shadow: 0 0 4px 0 rgb(0 0 0 / 20%);\n color: var(--color-primary01);\n cursor: pointer;\n fill: var(--color-primary01);\n font-family: var(--font-family-sans);\n font-size: 14px;\n font-weight: var(--font-sb);\n outline: none;\n text-transform: uppercase;\n}\n\nbutton::-moz-focus-inner {\n border: 0;\n}\n\nbutton:hover {\n color: var(--color-hover-primary);\n fill: var(--color-hover-primary);\n}\n\nbutton:focus {\n box-shadow: var(--shadow-focus-primary);\n}\n\nbutton:active {\n border-color: var(--color-pressed-primary);\n box-shadow: var(--shadow-2);\n color: var(--color-pressed-primary);\n fill: var(--color-pressed-primary);\n}\n\nbutton:disabled {\n color: var(--color-disabled03);\n fill: var(--color-disabled03);\n}\n\nz-icon {\n display: inline-block;\n margin: 0 var(--space-unit) 0 calc(var(--space-unit) * 2);\n transform: rotate(360deg);\n transition: all 200ms linear;\n}\n\nbutton.isopen {\n top: -20px;\n}\n\nbutton.avoid-clicks {\n pointer-events: none;\n}\n","import {Component, Prop, h, Event, EventEmitter} from \"@stencil/core\";\n\n@Component({\n tag: \"z-toggle-button\",\n styleUrl: \"styles.css\",\n shadow: true,\n})\nexport class ZToggleButton {\n /** label text /\n @Prop()\n label: string;\n\n /* disabled status flag (optional) /\n @Prop()\n isdisabled?: boolean = false;\n\n /* avoidclick status flag /\n @Prop()\n avoidclick: boolean;\n\n /* open by default (optional) /\n @Prop({mutable: true})\n opened?: boolean = false;\n\n /* aria-label for the button /\n @Prop()\n ariaLabel = \"\";\n\n /* emitted on toggle button click, returns isOpen */\n @Event()\n toggleClick: EventEmitter;\n\n private emitToggleClick(): void {\n if (this.isdisabled) {\n return;\n }\n\n this.opened = !this.opened;\n this.toggleClick.emit(this.opened);\n }\n\n render(): HTMLButtonElement {\n return (\n <button\n tabindex={this.avoidclick ? \"-1\" : \"0\"}\n class={{\n \"isopen\": this.opened,\n \"avoid-clicks\": this.avoidclick,\n }}\n disabled={this.isdisabled}\n aria-expanded={this.opened ? \"true\" : \"false\"}\n aria-label={this.ariaLabel}\n onClick={() => this.emitToggleClick()}\n >\n <z-icon\n name={this.opened ? \"chevron-down\" : \"chevron-up\"}\n width={16}\n height={16}\n />\n {this.label}\n </button>\n );\n }\n}\n"],"version":3}

package/dist/esm/z-toggle-switch.entry.js CHANGED Viewed

@@ -3,7 +3,7 @@ import { r as randomId } from './utils-7983d02c.js';
 import { k as LabelPosition } from './index-2255c6c8.js';
 import './breakpoints-680e0e56.js';
-const stylesCss = ".sc-z-toggle-switch-h{position:relative;display:inline-flex;font-family:var(--font-family-sans);font-weight:var(--font-rg)}label.sc-z-toggle-switch{display:flex;flex-direction:row;align-items:center;cursor:pointer}label.disabled.sc-z-toggle-switch{cursor:default}label.right.sc-z-toggle-switch{flex-direction:row-reverse}label.sc-z-toggle-switch>span.sc-z-toggle-switch:first-child{color:var(--color-text01);letter-spacing:0}label.left.sc-z-toggle-switch>span.sc-z-toggle-switch:first-child{margin-right:var(--space-unit)}label.right.sc-z-toggle-switch>span.sc-z-toggle-switch:first-child{margin-left:var(--space-unit)}label.sc-z-toggle-switch>span.container.sc-z-toggle-switch{position:relative;top:1px;left:1px;display:flex;width:calc(var(--space-unit) * 4);height:18px;align-items:center;background-color:var(--gray500);border-radius:var(--space-unit);color:var(--gray500);cursor:pointer}label.sc-z-toggle-switch>span.container.disabled.sc-z-toggle-switch,label.sc-z-toggle-switch>span.container.checked.disabled.sc-z-toggle-switch{background-color:var(--color-disabled01);cursor:default}label.sc-z-toggle-switch>span.container.checked.disabled.sc-z-toggle-switch>span.circle.sc-z-toggle-switch>z-icon.sc-z-toggle-switch{fill:var(--color-disabled01)}label.sc-z-toggle-switch>span.container.checked.sc-z-toggle-switch{background-color:var(--color-primary01);fill:var(--color-primary01)}input.sc-z-toggle-switch:focus:focus-visible+label.sc-z-toggle-switch>span.container.sc-z-toggle-switch:not(.disabled){box-shadow:var(--shadow-focus-primary);outline:none}input.sc-z-toggle-switch:focus:focus-visible+label.sc-z-toggle-switch>span.container.disabled.sc-z-toggle-switch{outline:none}label.sc-z-toggle-switch>span.container.sc-z-toggle-switch:not(.disabled):hover{background-color:var(--color-hover-primary);fill:var(--color-hover-primary)}label.sc-z-toggle-switch>span.container.sc-z-toggle-switch>span.circle.sc-z-toggle-switch{position:absolute;top:1px;left:1px;display:flex;width:calc(var(--space-unit) * 2);height:calc(var(--space-unit) * 2);align-items:center;justify-content:center;margin:0;background-color:var(--color-white);border-radius:7px;box-shadow:var(--shadow-1);transition:transform 0.3s ease}label.sc-z-toggle-switch>span.container.checked.sc-z-toggle-switch>span.circle.sc-z-toggle-switch{transform:translateX(calc(100% - 2px))}input[type=\"checkbox\"].sc-z-toggle-switch{position:absolute;z-index:-1;opacity:0;pointer-events:none}";
+const stylesCss = ".sc-z-toggle-switch-h{position:relative;display:inline-flex;font-family:var(--font-family-sans);font-weight:var(--font-rg)}label.sc-z-toggle-switch{display:flex;flex-direction:row;align-items:center;cursor:pointer}label.disabled.sc-z-toggle-switch{cursor:default}label.right.sc-z-toggle-switch{flex-direction:row-reverse}label.sc-z-toggle-switch>span.sc-z-toggle-switch:first-child{color:var(--color-default-text);letter-spacing:0}label.left.sc-z-toggle-switch>span.sc-z-toggle-switch:first-child{margin-right:var(--space-unit)}label.right.sc-z-toggle-switch>span.sc-z-toggle-switch:first-child{margin-left:var(--space-unit)}label.sc-z-toggle-switch>span.container.sc-z-toggle-switch{position:relative;top:1px;left:1px;display:flex;width:calc(var(--space-unit) * 4);height:18px;align-items:center;background-color:var(--gray500);border-radius:var(--space-unit);color:var(--gray500);cursor:pointer}label.sc-z-toggle-switch>span.container.disabled.sc-z-toggle-switch,label.sc-z-toggle-switch>span.container.checked.disabled.sc-z-toggle-switch{background-color:var(--color-disabled01);cursor:default}label.sc-z-toggle-switch>span.container.checked.disabled.sc-z-toggle-switch>span.circle.sc-z-toggle-switch>z-icon.sc-z-toggle-switch{fill:var(--color-disabled01)}label.sc-z-toggle-switch>span.container.checked.sc-z-toggle-switch{background-color:var(--color-primary01);fill:var(--color-primary01)}input.sc-z-toggle-switch:focus:focus-visible+label.sc-z-toggle-switch>span.container.sc-z-toggle-switch:not(.disabled){box-shadow:var(--shadow-focus-primary);outline:none}input.sc-z-toggle-switch:focus:focus-visible+label.sc-z-toggle-switch>span.container.disabled.sc-z-toggle-switch{outline:none}label.sc-z-toggle-switch>span.container.sc-z-toggle-switch:not(.disabled):hover{background-color:var(--color-hover-primary);fill:var(--color-hover-primary)}label.sc-z-toggle-switch>span.container.sc-z-toggle-switch>span.circle.sc-z-toggle-switch{position:absolute;top:1px;left:1px;display:flex;width:calc(var(--space-unit) * 2);height:calc(var(--space-unit) * 2);align-items:center;justify-content:center;margin:0;background-color:var(--color-white);border-radius:7px;box-shadow:var(--shadow-1);transition:transform 0.3s ease}label.sc-z-toggle-switch>span.container.checked.sc-z-toggle-switch>span.circle.sc-z-toggle-switch{transform:translateX(calc(100% - 2px))}input[type=\"checkbox\"].sc-z-toggle-switch{position:absolute;z-index:-1;opacity:0;pointer-events:none}";
 const ZToggleSwitchStyle0 = stylesCss;
 const ZToggleSwitch = class {

package/dist/esm/z-toggle-switch.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"z-toggle-switch.entry.js","mappings":";;;;;AAAA,MAAM,SAAS,GAAG,~~q5EAAq5E~~,CAAC;~~AACx6E~~,4BAAe,SAAS;;MCSX,aAAa;;;;wBAGH,KAAK;6BAIT,aAAa,CAAC,IAAI;uBAIf,KAAK;sBAIhB,oBAAoB,QAAQ,EAAE,EAAE;;IAMjC,eAAe;QACrB,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC;YACpB,EAAE,EAAE,IAAI,CAAC,MAAM;YACf,OAAO,EAAE,IAAI,CAAC,OAAO;SACtB,CAAC,CAAC;KACJ;IAEO,WAAW,CAAC,EAAE;QACpB,IAAI,IAAI,CAAC,QAAQ,EAAE;YACjB,OAAO;SACR;QAED,IAAI,CAAC,OAAO,GAAG,EAAE,CAAC,MAAM,CAAC,OAAO,CAAC;QACjC,IAAI,CAAC,eAAe,EAAE,CAAC;KACxB;IAED,MAAM;QACJ,QACE,EAAC,IAAI,uDACH,8DACE,EAAE,EAAE,IAAI,CAAC,MAAM,EACf,IAAI,EAAC,UAAU,EACf,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,QAAQ,EAAE,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,GACrC,EACF,8DACE,OAAO,EAAE,IAAI,CAAC,MAAM,EACpB,KAAK,EAAE;gBACL,CAAC,IAAI,CAAC,aAAa,GAAG,IAAI;gBAC1B,QAAQ,EAAE,IAAI,CAAC,QAAQ;aACxB,IAED,+DACE,8DAAQ,CACH,EACP,6DACE,KAAK,EAAE;gBACL,SAAS,EAAE,IAAI;gBACf,QAAQ,EAAE,IAAI,CAAC,QAAQ;gBACvB,OAAO,EAAE,IAAI,CAAC,OAAO;aACtB,IAED,6DAAM,KAAK,EAAC,QAAQ,IACjB,IAAI,CAAC,OAAO,KACX,cACE,KAAK,EAAE,EAAE,EACT,MAAM,EAAE,EAAE,EACV,IAAI,EAAC,WAAW,GACR,CACX,CACI,CACF,CACD,CACH,EACP;KACH;;;;;;","names":[],"sources":["src/components/buttons/z-toggle-switch/styles.css?tag=z-toggle-switch&encapsulation=scoped","src/components/buttons/z-toggle-switch/index.tsx"],"sourcesContent":[":host {\n position: relative;\n display: inline-flex;\n font-family: var(--font-family-sans);\n font-weight: var(--font-rg);\n}\n\nlabel {\n display: flex;\n flex-direction: row;\n align-items: center;\n cursor: pointer;\n}\n\nlabel.disabled {\n cursor: default;\n}\n\nlabel.right {\n flex-direction: row-reverse;\n}\n\nlabel > span:first-child {\n color: var(--color-~~text01~~);\n letter-spacing: 0;\n}\n\nlabel.left > span:first-child {\n margin-right: var(--space-unit);\n}\n\nlabel.right > span:first-child {\n margin-left: var(--space-unit);\n}\n\nlabel > span.container {\n position: relative;\n top: 1px;\n left: 1px;\n display: flex;\n width: calc(var(--space-unit) * 4);\n height: 18px;\n align-items: center;\n background-color: var(--gray500);\n border-radius: var(--space-unit);\n color: var(--gray500);\n cursor: pointer;\n}\n\nlabel > span.container.disabled,\nlabel > span.container.checked.disabled {\n background-color: var(--color-disabled01);\n cursor: default;\n}\n\nlabel > span.container.checked.disabled > span.circle > z-icon {\n fill: var(--color-disabled01);\n}\n\nlabel > span.container.checked {\n background-color: var(--color-primary01);\n fill: var(--color-primary01);\n}\n\ninput:focus:focus-visible + label > span.container:not(.disabled) {\n box-shadow: var(--shadow-focus-primary);\n outline: none;\n}\n\ninput:focus:focus-visible + label > span.container.disabled {\n outline: none;\n}\n\nlabel > span.container:not(.disabled):hover {\n background-color: var(--color-hover-primary);\n fill: var(--color-hover-primary);\n}\n\nlabel > span.container > span.circle {\n position: absolute;\n top: 1px;\n left: 1px;\n display: flex;\n width: calc(var(--space-unit) * 2);\n height: calc(var(--space-unit) * 2);\n align-items: center;\n justify-content: center;\n margin: 0;\n background-color: var(--color-white);\n border-radius: 7px;\n box-shadow: var(--shadow-1);\n transition: transform 0.3s ease;\n}\n\nlabel > span.container.checked > span.circle {\n transform: translateX(calc(100% - 2px));\n}\n\ninput[type=\"checkbox\"] {\n position: absolute;\n z-index: -1;\n opacity: 0;\n pointer-events: none;\n}\n","import {Component, Prop, h, Event, EventEmitter, Host} from \"@stencil/core\";\nimport {randomId} from \"../../../utils/utils\";\nimport {LabelPosition} from \"../../../beans\";\n\n@Component({\n tag: \"z-toggle-switch\",\n styleUrl: \"styles.css\",\n shadow: false,\n scoped: true,\n})\nexport class ZToggleSwitch {\n /** Disabled flag /\n @Prop({reflect: true})\n disabled?: boolean = false;\n\n /* Label position /\n @Prop({reflect: true})\n labelPosition? = LabelPosition.LEFT;\n\n /* Checked state /\n @Prop({mutable: true})\n checked?: boolean = false;\n\n /* HTML id attribute to set to the internal checkbox /\n @Prop()\n htmlid = `toggle-switch-id-${randomId()}`;\n\n /* Toggle click event */\n @Event()\n toggleClick: EventEmitter;\n\n private emitToggleClick(): void {\n this.toggleClick.emit({\n id: this.htmlid,\n checked: this.checked,\n });\n }\n\n private handleClick(ev): void {\n if (this.disabled) {\n return;\n }\n\n this.checked = ev.target.checked;\n this.emitToggleClick();\n }\n\n render(): HTMLZToggleSwitchElement {\n return (\n <Host>\n <input\n id={this.htmlid}\n type=\"checkbox\"\n checked={this.checked}\n disabled={this.disabled}\n onChange={this.handleClick.bind(this)}\n />\n <label\n htmlFor={this.htmlid}\n class={{\n [this.labelPosition]: true,\n disabled: this.disabled,\n }}\n >\n <span>\n <slot />\n </span>\n <span\n class={{\n container: true,\n disabled: this.disabled,\n checked: this.checked,\n }}\n >\n <span class=\"circle\">\n {this.checked && (\n <z-icon\n width={12}\n height={12}\n name=\"checkmark\"\n ></z-icon>\n )}\n </span>\n </span>\n </label>\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"z-toggle-switch.entry.js","mappings":";;;;;AAAA,MAAM,SAAS,GAAG,25EAA25E,CAAC;AAC96E,4BAAe,SAAS;;MCSX,aAAa;;;;wBAGH,KAAK;6BAIT,aAAa,CAAC,IAAI;uBAIf,KAAK;sBAIhB,oBAAoB,QAAQ,EAAE,EAAE;;IAMjC,eAAe;QACrB,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC;YACpB,EAAE,EAAE,IAAI,CAAC,MAAM;YACf,OAAO,EAAE,IAAI,CAAC,OAAO;SACtB,CAAC,CAAC;KACJ;IAEO,WAAW,CAAC,EAAE;QACpB,IAAI,IAAI,CAAC,QAAQ,EAAE;YACjB,OAAO;SACR;QAED,IAAI,CAAC,OAAO,GAAG,EAAE,CAAC,MAAM,CAAC,OAAO,CAAC;QACjC,IAAI,CAAC,eAAe,EAAE,CAAC;KACxB;IAED,MAAM;QACJ,QACE,EAAC,IAAI,uDACH,8DACE,EAAE,EAAE,IAAI,CAAC,MAAM,EACf,IAAI,EAAC,UAAU,EACf,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,QAAQ,EAAE,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,GACrC,EACF,8DACE,OAAO,EAAE,IAAI,CAAC,MAAM,EACpB,KAAK,EAAE;gBACL,CAAC,IAAI,CAAC,aAAa,GAAG,IAAI;gBAC1B,QAAQ,EAAE,IAAI,CAAC,QAAQ;aACxB,IAED,+DACE,8DAAQ,CACH,EACP,6DACE,KAAK,EAAE;gBACL,SAAS,EAAE,IAAI;gBACf,QAAQ,EAAE,IAAI,CAAC,QAAQ;gBACvB,OAAO,EAAE,IAAI,CAAC,OAAO;aACtB,IAED,6DAAM,KAAK,EAAC,QAAQ,IACjB,IAAI,CAAC,OAAO,KACX,cACE,KAAK,EAAE,EAAE,EACT,MAAM,EAAE,EAAE,EACV,IAAI,EAAC,WAAW,GACR,CACX,CACI,CACF,CACD,CACH,EACP;KACH;;;;;;","names":[],"sources":["src/components/buttons/z-toggle-switch/styles.css?tag=z-toggle-switch&encapsulation=scoped","src/components/buttons/z-toggle-switch/index.tsx"],"sourcesContent":[":host {\n position: relative;\n display: inline-flex;\n font-family: var(--font-family-sans);\n font-weight: var(--font-rg);\n}\n\nlabel {\n display: flex;\n flex-direction: row;\n align-items: center;\n cursor: pointer;\n}\n\nlabel.disabled {\n cursor: default;\n}\n\nlabel.right {\n flex-direction: row-reverse;\n}\n\nlabel > span:first-child {\n color: var(--color-default-text);\n letter-spacing: 0;\n}\n\nlabel.left > span:first-child {\n margin-right: var(--space-unit);\n}\n\nlabel.right > span:first-child {\n margin-left: var(--space-unit);\n}\n\nlabel > span.container {\n position: relative;\n top: 1px;\n left: 1px;\n display: flex;\n width: calc(var(--space-unit) * 4);\n height: 18px;\n align-items: center;\n background-color: var(--gray500);\n border-radius: var(--space-unit);\n color: var(--gray500);\n cursor: pointer;\n}\n\nlabel > span.container.disabled,\nlabel > span.container.checked.disabled {\n background-color: var(--color-disabled01);\n cursor: default;\n}\n\nlabel > span.container.checked.disabled > span.circle > z-icon {\n fill: var(--color-disabled01);\n}\n\nlabel > span.container.checked {\n background-color: var(--color-primary01);\n fill: var(--color-primary01);\n}\n\ninput:focus:focus-visible + label > span.container:not(.disabled) {\n box-shadow: var(--shadow-focus-primary);\n outline: none;\n}\n\ninput:focus:focus-visible + label > span.container.disabled {\n outline: none;\n}\n\nlabel > span.container:not(.disabled):hover {\n background-color: var(--color-hover-primary);\n fill: var(--color-hover-primary);\n}\n\nlabel > span.container > span.circle {\n position: absolute;\n top: 1px;\n left: 1px;\n display: flex;\n width: calc(var(--space-unit) * 2);\n height: calc(var(--space-unit) * 2);\n align-items: center;\n justify-content: center;\n margin: 0;\n background-color: var(--color-white);\n border-radius: 7px;\n box-shadow: var(--shadow-1);\n transition: transform 0.3s ease;\n}\n\nlabel > span.container.checked > span.circle {\n transform: translateX(calc(100% - 2px));\n}\n\ninput[type=\"checkbox\"] {\n position: absolute;\n z-index: -1;\n opacity: 0;\n pointer-events: none;\n}\n","import {Component, Prop, h, Event, EventEmitter, Host} from \"@stencil/core\";\nimport {randomId} from \"../../../utils/utils\";\nimport {LabelPosition} from \"../../../beans\";\n\n@Component({\n tag: \"z-toggle-switch\",\n styleUrl: \"styles.css\",\n shadow: false,\n scoped: true,\n})\nexport class ZToggleSwitch {\n /** Disabled flag /\n @Prop({reflect: true})\n disabled?: boolean = false;\n\n /* Label position /\n @Prop({reflect: true})\n labelPosition? = LabelPosition.LEFT;\n\n /* Checked state /\n @Prop({mutable: true})\n checked?: boolean = false;\n\n /* HTML id attribute to set to the internal checkbox /\n @Prop()\n htmlid = `toggle-switch-id-${randomId()}`;\n\n /* Toggle click event */\n @Event()\n toggleClick: EventEmitter;\n\n private emitToggleClick(): void {\n this.toggleClick.emit({\n id: this.htmlid,\n checked: this.checked,\n });\n }\n\n private handleClick(ev): void {\n if (this.disabled) {\n return;\n }\n\n this.checked = ev.target.checked;\n this.emitToggleClick();\n }\n\n render(): HTMLZToggleSwitchElement {\n return (\n <Host>\n <input\n id={this.htmlid}\n type=\"checkbox\"\n checked={this.checked}\n disabled={this.disabled}\n onChange={this.handleClick.bind(this)}\n />\n <label\n htmlFor={this.htmlid}\n class={{\n [this.labelPosition]: true,\n disabled: this.disabled,\n }}\n >\n <span>\n <slot />\n </span>\n <span\n class={{\n container: true,\n disabled: this.disabled,\n checked: this.checked,\n }}\n >\n <span class=\"circle\">\n {this.checked && (\n <z-icon\n width={12}\n height={12}\n name=\"checkmark\"\n ></z-icon>\n )}\n </span>\n </span>\n </label>\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/esm/z-tooltip.entry.js CHANGED Viewed

@@ -1,7 +1,7 @@
 import { r as registerInstance, h } from './index-f16bc2ca.js';
 import { P as PopoverPosition } from './index-2255c6c8.js';
-const stylesCss = ":host{--z-tooltip-theme--surface:var(--color-surface01);--z-tooltip-theme--text:var(--color-text01);--z-tooltip-shadow-filter:drop-shadow(0 1px 2px var(--shadow-color-base))}:host([dark]) z-popover{--z-popover-theme--surface:var(--color-surface05);--z-popover-theme--text:var(--color-text-inverse)}z-popover{--z-popover-padding:var(--space-unit);--z-popover-theme--surface:var(--z-tooltip-theme--surface);--z-popover-theme--text:var(--z-tooltip-theme--text);--z-popover-shadow-filter:var(--z-tooltip-shadow-filter)}";
+const stylesCss = ":host{--z-tooltip-theme--surface:var(--color-surface01);--z-tooltip-theme--text:var(--color-default-text);--z-tooltip-shadow-filter:drop-shadow(0 1px 2px var(--shadow-color-base))}:host([dark]) z-popover{--z-popover-theme--surface:var(--color-surface05);--z-popover-theme--text:var(--color-text-inverse)}z-popover{--z-popover-padding:var(--space-unit);--z-popover-theme--surface:var(--z-tooltip-theme--surface);--z-popover-theme--text:var(--z-tooltip-theme--text);--z-popover-shadow-filter:var(--z-tooltip-shadow-filter)}";
 const ZTooltipStyle0 = stylesCss;
 const ZTooltip = class {

package/dist/esm/z-tooltip.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"z-tooltip.entry.js","mappings":";;;AAAA,MAAM,SAAS,GAAG,~~qgBAAqgB~~,CAAC;~~AACxhB~~,uBAAe,SAAS;;MCeX,QAAQ;;;wBAGS,eAAe,CAAC,IAAI;oBAIzC,KAAK;oBAML,KAAK;;wBAcD,IAAI;;IAKf,mBAAmB;QACjB,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC;KACjC;IAED,MAAM;QACJ,QACE,kEACE,GAAG,EAAE,CAAC,EAAE,MAAM,IAAI,CAAC,SAAS,GAAG,EAAyB,CAAC,EACzD,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,MAAM,QACN,SAAS,UAET,8DAAa,CACH,EACZ;KACH;;;;;;","names":[],"sources":["src/components/notification/z-tooltip/styles.css?tag=z-tooltip&encapsulation=shadow","src/components/notification/z-tooltip/index.tsx"],"sourcesContent":[":host {\n --z-tooltip-theme--surface: var(--color-surface01);\n --z-tooltip-theme--text: var(--color-~~text01~~);\n --z-tooltip-shadow-filter: drop-shadow(0 1px 2px var(--shadow-color-base));\n}\n\n:host([dark]) z-popover {\n --z-popover-theme--surface: var(--color-surface05);\n --z-popover-theme--text: var(--color-text-inverse);\n}\n\nz-popover {\n --z-popover-padding: var(--space-unit);\n --z-popover-theme--surface: var(--z-tooltip-theme--surface);\n --z-popover-theme--text: var(--z-tooltip-theme--text);\n --z-popover-shadow-filter: var(--z-tooltip-shadow-filter);\n}\n","import {Component, Prop, h, Listen} from \"@stencil/core\";\nimport {PopoverPosition} from \"../../../beans\";\n\n/*\n Tooltip component.\n * It is basically a wrapper for the `<z-popover>` component with custom configuration.\n \n @cssprop --z-tooltip-theme--surface - background color of the popover.\n * @cssprop --z-tooltip-theme--text - foreground color of the popover.\n * @cssprop --z-tooltip-shadow-filter - drop-shadow filter of the popover.\n /\n@Component({\n tag: \"z-tooltip\",\n styleUrl: \"styles.css\",\n shadow: true,\n})\nexport class ZTooltip {\n /* Tooltip position. /\n @Prop({reflect: true})\n position: PopoverPosition = PopoverPosition.AUTO;\n\n /* Enable tooltip dark mode. /\n @Prop({reflect: true})\n dark = false;\n\n /\n The open state of the tooltip.\n /\n @Prop({reflect: true, mutable: true})\n open = false;\n\n /\n The selector or the element bound with the tooltip.\n /\n @Prop()\n bindTo?: string \| HTMLElement;\n\n /\n Reflects `closable` prop of the popover.\n * \"If true, the popover can be closed by clicking outside of it or pressing the escape key.\n * Otherwise, it will be closed only programmatically (by setting `open` to `false`).\"\n */\n @Prop()\n closable = true;\n\n private popoverEl: HTMLZPopoverElement;\n\n @Listen(\"openChange\")\n onPopoverOpenChange(): void {\n this.open = this.popoverEl.open;\n }\n\n render(): HTMLZPopoverElement {\n return (\n <z-popover\n ref={(el) => (this.popoverEl = el as HTMLZPopoverElement)}\n bindTo={this.bindTo}\n open={this.open}\n position={this.position}\n closable={this.closable}\n center\n showArrow\n >\n <slot></slot>\n </z-popover>\n );\n }\n}\n"],"version":3}
1	+ {"file":"z-tooltip.entry.js","mappings":";;;AAAA,MAAM,SAAS,GAAG,2gBAA2gB,CAAC;AAC9hB,uBAAe,SAAS;;MCeX,QAAQ;;;wBAGS,eAAe,CAAC,IAAI;oBAIzC,KAAK;oBAML,KAAK;;wBAcD,IAAI;;IAKf,mBAAmB;QACjB,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC;KACjC;IAED,MAAM;QACJ,QACE,kEACE,GAAG,EAAE,CAAC,EAAE,MAAM,IAAI,CAAC,SAAS,GAAG,EAAyB,CAAC,EACzD,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,MAAM,QACN,SAAS,UAET,8DAAa,CACH,EACZ;KACH;;;;;;","names":[],"sources":["src/components/notification/z-tooltip/styles.css?tag=z-tooltip&encapsulation=shadow","src/components/notification/z-tooltip/index.tsx"],"sourcesContent":[":host {\n --z-tooltip-theme--surface: var(--color-surface01);\n --z-tooltip-theme--text: var(--color-default-text);\n --z-tooltip-shadow-filter: drop-shadow(0 1px 2px var(--shadow-color-base));\n}\n\n:host([dark]) z-popover {\n --z-popover-theme--surface: var(--color-surface05);\n --z-popover-theme--text: var(--color-text-inverse);\n}\n\nz-popover {\n --z-popover-padding: var(--space-unit);\n --z-popover-theme--surface: var(--z-tooltip-theme--surface);\n --z-popover-theme--text: var(--z-tooltip-theme--text);\n --z-popover-shadow-filter: var(--z-tooltip-shadow-filter);\n}\n","import {Component, Prop, h, Listen} from \"@stencil/core\";\nimport {PopoverPosition} from \"../../../beans\";\n\n/*\n Tooltip component.\n * It is basically a wrapper for the `<z-popover>` component with custom configuration.\n \n @cssprop --z-tooltip-theme--surface - background color of the popover.\n * @cssprop --z-tooltip-theme--text - foreground color of the popover.\n * @cssprop --z-tooltip-shadow-filter - drop-shadow filter of the popover.\n /\n@Component({\n tag: \"z-tooltip\",\n styleUrl: \"styles.css\",\n shadow: true,\n})\nexport class ZTooltip {\n /* Tooltip position. /\n @Prop({reflect: true})\n position: PopoverPosition = PopoverPosition.AUTO;\n\n /* Enable tooltip dark mode. /\n @Prop({reflect: true})\n dark = false;\n\n /\n The open state of the tooltip.\n /\n @Prop({reflect: true, mutable: true})\n open = false;\n\n /\n The selector or the element bound with the tooltip.\n /\n @Prop()\n bindTo?: string \| HTMLElement;\n\n /\n Reflects `closable` prop of the popover.\n * \"If true, the popover can be closed by clicking outside of it or pressing the escape key.\n * Otherwise, it will be closed only programmatically (by setting `open` to `false`).\"\n */\n @Prop()\n closable = true;\n\n private popoverEl: HTMLZPopoverElement;\n\n @Listen(\"openChange\")\n onPopoverOpenChange(): void {\n this.open = this.popoverEl.open;\n }\n\n render(): HTMLZPopoverElement {\n return (\n <z-popover\n ref={(el) => (this.popoverEl = el as HTMLZPopoverElement)}\n bindTo={this.bindTo}\n open={this.open}\n position={this.position}\n closable={this.closable}\n center\n showArrow\n >\n <slot></slot>\n </z-popover>\n );\n }\n}\n"],"version":3}

package/dist/types/components/navigation/z-app-header/index.d.ts CHANGED Viewed

@@ -46,7 +46,7 @@ import { EventEmitter } from "../../../stencil-public-runtime";
  * @cssprop --app-header-drawer-trigger-size - The size of the drawer icon. Defaults to `--space-unit * 4`.
  * @cssprop --app-header-bg - Header background color. Defaults to `--color-surface01`.
  * @cssprop --app-header-stucked-bg - Stuck header background color. Defaults to `--color-surface01`.
- * @cssprop --app-header-text-color - Text color. Useful on `hero` variant to set text color based on the colors of the background image. Defaults to `--color-text01`.
+ * @cssprop --app-header-text-color - Text color. Useful on `hero` variant to set text color based on the colors of the background image. Defaults to `--color-default-text`.
  * @cssprop --app-header-title-font-size - Variable to customize the title's font size.
  * NOTE: Only use one of the exported `--app-header-typography-*-size` as a value.
  * Defaults to `--app-header-typography-3-size`.
@@ -56,7 +56,7 @@ import { EventEmitter } from "../../../stencil-public-runtime";
  * @cssprop --app-header-title-letter-spacing - Variable to customize the title's letter-spacing.
  * NOTE: Only use one of the exported `--app-header-typography-*-tracking` as a value and use the same level as the one of the font size.
  * Defaults to `--app-header-typography-3-tracking`.
- * @cssprop --app-header-stucked-text-color - Stuck header text color. Defaults to `--color-text01`.
+ * @cssprop --app-header-stucked-text-color - Stuck header text color. Defaults to `--color-default-text`.
  */
 export declare class ZAppHeader {
     hostElement: HTMLZAppHeaderElement;

package/dist/types/components/z-accordion/index.d.ts CHANGED Viewed

@@ -7,10 +7,10 @@ import { ControlSize, AccordionVariant } from "../../beans";
  * @slot tag - Slot for tags.
  * @cssprop --z-accordion-highlight-color - Color of the highlight band on the summary's left edge. Only applies when `highlight` is true. Default: `transparent`.
  * @cssprop --z-accordion-bg - Background color of the summary. Default: `--color-surface02`.
- * @cssprop --z-accordion-label-color - Label color. Default: `--color-text01`.
+ * @cssprop --z-accordion-label-color - Label color. Default: `--color-default-text`.
  * @cssprop --z-accordion-disabled-label-color - Label color when disabled. Default: `--color-text03`.
  * @cssprop --z-accordion-content-bg - Background color of the accordion. Default: `--color-surface02`.
- * @cssprop --z-accordion-content-fg - Content text color. Default: `--color-text01`.
+ * @cssprop --z-accordion-content-fg - Content text color. Default: `--color-default-text`.
  * @cssprop --z-accordion-hover-color - Hover color of the summary. Default: `--color-surface03`.
  * @cssprop --z-accordion-left-padding - Left padding of the summary. Default: `--space-unit` * 2.
  * @cssprop --z-accordion-right-padding - Right padding of the summary. Default: `--space-unit`.

package/dist/types/components.d.ts CHANGED Viewed

@@ -16,10 +16,10 @@ export namespace Components {
      * Accordion component.
      * @cssprop --z-accordion-highlight-color - Color of the highlight band on the summary's left edge. Only applies when `highlight` is true. Default: `transparent`.
      * @cssprop --z-accordion-bg - Background color of the summary. Default: `--color-surface02`.
-     * @cssprop --z-accordion-label-color - Label color. Default: `--color-text01`.
+     * @cssprop --z-accordion-label-color - Label color. Default: `--color-default-text`.
      * @cssprop --z-accordion-disabled-label-color - Label color when disabled. Default: `--color-text03`.
      * @cssprop --z-accordion-content-bg - Background color of the accordion. Default: `--color-surface02`.
-     * @cssprop --z-accordion-content-fg - Content text color. Default: `--color-text01`.
+     * @cssprop --z-accordion-content-fg - Content text color. Default: `--color-default-text`.
      * @cssprop --z-accordion-hover-color - Hover color of the summary. Default: `--color-surface03`.
      * @cssprop --z-accordion-left-padding - Left padding of the summary. Default: `--space-unit` * 2.
      * @cssprop --z-accordion-right-padding - Right padding of the summary. Default: `--space-unit`.
@@ -127,7 +127,7 @@ export namespace Components {
      * @cssprop --app-header-drawer-trigger-size - The size of the drawer icon. Defaults to `--space-unit * 4`.
      * @cssprop --app-header-bg - Header background color. Defaults to `--color-surface01`.
      * @cssprop --app-header-stucked-bg - Stuck header background color. Defaults to `--color-surface01`.
-     * @cssprop --app-header-text-color - Text color. Useful on `hero` variant to set text color based on the colors of the background image. Defaults to `--color-text01`.
+     * @cssprop --app-header-text-color - Text color. Useful on `hero` variant to set text color based on the colors of the background image. Defaults to `--color-default-text`.
      * @cssprop --app-header-title-font-size - Variable to customize the title's font size.
      * NOTE: Only use one of the exported `--app-header-typography-*-size` as a value.
      * Defaults to `--app-header-typography-3-size`.
@@ -137,7 +137,7 @@ export namespace Components {
      * @cssprop --app-header-title-letter-spacing - Variable to customize the title's letter-spacing.
      * NOTE: Only use one of the exported `--app-header-typography-*-tracking` as a value and use the same level as the one of the font size.
      * Defaults to `--app-header-typography-3-tracking`.
-     * @cssprop --app-header-stucked-text-color - Stuck header text color. Defaults to `--color-text01`.
+     * @cssprop --app-header-stucked-text-color - Stuck header text color. Defaults to `--color-default-text`.
      */
     interface ZAppHeader {
         /**
@@ -845,59 +845,6 @@ export namespace Components {
          */
         "status"?: InputStatus;
     }
-    /**
-     * @deprecated - use a native `<a>` with the `z-link` CSS class instead
-     */
-    interface ZLink {
-        /**
-          * big link version
-         */
-        "big"?: boolean;
-        /**
-          * link url (optional)
-         */
-        "href"?: string;
-        /**
-          * link id (optional)
-         */
-        "htmlid"?: string;
-        /**
-          * tabindex link attribute (optional)
-         */
-        "htmltabindex"?: number;
-        /**
-          * link icon name (optional)
-         */
-        "icon"?: string;
-        /**
-          * link icon position (optional)
-         */
-        "iconposition"?: "left" | "right";
-        /**
-          * active link flag (optional)
-         */
-        "isactive"?: boolean;
-        /**
-          * disable link flag (optional)
-         */
-        "isdisabled"?: boolean;
-        /**
-          * white variant flag (optional)
-         */
-        "iswhite"?: boolean;
-        /**
-          * link target (optional)
-         */
-        "target"?: string;
-        /**
-          * link text variant (optional)
-         */
-        "textcolor"?: "primary" | "inverse" | "white" | "black";
-        /**
-          * draw underline on text (optional)
-         */
-        "underline"?: boolean;
-    }
     interface ZList {
         /**
           * [optional] type of the list marker for each element
@@ -2057,10 +2004,6 @@ export interface ZInputCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLZInputElement;
 }
-export interface ZLinkCustomEvent<T> extends CustomEvent<T> {
-    detail: T;
-    target: HTMLZLinkElement;
-}
 export interface ZListElementCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLZListElementElement;
@@ -2169,10 +2112,10 @@ declare global {
      * Accordion component.
      * @cssprop --z-accordion-highlight-color - Color of the highlight band on the summary's left edge. Only applies when `highlight` is true. Default: `transparent`.
      * @cssprop --z-accordion-bg - Background color of the summary. Default: `--color-surface02`.
-     * @cssprop --z-accordion-label-color - Label color. Default: `--color-text01`.
+     * @cssprop --z-accordion-label-color - Label color. Default: `--color-default-text`.
      * @cssprop --z-accordion-disabled-label-color - Label color when disabled. Default: `--color-text03`.
      * @cssprop --z-accordion-content-bg - Background color of the accordion. Default: `--color-surface02`.
-     * @cssprop --z-accordion-content-fg - Content text color. Default: `--color-text01`.
+     * @cssprop --z-accordion-content-fg - Content text color. Default: `--color-default-text`.
      * @cssprop --z-accordion-hover-color - Hover color of the summary. Default: `--color-surface03`.
      * @cssprop --z-accordion-left-padding - Left padding of the summary. Default: `--space-unit` * 2.
      * @cssprop --z-accordion-right-padding - Right padding of the summary. Default: `--space-unit`.
@@ -2263,7 +2206,7 @@ declare global {
      * @cssprop --app-header-drawer-trigger-size - The size of the drawer icon. Defaults to `--space-unit * 4`.
      * @cssprop --app-header-bg - Header background color. Defaults to `--color-surface01`.
      * @cssprop --app-header-stucked-bg - Stuck header background color. Defaults to `--color-surface01`.
-     * @cssprop --app-header-text-color - Text color. Useful on `hero` variant to set text color based on the colors of the background image. Defaults to `--color-text01`.
+     * @cssprop --app-header-text-color - Text color. Useful on `hero` variant to set text color based on the colors of the background image. Defaults to `--color-default-text`.
      * @cssprop --app-header-title-font-size - Variable to customize the title's font size.
      * NOTE: Only use one of the exported `--app-header-typography-*-size` as a value.
      * Defaults to `--app-header-typography-3-size`.
@@ -2273,7 +2216,7 @@ declare global {
      * @cssprop --app-header-title-letter-spacing - Variable to customize the title's letter-spacing.
      * NOTE: Only use one of the exported `--app-header-typography-*-tracking` as a value and use the same level as the one of the font size.
      * Defaults to `--app-header-typography-3-tracking`.
-     * @cssprop --app-header-stucked-text-color - Stuck header text color. Defaults to `--color-text01`.
+     * @cssprop --app-header-stucked-text-color - Stuck header text color. Defaults to `--color-default-text`.
      */
     interface HTMLZAppHeaderElement extends Components.ZAppHeader, HTMLStencilElement {
         addEventListener<K extends keyof HTMLZAppHeaderElementEventMap>(type: K, listener: (this: HTMLZAppHeaderElement, ev: ZAppHeaderCustomEvent<HTMLZAppHeaderElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
@@ -2590,26 +2533,6 @@ declare global {
         prototype: HTMLZInputMessageElement;
         new (): HTMLZInputMessageElement;
     };
-    interface HTMLZLinkElementEventMap {
-        "zLinkClick": any;
-    }
-    /**
-     * @deprecated - use a native `<a>` with the `z-link` CSS class instead
-     */
-    interface HTMLZLinkElement extends Components.ZLink, HTMLStencilElement {
-        addEventListener<K extends keyof HTMLZLinkElementEventMap>(type: K, listener: (this: HTMLZLinkElement, ev: ZLinkCustomEvent<HTMLZLinkElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
-        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
-        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
-        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
-        removeEventListener<K extends keyof HTMLZLinkElementEventMap>(type: K, listener: (this: HTMLZLinkElement, ev: ZLinkCustomEvent<HTMLZLinkElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
-        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
-        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
-        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
-    }
-    var HTMLZLinkElement: {
-        prototype: HTMLZLinkElement;
-        new (): HTMLZLinkElement;
-    };
     interface HTMLZListElement extends Components.ZList, HTMLStencilElement {
     }
     var HTMLZListElement: {
@@ -3324,7 +3247,6 @@ declare global {
         "z-info-reveal": HTMLZInfoRevealElement;
         "z-input": HTMLZInputElement;
         "z-input-message": HTMLZInputMessageElement;
-        "z-link": HTMLZLinkElement;
         "z-list": HTMLZListElement;
         "z-list-element": HTMLZListElementElement;
         "z-list-group": HTMLZListGroupElement;
@@ -3386,10 +3308,10 @@ declare namespace LocalJSX {
      * Accordion component.
      * @cssprop --z-accordion-highlight-color - Color of the highlight band on the summary's left edge. Only applies when `highlight` is true. Default: `transparent`.
      * @cssprop --z-accordion-bg - Background color of the summary. Default: `--color-surface02`.
-     * @cssprop --z-accordion-label-color - Label color. Default: `--color-text01`.
+     * @cssprop --z-accordion-label-color - Label color. Default: `--color-default-text`.
      * @cssprop --z-accordion-disabled-label-color - Label color when disabled. Default: `--color-text03`.
      * @cssprop --z-accordion-content-bg - Background color of the accordion. Default: `--color-surface02`.
-     * @cssprop --z-accordion-content-fg - Content text color. Default: `--color-text01`.
+     * @cssprop --z-accordion-content-fg - Content text color. Default: `--color-default-text`.
      * @cssprop --z-accordion-hover-color - Hover color of the summary. Default: `--color-surface03`.
      * @cssprop --z-accordion-left-padding - Left padding of the summary. Default: `--space-unit` * 2.
      * @cssprop --z-accordion-right-padding - Right padding of the summary. Default: `--space-unit`.
@@ -3501,7 +3423,7 @@ declare namespace LocalJSX {
      * @cssprop --app-header-drawer-trigger-size - The size of the drawer icon. Defaults to `--space-unit * 4`.
      * @cssprop --app-header-bg - Header background color. Defaults to `--color-surface01`.
      * @cssprop --app-header-stucked-bg - Stuck header background color. Defaults to `--color-surface01`.
-     * @cssprop --app-header-text-color - Text color. Useful on `hero` variant to set text color based on the colors of the background image. Defaults to `--color-text01`.
+     * @cssprop --app-header-text-color - Text color. Useful on `hero` variant to set text color based on the colors of the background image. Defaults to `--color-default-text`.
      * @cssprop --app-header-title-font-size - Variable to customize the title's font size.
      * NOTE: Only use one of the exported `--app-header-typography-*-size` as a value.
      * Defaults to `--app-header-typography-3-size`.
@@ -3511,7 +3433,7 @@ declare namespace LocalJSX {
      * @cssprop --app-header-title-letter-spacing - Variable to customize the title's letter-spacing.
      * NOTE: Only use one of the exported `--app-header-typography-*-tracking` as a value and use the same level as the one of the font size.
      * Defaults to `--app-header-typography-3-tracking`.
-     * @cssprop --app-header-stucked-text-color - Stuck header text color. Defaults to `--color-text01`.
+     * @cssprop --app-header-stucked-text-color - Stuck header text color. Defaults to `--color-default-text`.
      */
     interface ZAppHeader {
         /**
@@ -4279,63 +4201,6 @@ declare namespace LocalJSX {
          */
         "status"?: InputStatus;
     }
-    /**
-     * @deprecated - use a native `<a>` with the `z-link` CSS class instead
-     */
-    interface ZLink {
-        /**
-          * big link version
-         */
-        "big"?: boolean;
-        /**
-          * link url (optional)
-         */
-        "href"?: string;
-        /**
-          * link id (optional)
-         */
-        "htmlid"?: string;
-        /**
-          * tabindex link attribute (optional)
-         */
-        "htmltabindex"?: number;
-        /**
-          * link icon name (optional)
-         */
-        "icon"?: string;
-        /**
-          * link icon position (optional)
-         */
-        "iconposition"?: "left" | "right";
-        /**
-          * active link flag (optional)
-         */
-        "isactive"?: boolean;
-        /**
-          * disable link flag (optional)
-         */
-        "isdisabled"?: boolean;
-        /**
-          * white variant flag (optional)
-         */
-        "iswhite"?: boolean;
-        /**
-          * emitted on link click, returns linkId
-         */
-        "onZLinkClick"?: (event: ZLinkCustomEvent<any>) => void;
-        /**
-          * link target (optional)
-         */
-        "target"?: string;
-        /**
-          * link text variant (optional)
-         */
-        "textcolor"?: "primary" | "inverse" | "white" | "black";
-        /**
-          * draw underline on text (optional)
-         */
-        "underline"?: boolean;
-    }
     interface ZList {
         /**
           * [optional] type of the list marker for each element
@@ -5589,7 +5454,6 @@ declare namespace LocalJSX {
         "z-info-reveal": ZInfoReveal;
         "z-input": ZInput;
         "z-input-message": ZInputMessage;
-        "z-link": ZLink;
         "z-list": ZList;
         "z-list-element": ZListElement;
         "z-list-group": ZListGroup;
@@ -5654,10 +5518,10 @@ declare module "@stencil/core" {
              * Accordion component.
              * @cssprop --z-accordion-highlight-color - Color of the highlight band on the summary's left edge. Only applies when `highlight` is true. Default: `transparent`.
              * @cssprop --z-accordion-bg - Background color of the summary. Default: `--color-surface02`.
-             * @cssprop --z-accordion-label-color - Label color. Default: `--color-text01`.
+             * @cssprop --z-accordion-label-color - Label color. Default: `--color-default-text`.
              * @cssprop --z-accordion-disabled-label-color - Label color when disabled. Default: `--color-text03`.
              * @cssprop --z-accordion-content-bg - Background color of the accordion. Default: `--color-surface02`.
-             * @cssprop --z-accordion-content-fg - Content text color. Default: `--color-text01`.
+             * @cssprop --z-accordion-content-fg - Content text color. Default: `--color-default-text`.
              * @cssprop --z-accordion-hover-color - Hover color of the summary. Default: `--color-surface03`.
              * @cssprop --z-accordion-left-padding - Left padding of the summary. Default: `--space-unit` * 2.
              * @cssprop --z-accordion-right-padding - Right padding of the summary. Default: `--space-unit`.
@@ -5722,7 +5586,7 @@ declare module "@stencil/core" {
              * @cssprop --app-header-drawer-trigger-size - The size of the drawer icon. Defaults to `--space-unit * 4`.
              * @cssprop --app-header-bg - Header background color. Defaults to `--color-surface01`.
              * @cssprop --app-header-stucked-bg - Stuck header background color. Defaults to `--color-surface01`.
-             * @cssprop --app-header-text-color - Text color. Useful on `hero` variant to set text color based on the colors of the background image. Defaults to `--color-text01`.
+             * @cssprop --app-header-text-color - Text color. Useful on `hero` variant to set text color based on the colors of the background image. Defaults to `--color-default-text`.
              * @cssprop --app-header-title-font-size - Variable to customize the title's font size.
              * NOTE: Only use one of the exported `--app-header-typography-*-size` as a value.
              * Defaults to `--app-header-typography-3-size`.
@@ -5732,7 +5596,7 @@ declare module "@stencil/core" {
              * @cssprop --app-header-title-letter-spacing - Variable to customize the title's letter-spacing.
              * NOTE: Only use one of the exported `--app-header-typography-*-tracking` as a value and use the same level as the one of the font size.
              * Defaults to `--app-header-typography-3-tracking`.
-             * @cssprop --app-header-stucked-text-color - Stuck header text color. Defaults to `--color-text01`.
+             * @cssprop --app-header-stucked-text-color - Stuck header text color. Defaults to `--color-default-text`.
              */
             "z-app-header": LocalJSX.ZAppHeader & JSXBase.HTMLAttributes<HTMLZAppHeaderElement>;
             "z-aria-alert": LocalJSX.ZAriaAlert & JSXBase.HTMLAttributes<HTMLZAriaAlertElement>;
@@ -5789,10 +5653,6 @@ declare module "@stencil/core" {
             "z-info-reveal": LocalJSX.ZInfoReveal & JSXBase.HTMLAttributes<HTMLZInfoRevealElement>;
             "z-input": LocalJSX.ZInput & JSXBase.HTMLAttributes<HTMLZInputElement>;
             "z-input-message": LocalJSX.ZInputMessage & JSXBase.HTMLAttributes<HTMLZInputMessageElement>;
-            /**
-             * @deprecated - use a native `<a>` with the `z-link` CSS class instead
-             */
-            "z-link": LocalJSX.ZLink & JSXBase.HTMLAttributes<HTMLZLinkElement>;
             "z-list": LocalJSX.ZList & JSXBase.HTMLAttributes<HTMLZListElement>;
             "z-list-element": LocalJSX.ZListElement & JSXBase.HTMLAttributes<HTMLZListElementElement>;
             "z-list-group": LocalJSX.ZListGroup & JSXBase.HTMLAttributes<HTMLZListGroupElement>;