@zanichelli/albe-web-components 19.2.4 → 19.2.5
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.
- package/CHANGELOG.md +11 -0
- package/dist/cjs/z-app-header_12.cjs.entry.js +5 -2
- package/dist/cjs/z-app-header_12.cjs.entry.js.map +1 -1
- package/dist/cjs/z-breadcrumb.cjs.entry.js +5 -5
- package/dist/cjs/z-breadcrumb.cjs.entry.js.map +1 -1
- package/dist/cjs/z-notification.cjs.entry.js +2 -2
- package/dist/cjs/z-notification.cjs.entry.js.map +1 -1
- package/dist/collection/components/z-breadcrumb/index.js +5 -5
- package/dist/collection/components/z-breadcrumb/index.js.map +1 -1
- package/dist/collection/components/z-button/index.js +5 -2
- package/dist/collection/components/z-button/index.js.map +1 -1
- package/dist/collection/components/z-notification/index.js +3 -2
- package/dist/collection/components/z-notification/index.js.map +1 -1
- package/dist/collection/components/z-notification/index.stories.js +79 -77
- package/dist/collection/components/z-notification/index.stories.js.map +1 -1
- package/dist/collection/components/z-notification/styles.css +8 -6
- package/dist/components/index5.js +5 -2
- package/dist/components/index5.js.map +1 -1
- package/dist/components/z-breadcrumb.js +5 -5
- package/dist/components/z-breadcrumb.js.map +1 -1
- package/dist/components/z-notification.js +2 -2
- package/dist/components/z-notification.js.map +1 -1
- package/dist/esm/z-app-header_12.entry.js +5 -2
- package/dist/esm/z-app-header_12.entry.js.map +1 -1
- package/dist/esm/z-breadcrumb.entry.js +5 -5
- package/dist/esm/z-breadcrumb.entry.js.map +1 -1
- package/dist/esm/z-notification.entry.js +2 -2
- package/dist/esm/z-notification.entry.js.map +1 -1
- package/dist/types/components/z-notification/index.d.ts +2 -1
- package/dist/types/components/z-notification/index.stories.d.ts +27 -22
- package/dist/types/components.d.ts +8 -4
- package/dist/web-components-library/p-07cd81f6.entry.js +2 -0
- package/dist/web-components-library/p-07cd81f6.entry.js.map +1 -0
- package/{www/build/p-9814f864.entry.js → dist/web-components-library/p-0d2a5f65.entry.js} +2 -2
- package/dist/web-components-library/p-0d2a5f65.entry.js.map +1 -0
- package/dist/web-components-library/p-299f6d64.entry.js +2 -0
- package/dist/web-components-library/p-299f6d64.entry.js.map +1 -0
- package/dist/web-components-library/web-components-library.css +1 -1
- package/dist/web-components-library/web-components-library.esm.js +1 -1
- package/package.json +1 -1
- package/www/build/p-07cd81f6.entry.js +2 -0
- package/www/build/p-07cd81f6.entry.js.map +1 -0
- package/{dist/web-components-library/p-9814f864.entry.js → www/build/p-0d2a5f65.entry.js} +2 -2
- package/www/build/p-0d2a5f65.entry.js.map +1 -0
- package/www/build/p-299f6d64.entry.js +2 -0
- package/www/build/p-299f6d64.entry.js.map +1 -0
- package/www/build/{p-813bd63b.css → p-c60c851a.css} +1 -1
- package/www/build/{p-7a9b89a3.js → p-d969a9bf.js} +1 -1
- package/www/build/web-components-library.css +1 -1
- package/www/build/web-components-library.esm.js +1 -1
- package/www/index.html +1 -1
- package/dist/web-components-library/p-96e61363.entry.js +0 -2
- package/dist/web-components-library/p-96e61363.entry.js.map +0 -1
- package/dist/web-components-library/p-9814f864.entry.js.map +0 -1
- package/dist/web-components-library/p-be1c414e.entry.js +0 -2
- package/dist/web-components-library/p-be1c414e.entry.js.map +0 -1
- package/www/build/p-96e61363.entry.js +0 -2
- package/www/build/p-96e61363.entry.js.map +0 -1
- package/www/build/p-9814f864.entry.js.map +0 -1
- package/www/build/p-be1c414e.entry.js +0 -2
- package/www/build/p-be1c414e.entry.js.map +0 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"z-notification.js","mappings":";;;AAAA,MAAM,SAAS,GAAG,
|
|
1
|
+
{"file":"z-notification.js","mappings":";;;AAAA,MAAM,SAAS,GAAG,ulEAAulE,CAAC;AAC1mE,4BAAe,SAAS;;MCcXA,eAAa;IAoChB,uBAAuB,CAAC,CAAa;QAC3C,CAAC,CAAC,cAAc,EAAE,CAAC;QACnB,IAAI,CAAC,kBAAkB,CAAC,IAAI,EAAE,CAAC;KAChC;IAMO,sBAAsB,CAAC,CAAa;QAC1C,CAAC,CAAC,cAAc,EAAE,CAAC;QACnB,IAAI,CAAC,iBAAiB,CAAC,IAAI,EAAE,CAAC;KAC/B;IAED;;;;;;;;;yBAnCsB,KAAK;0BAOJ,KAAK;sBAIT,KAAK;8BAIY,QAAQ;QAqB1C,IAAI,CAAC,uBAAuB,GAAG,IAAI,CAAC,uBAAuB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QACvE,IAAI,CAAC,sBAAsB,GAAG,IAAI,CAAC,sBAAsB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;KACtE;IAED,MAAM;;QACJ,QACE,EAAC,IAAI,uDACH,4DAAK,KAAK,EAAC,gBAAgB,IACxB,IAAI,CAAC,eAAe,KACnB,+DACE,KAAK,EAAC,aAAa,EACnB,IAAI,EAAE,IAAI,CAAC,eAAe,EAC1B,KAAK,EAAE,EAAE,EACT,MAAM,EAAE,EAAE,GACV,CACH,EACD,4DAAK,KAAK,EAAC,mBAAmB,IAC5B,4DAAK,KAAK,EAAC,cAAc,IACvB,8DAAa,CACT,EACL,CAAC,EAAC,MAAA,IAAI,CAAC,UAAU,0CAAE,IAAI,EAAE,CAAA,KACxB,+DACE,KAAK,EAAC,eAAe,EACrB,IAAI,EAAC,QAAQ,EACb,OAAO,EAAE,IAAI,CAAC,uBAAuB,IAEpC,IAAI,CAAC,UAAU,CACT,CACV,CACG,EACL,IAAI,CAAC,SAAS,KACb,+DACE,KAAK,EAAC,cAAc,EACpB,IAAI,EAAC,QAAQ,EACb,OAAO,EAAE,IAAI,CAAC,sBAAsB,IAEpC,+DACE,IAAI,EAAC,iBAAiB,EACtB,KAAK,EAAE,EAAE,EACT,MAAM,EAAE,EAAE,GACV,CACK,CACV,CACG,CACD,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["ZNotification"],"sources":["src/components/z-notification/styles.css?tag=z-notification&encapsulation=shadow","src/components/z-notification/index.tsx"],"sourcesContent":[":host {\n --z-notification--top-offset: 0;\n --z-notification--content-max-width: 100%;\n --z-notification--inline-padding: ;\n\n display: block;\n width: 100%;\n}\n\n.main-container {\n display: flex;\n max-width: var(--z-notification--content-max-width);\n align-items: flex-start;\n padding: calc(var(--space-unit) * 2) var(--z-notification--inline-padding, calc(var(--space-unit) * 2));\n margin: 0 auto;\n background-color: transparent;\n font-family: var(--font-family-sans);\n}\n\n:host([sticky]) {\n position: sticky;\n top: var(--z-notification--top-offset);\n}\n\n:host([sticky]),\n:host([showshadow]) {\n box-shadow: var(--shadow-3);\n}\n\n:host([type=\"success\"]) {\n background: var(--color-inverse-success);\n}\n\n:host([type=\"warning\"]) {\n background: var(--color-inverse-warning);\n}\n\n:host([type=\"error\"]) {\n background: var(--color-inverse-error);\n}\n\n.status-icon,\n.close-button {\n /* simulate the line-height of the text\n to make the icon look correctly aligned with it. */\n display: flex;\n height: 20px;\n align-items: center;\n}\n\n:host([type=\"success\"]) .status-icon {\n fill: var(--color-default-success);\n}\n\n:host([type=\"warning\"]) .status-icon {\n fill: var(--color-default-warning);\n}\n\n:host([type=\"error\"]) .status-icon {\n fill: var(--color-default-error);\n}\n\n:host([borderposition=\"bottom\"]) {\n border-bottom: var(--border-size-medium) solid var(--color-surface03);\n}\n\n:host([borderposition=\"top\"]) {\n border-top: var(--border-size-medium) solid var(--color-surface03);\n}\n\nbutton {\n padding: 0;\n border: none;\n margin: 0;\n background: transparent;\n cursor: pointer;\n font-family: inherit;\n}\n\n.status-icon + .content-container {\n margin-left: var(--space-unit);\n}\n\n.content-container {\n display: flex;\n flex: 1 auto;\n flex-wrap: wrap;\n align-items: baseline;\n justify-content: space-between;\n row-gap: calc(var(--space-unit) * 2);\n}\n\n.content-text {\n width: 100%;\n color: var(--color-default-text);\n font-size: var(--font-size-2);\n font-weight: var(--font-rg);\n letter-spacing: 0.16px;\n line-height: 1.4;\n}\n\n.action-button {\n color: var(--color-primary01);\n font-size: var(--font-size-1);\n font-weight: var(--font-sb);\n letter-spacing: 0.32px;\n line-height: 1.333;\n outline: none;\n}\n\n.action-button:focus-visible {\n box-shadow: var(--shadow-focus-primary);\n}\n\n.content-container + .close-button {\n margin-left: calc(var(--space-unit) * 2);\n}\n\n.close-button z-icon {\n fill: var(--color-primary01);\n}\n\n/* Tablet breakpoint */\n@media (min-width: 768px) {\n .content-container {\n flex-wrap: nowrap;\n }\n\n .content-text + .action-button {\n margin-left: calc(var(--space-unit) * 5);\n }\n}\n","import {Component, Event, EventEmitter, Host, Prop, h} from \"@stencil/core\";\nimport {NotificationType} from \"../../beans\";\n\n/**\n * Notification bar component.\n * @slot - The text of the notification.\n * @cssprop --z-notification--top-offset - The top offset of the notification. Use it when `sticky` prop is set to `true` and you need the notification to stay under other sticky elements. Default: 0px.\n * @cssprop --z-notification--content-max-width - The max width of the notification content. Useful to align the content with other elements on the page, keeping the colored background full width. Default: 100%. Note: the content is automatically centered, so if you want to limit the width only for the slotted content, you can wrap it in a container with the desired width and leave the `z-notification` width to 100%.\n * @cssprop --z-notification--inline-padding - The inline padding of the notification content. It can be useful to align the content when the `--z-notification--content-max-width` is set. Default: calc(var(--space-unit) * 2).\n */\n@Component({\n tag: \"z-notification\",\n styleUrl: \"styles.css\",\n shadow: true,\n})\nexport class ZNotification {\n /** Name of the icon on the left of the content */\n @Prop()\n contenticonname?: string;\n\n /** Action button text */\n @Prop()\n actiontext?: string;\n\n /** Alert variant type */\n @Prop({reflect: true})\n type: NotificationType;\n\n /** Enable close icon */\n @Prop()\n showclose?: boolean = false;\n\n /**\n * Enable shadow.\n * @deprecated shadow is available only for the `sticky` version of the notification.\n */\n @Prop({reflect: true})\n showshadow?: boolean = false;\n\n /** Enable sticky notification bar. */\n @Prop({reflect: true})\n sticky?: boolean = false;\n\n /** Border position */\n @Prop({reflect: true})\n borderposition?: \"top\" | \"bottom\" = \"bottom\";\n\n /** Call to action clicked */\n @Event()\n notificationAction: EventEmitter;\n\n private handleActionButtonClick(e: MouseEvent): void {\n e.preventDefault();\n this.notificationAction.emit();\n }\n\n /** Close button clicked */\n @Event()\n notificationClose: EventEmitter;\n\n private handleCloseButtonClick(e: MouseEvent): void {\n e.preventDefault();\n this.notificationClose.emit();\n }\n\n constructor() {\n this.handleActionButtonClick = this.handleActionButtonClick.bind(this);\n this.handleCloseButtonClick = this.handleCloseButtonClick.bind(this);\n }\n\n render(): HTMLZNotificationElement {\n return (\n <Host>\n <div class=\"main-container\">\n {this.contenticonname && (\n <z-icon\n class=\"status-icon\"\n name={this.contenticonname}\n width={16}\n height={16}\n />\n )}\n <div class=\"content-container\">\n <div class=\"content-text\">\n <slot></slot>\n </div>\n {!!this.actiontext?.trim() && (\n <button\n class=\"action-button\"\n type=\"button\"\n onClick={this.handleActionButtonClick}\n >\n {this.actiontext}\n </button>\n )}\n </div>\n {this.showclose && (\n <button\n class=\"close-button\"\n type=\"button\"\n onClick={this.handleCloseButtonClick}\n >\n <z-icon\n name=\"multiply-circle\"\n width={16}\n height={16}\n />\n </button>\n )}\n </div>\n </Host>\n );\n }\n}\n"],"version":3}
|
|
@@ -295,10 +295,13 @@ const ZButton = class {
|
|
|
295
295
|
return this.icon && h("z-icon", { name: this.icon });
|
|
296
296
|
}
|
|
297
297
|
render() {
|
|
298
|
+
var _a, _b;
|
|
299
|
+
const normalizedAriaLabel = ((_a = this.ariaLabel) === null || _a === void 0 ? void 0 : _a.trim()) || undefined;
|
|
300
|
+
const normalizedRole = this.htmlrole || ((_b = this.role) === null || _b === void 0 ? void 0 : _b.trim()) || undefined;
|
|
298
301
|
if (this.href) {
|
|
299
|
-
return (h("a", Object.assign({}, this.getAttributes(), { "aria-label":
|
|
302
|
+
return (h("a", Object.assign({}, this.getAttributes(), { "aria-label": normalizedAriaLabel, href: this.href, target: this.target }), this.renderIcon(), h("slot", null)));
|
|
300
303
|
}
|
|
301
|
-
return (h("button", Object.assign({}, this.getAttributes(), { "aria-label":
|
|
304
|
+
return (h("button", Object.assign({}, this.getAttributes(), { "aria-label": normalizedAriaLabel, name: this.name, type: this.type, disabled: this.disabled, role: normalizedRole }), this.renderIcon(), h("slot", null)));
|
|
302
305
|
}
|
|
303
306
|
get hostElement() { return getElement(this); }
|
|
304
307
|
};
|