@zanichelli/albe-web-components 16.4.2 → 16.5.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.
- package/CHANGELOG.md +2 -0
- package/dist/collection/components/z-book-card/index.stories.js +1 -1
- package/dist/collection/components/z-book-card/index.stories.js.map +1 -1
- package/dist/docs/themes/index.stories.js +1 -1
- package/dist/docs/themes/index.stories.js.map +1 -1
- package/dist/types/components/z-book-card/index.stories.d.ts +1 -1
- package/dist/web-components-library/web-components-library.css +45 -0
- package/package.json +1 -1
- package/www/build/{p-d9dbe303.css → p-68fa0be6.css} +45 -0
- package/www/build/web-components-library.css +45 -0
- package/www/index.html +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -20,7 +20,7 @@ const StoryMeta = {
|
|
|
20
20
|
control: {
|
|
21
21
|
type: "inline-radio",
|
|
22
22
|
},
|
|
23
|
-
options: ["theme-default", "theme-dark", "theme-black-yellow"],
|
|
23
|
+
options: ["theme-default", "theme-dark", "theme-black-yellow", "theme-red"],
|
|
24
24
|
},
|
|
25
25
|
"--z-book-card-ribbon-background-color": getColorTokenArgConfig(),
|
|
26
26
|
"--z-book-card-ribbon-shadow-color": getColorTokenArgConfig(),
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.stories.js","sourceRoot":"","sources":["../../../../src/components/z-book-card/index.stories.ts"],"names":[],"mappings":"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","sourcesContent":["import {Meta, StoryObj} from \"@storybook/web-components\";\nimport {html} from \"lit\";\nimport {styleMap} from \"lit/directives/style-map.js\";\nimport {ZBookCard} from \".\";\nimport {BookCardVariant} from \"../../beans\";\nimport {CSSVarsArguments, getColorTokenArgConfig} from \"../../utils/storybook-utils\";\nimport \"../z-button/index\";\nimport \"../z-icon/index\";\nimport \"../z-tag/index\";\nimport \"./index\";\n\ntype ZBookCardStoriesArgs = ZBookCard & {\n theme: \"theme-default\" | \"theme-dark\" | \"theme-black-yellow\";\n} & CSSVarsArguments<\n | \"z-book-card-ribbon-background-color\"\n | \"z-book-card-ribbon-shadow-color\"\n | \"z-book-card-compact-width\"\n | \"z-book-card-compact-height\"\n >;\nconst StoryMeta = {\n title: \"ZBookCard\",\n component: \"z-book-card\",\n argTypes: {\n \"variant\": {\n control: {\n type: \"inline-radio\",\n },\n options: Object.values(BookCardVariant),\n },\n \"theme\": {\n control: {\n type: \"inline-radio\",\n },\n options: [\"theme-default\", \"theme-dark\", \"theme-black-yellow\"],\n },\n \"--z-book-card-ribbon-background-color\": getColorTokenArgConfig(),\n \"--z-book-card-ribbon-shadow-color\": getColorTokenArgConfig(),\n },\n args: {\n \"variant\": BookCardVariant.EXPANDED,\n \"cover\": \"https://staticmy.zanichelli.it/catalogo/assets/m40001.9788808490056.jpg\",\n \"operaTitle\": \"Matematica.azzurro\",\n \"volumeTitle\": \"Volume 3 con Tutor\",\n \"authors\": \"Massimo Bergamini, Anna Trifone, Graziella Barozzi\",\n \"isbn\": \"9788808930552\",\n \"isbnLabel\": \"\",\n \"ribbon\": \"ADOTTATO\",\n \"ribbonIcon\": \"\",\n \"ribbonInteractive\": false,\n \"borderless\": false,\n \"fallbackCover\": \"https://staticmy.zanichelli.it/copertine/dashboard/Dashboard_Book_Placeholder.jpg\",\n \"operaTitleTag\": \"h1\",\n \"theme\": \"theme-default\",\n \"--z-book-card-ribbon-background-color\": \"var(--avatar-C08)\",\n \"--z-book-card-ribbon-shadow-color\": \"var(--green950)\",\n \"--z-book-card-compact-width\": \"262px\",\n \"--z-book-card-compact-height\": \"600px\",\n },\n} satisfies Meta<ZBookCardStoriesArgs>;\n\nexport default StoryMeta;\n\ntype Story = StoryObj<ZBookCardStoriesArgs>;\n\nexport const AllProps = {\n parameters: {\n controls: {\n exclude: [\"borderless\"],\n },\n },\n render: (args) =>\n html`<z-book-card\n variant=${args.variant}\n cover=${args.cover}\n opera-title=${args.operaTitle}\n volume-title=${args.volumeTitle}\n authors=${args.authors}\n isbn=${args.isbn}\n isbn-label=${args.isbnLabel}\n ribbon=${args.ribbon}\n ribbon-icon=${args.ribbonIcon}\n ribbon-interactive=${args.ribbonInteractive}\n fallback-cover=${args.fallbackCover}\n opera-title-tag=${args.operaTitleTag}\n class=${args.theme}\n style=${styleMap({\n \"--z-book-card-ribbon-background-color\": `${args[\"--z-book-card-ribbon-background-color\"]}`,\n \"--z-book-card-ribbon-shadow-color\": `${args[\"--z-book-card-ribbon-shadow-color\"]}`,\n \"--z-book-card-compact-width\": `${args[\"--z-book-card-compact-width\"]}`,\n \"--z-book-card-compact-height\": `${args[\"--z-book-card-compact-height\"]}`,\n })}\n ></z-book-card>`,\n} satisfies Story;\n\nexport const SlottedTags = {\n parameters: {\n controls: {\n exclude: [\"borderless\"],\n },\n },\n render: (args) =>\n html`<z-book-card\n variant=${args.variant}\n cover=${args.cover}\n opera-title=${args.operaTitle}\n volume-title=${args.volumeTitle}\n authors=${args.authors}\n isbn=${args.isbn}\n isbn-label=${args.isbnLabel}\n ribbon=${args.ribbon}\n ribbon-icon=${args.ribbonIcon}\n ribbon-interactive=${args.ribbonInteractive}\n fallback-cover=${args.fallbackCover}\n opera-title-tag=${args.operaTitleTag}\n class=${args.theme}\n style=${styleMap({\n \"--z-book-card-ribbon-background-color\": `${args[\"--z-book-card-ribbon-background-color\"]}`,\n \"--z-book-card-ribbon-shadow-color\": `${args[\"--z-book-card-ribbon-shadow-color\"]}`,\n \"--z-book-card-compact-width\": `${args[\"--z-book-card-compact-width\"]}`,\n \"--z-book-card-compact-height\": `${args[\"--z-book-card-compact-height\"]}`,\n })}\n >\n <z-tag\n slot=\"tags\"\n style=\"--z-tag-bg: var(--avatar-C18)\"\n >EDI</z-tag\n >\n <z-tag slot=\"tags\">VERSIONE INSEGNANTE</z-tag>\n </z-book-card>`,\n} satisfies Story;\n\nexport const SlottedResources = {\n parameters: {\n controls: {\n exclude: [\"borderless\"],\n },\n },\n render: (args) =>\n html`<z-book-card\n variant=${args.variant}\n cover=${args.cover}\n opera-title=${args.operaTitle}\n volume-title=${args.volumeTitle}\n authors=${args.authors}\n isbn=${args.isbn}\n isbn-label=${args.isbnLabel}\n ribbon=${args.ribbon}\n ribbon-icon=${args.ribbonIcon}\n ribbon-interactive=${args.ribbonInteractive}\n fallback-cover=${args.fallbackCover}\n opera-title-tag=${args.operaTitleTag}\n class=${args.theme}\n style=${styleMap({\n \"--z-book-card-ribbon-background-color\": `${args[\"--z-book-card-ribbon-background-color\"]}`,\n \"--z-book-card-ribbon-shadow-color\": `${args[\"--z-book-card-ribbon-shadow-color\"]}`,\n \"--z-book-card-compact-width\": `${args[\"--z-book-card-compact-width\"]}`,\n \"--z-book-card-compact-height\": `${args[\"--z-book-card-compact-height\"]}`,\n })}\n >\n <a\n class=\"z-link z-link-icon\"\n slot=\"resources\"\n style=\"width:100%; margin-bottom: 6px;\"\n >\n <z-icon\n style=\"margin-right: 8px\"\n name=\"arrow-quad-north-east\"\n ></z-icon>\n Resource link mock\n </a>\n <z-button\n slot=\"resources\"\n variant=\"secondary\"\n size=\"x-small\"\n style=\"width:100%; margin-bottom: 16px;\"\n >Resource CTA mock</z-button\n >\n </z-book-card>`,\n} satisfies Story;\n\nexport const SlottedHeaderCta = {\n parameters: {\n controls: {\n exclude: [\"borderless\"],\n },\n },\n render: (args) =>\n html`<z-book-card\n variant=${args.variant}\n cover=${args.cover}\n opera-title=${args.operaTitle}\n volume-title=${args.volumeTitle}\n authors=${args.authors}\n isbn=${args.isbn}\n isbn-label=${args.isbnLabel}\n ribbon=${args.ribbon}\n ribbon-icon=${args.ribbonIcon}\n ribbon-interactive=${args.ribbonInteractive}\n fallback-cover=${args.fallbackCover}\n opera-title-tag=${args.operaTitleTag}\n class=${args.theme}\n style=${styleMap({\n \"--z-book-card-ribbon-background-color\": `${args[\"--z-book-card-ribbon-background-color\"]}`,\n \"--z-book-card-ribbon-shadow-color\": `${args[\"--z-book-card-ribbon-shadow-color\"]}`,\n \"--z-book-card-compact-width\": `${args[\"--z-book-card-compact-width\"]}`,\n \"--z-book-card-compact-height\": `${args[\"--z-book-card-compact-height\"]}`,\n })}\n >\n <z-icon\n name=\"star-empty\"\n slot=\"header-cta\"\n ></z-icon>\n </z-book-card>`,\n} satisfies Story;\n\nexport const SlottedFooterCta = {\n parameters: {\n controls: {\n exclude: [\"borderless\"],\n },\n },\n render: (args) =>\n html`<z-book-card\n variant=${args.variant}\n cover=${args.cover}\n opera-title=${args.operaTitle}\n volume-title=${args.volumeTitle}\n authors=${args.authors}\n isbn=${args.isbn}\n isbn-label=${args.isbnLabel}\n ribbon=${args.ribbon}\n ribbon-icon=${args.ribbonIcon}\n ribbon-interactive=${args.ribbonInteractive}\n fallback-cover=${args.fallbackCover}\n opera-title-tag=${args.operaTitleTag}\n class=${args.theme}\n style=${styleMap({\n \"--z-book-card-ribbon-background-color\": `${args[\"--z-book-card-ribbon-background-color\"]}`,\n \"--z-book-card-ribbon-shadow-color\": `${args[\"--z-book-card-ribbon-shadow-color\"]}`,\n \"--z-book-card-compact-width\": `${args[\"--z-book-card-compact-width\"]}`,\n \"--z-book-card-compact-height\": `${args[\"--z-book-card-compact-height\"]}`,\n })}\n >\n <z-icon\n name=\"star-empty\"\n slot=\"header-cta\"\n ></z-icon>\n <div slot=\"footer-cta\">\n <z-button\n href=\"http://dizionari.zanichelli.it\"\n target=\"_blank\"\n variant=\"secondary\"\n size=\"x-small\"\n >\n Leggi il libro online\n </z-button>\n </div>\n </z-book-card>`,\n} satisfies Story;\n\nexport const ExpandedVariant = {\n parameters: {\n controls: {\n exclude: [\"variant\", \"borderless\", \"theme\", \"--z-book-card-compact-width\", \"--z-book-card-compact-height\"],\n },\n },\n render: (args) =>\n html`<z-book-card\n variant=\"expanded\"\n cover=${args.cover}\n opera-title=${args.operaTitle}\n volume-title=${args.volumeTitle}\n authors=${args.authors}\n isbn=${args.isbn}\n isbn-label=${args.isbnLabel}\n ribbon=${args.ribbon}\n ribbon-icon=${args.ribbonIcon}\n ribbon-interactive=${args.ribbonInteractive}\n fallback-cover=${args.fallbackCover}\n opera-title-tag=${args.operaTitleTag}\n style=${styleMap({\n \"--z-book-card-ribbon-background-color\": `${args[\"--z-book-card-ribbon-background-color\"]}`,\n \"--z-book-card-ribbon-shadow-color\": `${args[\"--z-book-card-ribbon-shadow-color\"]}`,\n })}\n >\n <z-tag\n slot=\"tags\"\n style=\"--z-tag-bg: var(--avatar-C18)\"\n >EDI</z-tag\n >\n <z-tag slot=\"tags\">VERSIONE INSEGNANTE</z-tag>\n <a\n class=\"z-link z-link-icon\"\n slot=\"resources\"\n style=\"width:100%; margin-bottom: 6px;\"\n >\n <z-icon\n style=\"margin-right: 8px\"\n name=\"arrow-quad-north-east\"\n ></z-icon>\n Resource link mock\n </a>\n <z-button\n slot=\"resources\"\n variant=\"secondary\"\n size=\"x-small\"\n style=\"width:100%; margin-bottom: 16px;\"\n >Resource CTA mock</z-button\n >\n <z-icon\n name=\"star-empty\"\n slot=\"header-cta\"\n tabindex=\"0\"\n ></z-icon>\n </z-book-card>`,\n} satisfies Story;\n\nexport const SearchVariant = {\n parameters: {\n controls: {\n exclude: [\"variant\", \"borderless\", \"theme\", \"--z-book-card-compact-width\", \"--z-book-card-compact-height\"],\n },\n },\n render: (args) =>\n html`<z-book-card\n variant=\"search\"\n cover=${args.cover}\n opera-title=${args.operaTitle}\n volume-title=${args.volumeTitle}\n authors=${args.authors}\n isbn=${args.isbn}\n isbn-label=${args.isbnLabel}\n ribbon=${args.ribbon}\n ribbon-icon=${args.ribbonIcon}\n ribbon-interactive=${args.ribbonInteractive}\n fallback-cover=${args.fallbackCover}\n opera-title-tag=${args.operaTitleTag}\n style=${styleMap({\n \"--z-book-card-ribbon-background-color\": `${args[\"--z-book-card-ribbon-background-color\"]}`,\n \"--z-book-card-ribbon-shadow-color\": `${args[\"--z-book-card-ribbon-shadow-color\"]}`,\n })}\n >\n <z-icon\n name=\"star-empty\"\n slot=\"header-cta\"\n ></z-icon>\n <z-tag\n slot=\"tags\"\n style=\"--z-tag-bg: var(--avatar-C18)\"\n >EDI</z-tag\n >\n <z-tag slot=\"tags\">VERSIONE INSEGNANTE</z-tag>\n <div slot=\"footer-cta\">\n <z-button\n href=\"http://dizionari.zanichelli.it\"\n target=\"_blank\"\n variant=\"secondary\"\n size=\"x-small\"\n >\n Leggi il libro online\n </z-button>\n </div>\n </z-book-card>`,\n} satisfies Story;\n\nexport const CompactVariant = {\n parameters: {\n controls: {\n exclude: [\n \"variant\",\n \"ribbon\",\n \"ribbonIcon\",\n \"ribbonInteractive\",\n \"--z-book-card-ribbon-background-color\",\n \"--z-book-card-ribbon-shadow-color\",\n ],\n },\n },\n render: (args) =>\n html`<z-book-card\n variant=\"compact\"\n cover=${args.cover}\n opera-title=${args.operaTitle}\n volume-title=${args.volumeTitle}\n borderless=${args.borderless}\n authors=${args.authors}\n isbn=${args.isbn}\n isbn-label=${args.isbnLabel}\n fallback-cover=${args.fallbackCover}\n opera-title-tag=${args.operaTitleTag}\n class=${args.theme}\n style=${styleMap({\n \"--z-book-card-compact-width\": `${args[\"--z-book-card-compact-width\"]}`,\n \"--z-book-card-compact-height\": `${args[\"--z-book-card-compact-height\"]}`,\n })}\n >\n <z-icon\n name=\"star-empty\"\n slot=\"header-cta\"\n ></z-icon>\n <z-tag\n slot=\"tags\"\n style=\"--z-tag-bg: var(--avatar-C18)\"\n >EDI</z-tag\n >\n <z-tag slot=\"tags\">VERSIONE INSEGNANTE</z-tag>\n <div\n slot=\"footer-cta\"\n style=\"display:flex; gap:8px;\"\n >\n <z-button\n href=\"http://dizionari.zanichelli.it\"\n target=\"_blank\"\n variant=\"secondary\"\n size=\"x-small\"\n >\n Call to action\n </z-button>\n <z-button\n icon=\"arrow-quad-north-east\"\n variant=\"secondary\"\n size=\"x-small\"\n ></z-button>\n </div>\n </z-book-card>`,\n} satisfies Story;\n"]}
|
|
1
|
+
{"version":3,"file":"index.stories.js","sourceRoot":"","sources":["../../../../src/components/z-book-card/index.stories.ts"],"names":[],"mappings":"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","sourcesContent":["import {Meta, StoryObj} from \"@storybook/web-components\";\nimport {html} from \"lit\";\nimport {styleMap} from \"lit/directives/style-map.js\";\nimport {ZBookCard} from \".\";\nimport {BookCardVariant} from \"../../beans\";\nimport {CSSVarsArguments, getColorTokenArgConfig} from \"../../utils/storybook-utils\";\nimport \"../z-button/index\";\nimport \"../z-icon/index\";\nimport \"../z-tag/index\";\nimport \"./index\";\n\ntype ZBookCardStoriesArgs = ZBookCard & {\n theme: \"theme-default\" | \"theme-dark\" | \"theme-black-yellow\" | \"theme-red\";\n} & CSSVarsArguments<\n | \"z-book-card-ribbon-background-color\"\n | \"z-book-card-ribbon-shadow-color\"\n | \"z-book-card-compact-width\"\n | \"z-book-card-compact-height\"\n >;\nconst StoryMeta = {\n title: \"ZBookCard\",\n component: \"z-book-card\",\n argTypes: {\n \"variant\": {\n control: {\n type: \"inline-radio\",\n },\n options: Object.values(BookCardVariant),\n },\n \"theme\": {\n control: {\n type: \"inline-radio\",\n },\n options: [\"theme-default\", \"theme-dark\", \"theme-black-yellow\", \"theme-red\"],\n },\n \"--z-book-card-ribbon-background-color\": getColorTokenArgConfig(),\n \"--z-book-card-ribbon-shadow-color\": getColorTokenArgConfig(),\n },\n args: {\n \"variant\": BookCardVariant.EXPANDED,\n \"cover\": \"https://staticmy.zanichelli.it/catalogo/assets/m40001.9788808490056.jpg\",\n \"operaTitle\": \"Matematica.azzurro\",\n \"volumeTitle\": \"Volume 3 con Tutor\",\n \"authors\": \"Massimo Bergamini, Anna Trifone, Graziella Barozzi\",\n \"isbn\": \"9788808930552\",\n \"isbnLabel\": \"\",\n \"ribbon\": \"ADOTTATO\",\n \"ribbonIcon\": \"\",\n \"ribbonInteractive\": false,\n \"borderless\": false,\n \"fallbackCover\": \"https://staticmy.zanichelli.it/copertine/dashboard/Dashboard_Book_Placeholder.jpg\",\n \"operaTitleTag\": \"h1\",\n \"theme\": \"theme-default\",\n \"--z-book-card-ribbon-background-color\": \"var(--avatar-C08)\",\n \"--z-book-card-ribbon-shadow-color\": \"var(--green950)\",\n \"--z-book-card-compact-width\": \"262px\",\n \"--z-book-card-compact-height\": \"600px\",\n },\n} satisfies Meta<ZBookCardStoriesArgs>;\n\nexport default StoryMeta;\n\ntype Story = StoryObj<ZBookCardStoriesArgs>;\n\nexport const AllProps = {\n parameters: {\n controls: {\n exclude: [\"borderless\"],\n },\n },\n render: (args) =>\n html`<z-book-card\n variant=${args.variant}\n cover=${args.cover}\n opera-title=${args.operaTitle}\n volume-title=${args.volumeTitle}\n authors=${args.authors}\n isbn=${args.isbn}\n isbn-label=${args.isbnLabel}\n ribbon=${args.ribbon}\n ribbon-icon=${args.ribbonIcon}\n ribbon-interactive=${args.ribbonInteractive}\n fallback-cover=${args.fallbackCover}\n opera-title-tag=${args.operaTitleTag}\n class=${args.theme}\n style=${styleMap({\n \"--z-book-card-ribbon-background-color\": `${args[\"--z-book-card-ribbon-background-color\"]}`,\n \"--z-book-card-ribbon-shadow-color\": `${args[\"--z-book-card-ribbon-shadow-color\"]}`,\n \"--z-book-card-compact-width\": `${args[\"--z-book-card-compact-width\"]}`,\n \"--z-book-card-compact-height\": `${args[\"--z-book-card-compact-height\"]}`,\n })}\n ></z-book-card>`,\n} satisfies Story;\n\nexport const SlottedTags = {\n parameters: {\n controls: {\n exclude: [\"borderless\"],\n },\n },\n render: (args) =>\n html`<z-book-card\n variant=${args.variant}\n cover=${args.cover}\n opera-title=${args.operaTitle}\n volume-title=${args.volumeTitle}\n authors=${args.authors}\n isbn=${args.isbn}\n isbn-label=${args.isbnLabel}\n ribbon=${args.ribbon}\n ribbon-icon=${args.ribbonIcon}\n ribbon-interactive=${args.ribbonInteractive}\n fallback-cover=${args.fallbackCover}\n opera-title-tag=${args.operaTitleTag}\n class=${args.theme}\n style=${styleMap({\n \"--z-book-card-ribbon-background-color\": `${args[\"--z-book-card-ribbon-background-color\"]}`,\n \"--z-book-card-ribbon-shadow-color\": `${args[\"--z-book-card-ribbon-shadow-color\"]}`,\n \"--z-book-card-compact-width\": `${args[\"--z-book-card-compact-width\"]}`,\n \"--z-book-card-compact-height\": `${args[\"--z-book-card-compact-height\"]}`,\n })}\n >\n <z-tag\n slot=\"tags\"\n style=\"--z-tag-bg: var(--avatar-C18)\"\n >EDI</z-tag\n >\n <z-tag slot=\"tags\">VERSIONE INSEGNANTE</z-tag>\n </z-book-card>`,\n} satisfies Story;\n\nexport const SlottedResources = {\n parameters: {\n controls: {\n exclude: [\"borderless\"],\n },\n },\n render: (args) =>\n html`<z-book-card\n variant=${args.variant}\n cover=${args.cover}\n opera-title=${args.operaTitle}\n volume-title=${args.volumeTitle}\n authors=${args.authors}\n isbn=${args.isbn}\n isbn-label=${args.isbnLabel}\n ribbon=${args.ribbon}\n ribbon-icon=${args.ribbonIcon}\n ribbon-interactive=${args.ribbonInteractive}\n fallback-cover=${args.fallbackCover}\n opera-title-tag=${args.operaTitleTag}\n class=${args.theme}\n style=${styleMap({\n \"--z-book-card-ribbon-background-color\": `${args[\"--z-book-card-ribbon-background-color\"]}`,\n \"--z-book-card-ribbon-shadow-color\": `${args[\"--z-book-card-ribbon-shadow-color\"]}`,\n \"--z-book-card-compact-width\": `${args[\"--z-book-card-compact-width\"]}`,\n \"--z-book-card-compact-height\": `${args[\"--z-book-card-compact-height\"]}`,\n })}\n >\n <a\n class=\"z-link z-link-icon\"\n slot=\"resources\"\n style=\"width:100%; margin-bottom: 6px;\"\n >\n <z-icon\n style=\"margin-right: 8px\"\n name=\"arrow-quad-north-east\"\n ></z-icon>\n Resource link mock\n </a>\n <z-button\n slot=\"resources\"\n variant=\"secondary\"\n size=\"x-small\"\n style=\"width:100%; margin-bottom: 16px;\"\n >Resource CTA mock</z-button\n >\n </z-book-card>`,\n} satisfies Story;\n\nexport const SlottedHeaderCta = {\n parameters: {\n controls: {\n exclude: [\"borderless\"],\n },\n },\n render: (args) =>\n html`<z-book-card\n variant=${args.variant}\n cover=${args.cover}\n opera-title=${args.operaTitle}\n volume-title=${args.volumeTitle}\n authors=${args.authors}\n isbn=${args.isbn}\n isbn-label=${args.isbnLabel}\n ribbon=${args.ribbon}\n ribbon-icon=${args.ribbonIcon}\n ribbon-interactive=${args.ribbonInteractive}\n fallback-cover=${args.fallbackCover}\n opera-title-tag=${args.operaTitleTag}\n class=${args.theme}\n style=${styleMap({\n \"--z-book-card-ribbon-background-color\": `${args[\"--z-book-card-ribbon-background-color\"]}`,\n \"--z-book-card-ribbon-shadow-color\": `${args[\"--z-book-card-ribbon-shadow-color\"]}`,\n \"--z-book-card-compact-width\": `${args[\"--z-book-card-compact-width\"]}`,\n \"--z-book-card-compact-height\": `${args[\"--z-book-card-compact-height\"]}`,\n })}\n >\n <z-icon\n name=\"star-empty\"\n slot=\"header-cta\"\n ></z-icon>\n </z-book-card>`,\n} satisfies Story;\n\nexport const SlottedFooterCta = {\n parameters: {\n controls: {\n exclude: [\"borderless\"],\n },\n },\n render: (args) =>\n html`<z-book-card\n variant=${args.variant}\n cover=${args.cover}\n opera-title=${args.operaTitle}\n volume-title=${args.volumeTitle}\n authors=${args.authors}\n isbn=${args.isbn}\n isbn-label=${args.isbnLabel}\n ribbon=${args.ribbon}\n ribbon-icon=${args.ribbonIcon}\n ribbon-interactive=${args.ribbonInteractive}\n fallback-cover=${args.fallbackCover}\n opera-title-tag=${args.operaTitleTag}\n class=${args.theme}\n style=${styleMap({\n \"--z-book-card-ribbon-background-color\": `${args[\"--z-book-card-ribbon-background-color\"]}`,\n \"--z-book-card-ribbon-shadow-color\": `${args[\"--z-book-card-ribbon-shadow-color\"]}`,\n \"--z-book-card-compact-width\": `${args[\"--z-book-card-compact-width\"]}`,\n \"--z-book-card-compact-height\": `${args[\"--z-book-card-compact-height\"]}`,\n })}\n >\n <z-icon\n name=\"star-empty\"\n slot=\"header-cta\"\n ></z-icon>\n <div slot=\"footer-cta\">\n <z-button\n href=\"http://dizionari.zanichelli.it\"\n target=\"_blank\"\n variant=\"secondary\"\n size=\"x-small\"\n >\n Leggi il libro online\n </z-button>\n </div>\n </z-book-card>`,\n} satisfies Story;\n\nexport const ExpandedVariant = {\n parameters: {\n controls: {\n exclude: [\"variant\", \"borderless\", \"theme\", \"--z-book-card-compact-width\", \"--z-book-card-compact-height\"],\n },\n },\n render: (args) =>\n html`<z-book-card\n variant=\"expanded\"\n cover=${args.cover}\n opera-title=${args.operaTitle}\n volume-title=${args.volumeTitle}\n authors=${args.authors}\n isbn=${args.isbn}\n isbn-label=${args.isbnLabel}\n ribbon=${args.ribbon}\n ribbon-icon=${args.ribbonIcon}\n ribbon-interactive=${args.ribbonInteractive}\n fallback-cover=${args.fallbackCover}\n opera-title-tag=${args.operaTitleTag}\n style=${styleMap({\n \"--z-book-card-ribbon-background-color\": `${args[\"--z-book-card-ribbon-background-color\"]}`,\n \"--z-book-card-ribbon-shadow-color\": `${args[\"--z-book-card-ribbon-shadow-color\"]}`,\n })}\n >\n <z-tag\n slot=\"tags\"\n style=\"--z-tag-bg: var(--avatar-C18)\"\n >EDI</z-tag\n >\n <z-tag slot=\"tags\">VERSIONE INSEGNANTE</z-tag>\n <a\n class=\"z-link z-link-icon\"\n slot=\"resources\"\n style=\"width:100%; margin-bottom: 6px;\"\n >\n <z-icon\n style=\"margin-right: 8px\"\n name=\"arrow-quad-north-east\"\n ></z-icon>\n Resource link mock\n </a>\n <z-button\n slot=\"resources\"\n variant=\"secondary\"\n size=\"x-small\"\n style=\"width:100%; margin-bottom: 16px;\"\n >Resource CTA mock</z-button\n >\n <z-icon\n name=\"star-empty\"\n slot=\"header-cta\"\n tabindex=\"0\"\n ></z-icon>\n </z-book-card>`,\n} satisfies Story;\n\nexport const SearchVariant = {\n parameters: {\n controls: {\n exclude: [\"variant\", \"borderless\", \"theme\", \"--z-book-card-compact-width\", \"--z-book-card-compact-height\"],\n },\n },\n render: (args) =>\n html`<z-book-card\n variant=\"search\"\n cover=${args.cover}\n opera-title=${args.operaTitle}\n volume-title=${args.volumeTitle}\n authors=${args.authors}\n isbn=${args.isbn}\n isbn-label=${args.isbnLabel}\n ribbon=${args.ribbon}\n ribbon-icon=${args.ribbonIcon}\n ribbon-interactive=${args.ribbonInteractive}\n fallback-cover=${args.fallbackCover}\n opera-title-tag=${args.operaTitleTag}\n style=${styleMap({\n \"--z-book-card-ribbon-background-color\": `${args[\"--z-book-card-ribbon-background-color\"]}`,\n \"--z-book-card-ribbon-shadow-color\": `${args[\"--z-book-card-ribbon-shadow-color\"]}`,\n })}\n >\n <z-icon\n name=\"star-empty\"\n slot=\"header-cta\"\n ></z-icon>\n <z-tag\n slot=\"tags\"\n style=\"--z-tag-bg: var(--avatar-C18)\"\n >EDI</z-tag\n >\n <z-tag slot=\"tags\">VERSIONE INSEGNANTE</z-tag>\n <div slot=\"footer-cta\">\n <z-button\n href=\"http://dizionari.zanichelli.it\"\n target=\"_blank\"\n variant=\"secondary\"\n size=\"x-small\"\n >\n Leggi il libro online\n </z-button>\n </div>\n </z-book-card>`,\n} satisfies Story;\n\nexport const CompactVariant = {\n parameters: {\n controls: {\n exclude: [\n \"variant\",\n \"ribbon\",\n \"ribbonIcon\",\n \"ribbonInteractive\",\n \"--z-book-card-ribbon-background-color\",\n \"--z-book-card-ribbon-shadow-color\",\n ],\n },\n },\n render: (args) =>\n html`<z-book-card\n variant=\"compact\"\n cover=${args.cover}\n opera-title=${args.operaTitle}\n volume-title=${args.volumeTitle}\n borderless=${args.borderless}\n authors=${args.authors}\n isbn=${args.isbn}\n isbn-label=${args.isbnLabel}\n fallback-cover=${args.fallbackCover}\n opera-title-tag=${args.operaTitleTag}\n class=${args.theme}\n style=${styleMap({\n \"--z-book-card-compact-width\": `${args[\"--z-book-card-compact-width\"]}`,\n \"--z-book-card-compact-height\": `${args[\"--z-book-card-compact-height\"]}`,\n })}\n >\n <z-icon\n name=\"star-empty\"\n slot=\"header-cta\"\n ></z-icon>\n <z-tag\n slot=\"tags\"\n style=\"--z-tag-bg: var(--avatar-C18)\"\n >EDI</z-tag\n >\n <z-tag slot=\"tags\">VERSIONE INSEGNANTE</z-tag>\n <div\n slot=\"footer-cta\"\n style=\"display:flex; gap:8px;\"\n >\n <z-button\n href=\"http://dizionari.zanichelli.it\"\n target=\"_blank\"\n variant=\"secondary\"\n size=\"x-small\"\n >\n Call to action\n </z-button>\n <z-button\n icon=\"arrow-quad-north-east\"\n variant=\"secondary\"\n size=\"x-small\"\n ></z-button>\n </div>\n </z-book-card>`,\n} satisfies Story;\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.stories.js","sourceRoot":"","sources":["../../../docs/themes/index.stories.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,IAAI,EAAC,MAAM,KAAK,CAAC;AACzB,OAAO,4CAA4C,CAAC;AACpD,OAAO,EAAC,WAAW,EAAE,oBAAoB,EAAE,kBAAkB,EAAC,MAAM,iCAAiC,CAAC;AACtG,OAAO,qBAAqB,CAAC;AAE7B,eAAe;IACb,KAAK,EAAE,QAAQ;IACf,QAAQ,EAAE;QACR,KAAK,EAAE;YACL,OAAO,EAAE;gBACP,IAAI,EAAE,cAAc;aACrB;YACD,OAAO,EAAE,CAAC,eAAe,EAAE,oBAAoB,EAAE,YAAY,CAAC;
|
|
1
|
+
{"version":3,"file":"index.stories.js","sourceRoot":"","sources":["../../../docs/themes/index.stories.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,IAAI,EAAC,MAAM,KAAK,CAAC;AACzB,OAAO,4CAA4C,CAAC;AACpD,OAAO,EAAC,WAAW,EAAE,oBAAoB,EAAE,kBAAkB,EAAC,MAAM,iCAAiC,CAAC;AACtG,OAAO,qBAAqB,CAAC;AAE7B,eAAe;IACb,KAAK,EAAE,QAAQ;IACf,QAAQ,EAAE;QACR,KAAK,EAAE;YACL,OAAO,EAAE;gBACP,IAAI,EAAE,cAAc;aACrB;YACD,OAAO,EAAE,CAAC,eAAe,EAAE,oBAAoB,EAAE,YAAY,EAAE,WAAW,CAAC;SAC5E;KACF;IACD,IAAI,EAAE;QACJ,KAAK,EAAE,eAAe;KACvB;IACD,UAAU,EAAE;QACV,MAAM,EAAE,YAAY;KACrB;IACD,IAAI,EAAE,CAAC,WAAW,CAAC;CACpB,CAAC;AAEF,MAAM,CAAC,MAAM,MAAM,GAAG;IACpB,MAAM,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAA;sCACc,IAAI,CAAC,KAAK;;;;;;;;;;YAUpC,oBAAoB,EAAE;SACrB,IAAI,EAAE;SACN,GAAG,CACF,CAAC,KAAK,EAAE,EAAE;;QAAC,OAAA,IAAI,CAAA;;6CAEgB,KAAK;;;;qDAIG,KAAK;;;wBAGlC,MAAA,kBAAkB,CAAC,IAAI,CAAC,KAAK,EAAE,KAAK,CAAC,mCACvC,gBAAgB,CAAC,QAAQ,CAAC,eAAe,CAAC,CAAC,gBAAgB,CAAC,KAAK,CAAC;;;;eAIzE,CAAA;KAAA,CACF;;;;GAIV;CACiB,CAAC;AAErB,MAAM,QAAQ,GAAG,WAAW,EAAE,CAAC;AAE/B,MAAM,CAAC,MAAM,QAAQ,GAAG;IACtB,MAAM,EAAE,GAAG,EAAE,CAAC,IAAI,CAAA;;QAEZ,MAAM,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,GAAG,CACzB,CAAC,WAAW,EAAE,EAAE,CACd,IAAI,CAAA;;;6DAG+C,QAAQ,CAAC,WAAW,CAAC,CAAC,IAAI,CAAC,CAAC,KAAK,EAAE,EAAE,CAClF,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,CACtB;;0CAE2B,WAAW;;;gBAGrC,QAAQ,CAAC,WAAW,CAAC,CAAC,GAAG,CACzB,CAAC,KAAK,EAAE,EAAE,CAAC,IAAI,CAAA;;+CAEgB,KAAK;;;;uDAIG,KAAK;;;0BAGlC,gBAAgB,CAAC,QAAQ,CAAC,eAAe,CAAC,CAAC,gBAAgB,CAAC,KAAK,CAAC;;;;iBAI3E,CACF;;iBAEE,CACV;;GAEJ;CACiB,CAAC","sourcesContent":["import {StoryObj} from \"@storybook/web-components\";\nimport {html} from \"lit\";\nimport \"../../src/components/z-section-title/index\";\nimport {getPalettes, getThemesColorTokens, getThemeTokenValue} from \"../../src/utils/storybook-utils\";\nimport \"./index.stories.css\";\n\nexport default {\n title: \"Colors\",\n argTypes: {\n theme: {\n control: {\n type: \"inline-radio\",\n },\n options: [\"theme-default\", \"theme-black-yellow\", \"theme-dark\", \"theme-red\"],\n },\n },\n args: {\n theme: \"theme-default\",\n },\n parameters: {\n layout: \"fullscreen\",\n },\n tags: [\"!autodocs\"],\n};\n\nexport const Themes = {\n render: (args) => html`\n <div class=\"colors-story themes ${args.theme}\">\n <p>\n Currently available color themes: <strong>default</strong>, <strong>black-yellow</strong>, <strong>dark</strong>\n </p>\n <p>On this page you can see the value of the color tokens for each theme, by switching it from the controls.</p>\n <div class=\"tokens-container\">\n <z-section-title divider-position=\"after\">\n <div slot=\"primary-title\">Color tokens</div>\n </z-section-title>\n <ul>\n ${getThemesColorTokens()\n .sort()\n .map(\n (token) => html`\n <li>\n <span class=\"token-name\">${token}</span>\n <div class=\"color\">\n <div\n class=\"color-box\"\n style=\"background-color: var(${token})\"\n ></div>\n <div class=\"interactive-2\">\n ${getThemeTokenValue(args.theme, token) ??\n getComputedStyle(document.documentElement).getPropertyValue(token)}\n </div>\n </div>\n </li>\n `\n )}\n </ul>\n </div>\n </div>\n `,\n} satisfies StoryObj;\n\nconst palettes = getPalettes();\n\nexport const Palettes = {\n render: () => html`\n <div class=\"colors-story palettes\">\n ${Object.keys(palettes).map(\n (paletteName) =>\n html`<div class=\"tokens-container\">\n <z-section-title\n divider-position=\"after\"\n style=\"--z-section-title--divider-color: var(${palettes[paletteName].find((token) =>\n token.includes(\"500\")\n )})\"\n >\n <div slot=\"primary-title\">${paletteName}</div>\n </z-section-title>\n <ul>\n ${palettes[paletteName].map(\n (token) => html`\n <li>\n <span class=\"token-name\">${token}</span>\n <div class=\"color\">\n <div\n class=\"color-box\"\n style=\"background-color: var(${token})\"\n ></div>\n <div class=\"interactive-2\">\n ${getComputedStyle(document.documentElement).getPropertyValue(token)}\n </div>\n </div>\n </li>\n `\n )}\n </ul>\n </div>`\n )}\n </div>\n `,\n} satisfies StoryObj;\n"]}
|
|
@@ -6,7 +6,7 @@ import "../z-icon/index";
|
|
|
6
6
|
import "../z-tag/index";
|
|
7
7
|
import "./index";
|
|
8
8
|
type ZBookCardStoriesArgs = ZBookCard & {
|
|
9
|
-
theme: "theme-default" | "theme-dark" | "theme-black-yellow";
|
|
9
|
+
theme: "theme-default" | "theme-dark" | "theme-black-yellow" | "theme-red";
|
|
10
10
|
} & CSSVarsArguments<"z-book-card-ribbon-background-color" | "z-book-card-ribbon-shadow-color" | "z-book-card-compact-width" | "z-book-card-compact-height">;
|
|
11
11
|
declare const StoryMeta: {
|
|
12
12
|
title: string;
|
|
@@ -2389,6 +2389,51 @@ button.z-link.z-link-sb {
|
|
|
2389
2389
|
--color-inverse-warning: var(--yellow50);
|
|
2390
2390
|
}
|
|
2391
2391
|
|
|
2392
|
+
.theme-red {
|
|
2393
|
+
--color-background: var(--gray50);
|
|
2394
|
+
|
|
2395
|
+
/* primary */
|
|
2396
|
+
--color-active-primary-icon: var(--red400);
|
|
2397
|
+
--color-active-primary: var(--red400);
|
|
2398
|
+
--color-hover-primary-icon: var(--red800);
|
|
2399
|
+
--color-hover-primary: var(--red800);
|
|
2400
|
+
--color-pressed-primary: var(--red400);
|
|
2401
|
+
--color-primary01-icon: var(--red500);
|
|
2402
|
+
--color-primary02: var(--red25);
|
|
2403
|
+
--color-primary03: var(--red50);
|
|
2404
|
+
--color-primary01: var(--red500);
|
|
2405
|
+
|
|
2406
|
+
/* secondary */
|
|
2407
|
+
--color-active-secondary: var(--gray400);
|
|
2408
|
+
--color-hover-secondary: var(--gray800);
|
|
2409
|
+
--color-pressed-secondary: var(--gray400);
|
|
2410
|
+
--color-secondary01: var(--gray500);
|
|
2411
|
+
--color-secondary02: var(--gray25);
|
|
2412
|
+
--color-secondary03: var(--gray50);
|
|
2413
|
+
|
|
2414
|
+
/* surface */
|
|
2415
|
+
--color-surface01: var(--color-white);
|
|
2416
|
+
--color-surface02: var(--gray100);
|
|
2417
|
+
--color-surface03: var(--gray300);
|
|
2418
|
+
--color-surface04: var(--gray700);
|
|
2419
|
+
--color-surface05: var(--gray900);
|
|
2420
|
+
|
|
2421
|
+
/* text */
|
|
2422
|
+
--color-default-text: var(--gray900);
|
|
2423
|
+
--color-hover-text: var(--color-black);
|
|
2424
|
+
--color-pressed-text: var(--gray700);
|
|
2425
|
+
--color-text-inverse: var(--color-white);
|
|
2426
|
+
--color-text02: var(--gray100);
|
|
2427
|
+
--color-text03: var(--gray300);
|
|
2428
|
+
--color-text05: var(--gray500);
|
|
2429
|
+
|
|
2430
|
+
/* icons */
|
|
2431
|
+
--color-default-icon: var(--gray900);
|
|
2432
|
+
--color-hover-icon: var(--color-black);
|
|
2433
|
+
--color-inverse-icon: var(--color-white);
|
|
2434
|
+
--color-pressed-icon: var(--gray700);
|
|
2435
|
+
}
|
|
2436
|
+
|
|
2392
2437
|
|
|
2393
2438
|
z-accordion + z-accordion {
|
|
2394
2439
|
border-top: none;
|
package/package.json
CHANGED
|
@@ -2389,6 +2389,51 @@ button.z-link.z-link-sb {
|
|
|
2389
2389
|
--color-inverse-warning: var(--yellow50);
|
|
2390
2390
|
}
|
|
2391
2391
|
|
|
2392
|
+
.theme-red {
|
|
2393
|
+
--color-background: var(--gray50);
|
|
2394
|
+
|
|
2395
|
+
/* primary */
|
|
2396
|
+
--color-active-primary-icon: var(--red400);
|
|
2397
|
+
--color-active-primary: var(--red400);
|
|
2398
|
+
--color-hover-primary-icon: var(--red800);
|
|
2399
|
+
--color-hover-primary: var(--red800);
|
|
2400
|
+
--color-pressed-primary: var(--red400);
|
|
2401
|
+
--color-primary01-icon: var(--red500);
|
|
2402
|
+
--color-primary02: var(--red25);
|
|
2403
|
+
--color-primary03: var(--red50);
|
|
2404
|
+
--color-primary01: var(--red500);
|
|
2405
|
+
|
|
2406
|
+
/* secondary */
|
|
2407
|
+
--color-active-secondary: var(--gray400);
|
|
2408
|
+
--color-hover-secondary: var(--gray800);
|
|
2409
|
+
--color-pressed-secondary: var(--gray400);
|
|
2410
|
+
--color-secondary01: var(--gray500);
|
|
2411
|
+
--color-secondary02: var(--gray25);
|
|
2412
|
+
--color-secondary03: var(--gray50);
|
|
2413
|
+
|
|
2414
|
+
/* surface */
|
|
2415
|
+
--color-surface01: var(--color-white);
|
|
2416
|
+
--color-surface02: var(--gray100);
|
|
2417
|
+
--color-surface03: var(--gray300);
|
|
2418
|
+
--color-surface04: var(--gray700);
|
|
2419
|
+
--color-surface05: var(--gray900);
|
|
2420
|
+
|
|
2421
|
+
/* text */
|
|
2422
|
+
--color-default-text: var(--gray900);
|
|
2423
|
+
--color-hover-text: var(--color-black);
|
|
2424
|
+
--color-pressed-text: var(--gray700);
|
|
2425
|
+
--color-text-inverse: var(--color-white);
|
|
2426
|
+
--color-text02: var(--gray100);
|
|
2427
|
+
--color-text03: var(--gray300);
|
|
2428
|
+
--color-text05: var(--gray500);
|
|
2429
|
+
|
|
2430
|
+
/* icons */
|
|
2431
|
+
--color-default-icon: var(--gray900);
|
|
2432
|
+
--color-hover-icon: var(--color-black);
|
|
2433
|
+
--color-inverse-icon: var(--color-white);
|
|
2434
|
+
--color-pressed-icon: var(--gray700);
|
|
2435
|
+
}
|
|
2436
|
+
|
|
2392
2437
|
|
|
2393
2438
|
z-accordion + z-accordion {
|
|
2394
2439
|
border-top: none;
|
|
@@ -2389,6 +2389,51 @@ button.z-link.z-link-sb {
|
|
|
2389
2389
|
--color-inverse-warning: var(--yellow50);
|
|
2390
2390
|
}
|
|
2391
2391
|
|
|
2392
|
+
.theme-red {
|
|
2393
|
+
--color-background: var(--gray50);
|
|
2394
|
+
|
|
2395
|
+
/* primary */
|
|
2396
|
+
--color-active-primary-icon: var(--red400);
|
|
2397
|
+
--color-active-primary: var(--red400);
|
|
2398
|
+
--color-hover-primary-icon: var(--red800);
|
|
2399
|
+
--color-hover-primary: var(--red800);
|
|
2400
|
+
--color-pressed-primary: var(--red400);
|
|
2401
|
+
--color-primary01-icon: var(--red500);
|
|
2402
|
+
--color-primary02: var(--red25);
|
|
2403
|
+
--color-primary03: var(--red50);
|
|
2404
|
+
--color-primary01: var(--red500);
|
|
2405
|
+
|
|
2406
|
+
/* secondary */
|
|
2407
|
+
--color-active-secondary: var(--gray400);
|
|
2408
|
+
--color-hover-secondary: var(--gray800);
|
|
2409
|
+
--color-pressed-secondary: var(--gray400);
|
|
2410
|
+
--color-secondary01: var(--gray500);
|
|
2411
|
+
--color-secondary02: var(--gray25);
|
|
2412
|
+
--color-secondary03: var(--gray50);
|
|
2413
|
+
|
|
2414
|
+
/* surface */
|
|
2415
|
+
--color-surface01: var(--color-white);
|
|
2416
|
+
--color-surface02: var(--gray100);
|
|
2417
|
+
--color-surface03: var(--gray300);
|
|
2418
|
+
--color-surface04: var(--gray700);
|
|
2419
|
+
--color-surface05: var(--gray900);
|
|
2420
|
+
|
|
2421
|
+
/* text */
|
|
2422
|
+
--color-default-text: var(--gray900);
|
|
2423
|
+
--color-hover-text: var(--color-black);
|
|
2424
|
+
--color-pressed-text: var(--gray700);
|
|
2425
|
+
--color-text-inverse: var(--color-white);
|
|
2426
|
+
--color-text02: var(--gray100);
|
|
2427
|
+
--color-text03: var(--gray300);
|
|
2428
|
+
--color-text05: var(--gray500);
|
|
2429
|
+
|
|
2430
|
+
/* icons */
|
|
2431
|
+
--color-default-icon: var(--gray900);
|
|
2432
|
+
--color-hover-icon: var(--color-black);
|
|
2433
|
+
--color-inverse-icon: var(--color-white);
|
|
2434
|
+
--color-pressed-icon: var(--gray700);
|
|
2435
|
+
}
|
|
2436
|
+
|
|
2392
2437
|
|
|
2393
2438
|
z-accordion + z-accordion {
|
|
2394
2439
|
border-top: none;
|
package/www/index.html
CHANGED
|
@@ -1,3 +1,3 @@
|
|
|
1
|
-
<!doctype html><html dir="ltr" lang="en"><head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=5.0"> <title>Albe test application</title> <link rel="stylesheet" type="text/css" href="/build/p-
|
|
1
|
+
<!doctype html><html dir="ltr" lang="en"><head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=5.0"> <title>Albe test application</title> <link rel="stylesheet" type="text/css" href="/build/p-68fa0be6.css"> <link rel="modulepreload" href="/build/p-2babe5d1.js"><link rel="modulepreload" href="/build/p-1c24255c.js"><link rel="modulepreload" href="/build/p-5145a606.js"><link rel="modulepreload" href="/build/p-75c4a726.js"><link rel="modulepreload" href="/build/p-90908f36.js"><script type="module" src="/build/p-2babe5d1.js" data-stencil data-resources-url="/build/" data-stencil-namespace="web-components-library"></script> <script nomodule="" src="/build/web-components-library.js" data-stencil></script> </head> <body> <header> <z-app-header> <h1 slot="title">Albe test app</h1> </z-app-header> </header> <main></main> <style>body {
|
|
2
2
|
margin: 0;
|
|
3
3
|
}</style> </body></html>
|