@zanichelli/albe-web-components 15.1.0 → 15.1.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +2 -0
- package/dist/collection/components/css-components/z-fab/index.stories.js +2 -2
- package/dist/collection/components/css-components/z-fab/index.stories.js.map +1 -1
- package/dist/web-components-library/web-components-library.css +15 -0
- package/package.json +1 -1
- package/www/build/{p-c12a2d47.css → p-9e18903a.css} +15 -0
- package/www/build/web-components-library.css +15 -0
- package/www/index.html +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -62,8 +62,8 @@ export const Default = {
|
|
|
62
62
|
"z-fab-extendable": args["z-fab-extendable"],
|
|
63
63
|
})}
|
|
64
64
|
>
|
|
65
|
-
|
|
66
|
-
|
|
65
|
+
${args.icon ? html `<z-icon name=${args.icon}></z-icon>` : ""}
|
|
66
|
+
${args.label ? html `<span>${args.label}</span>` : ""}
|
|
67
67
|
</button>
|
|
68
68
|
`,
|
|
69
69
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.stories.js","sourceRoot":"","sources":["../../../../../src/components/css-components/z-fab/index.stories.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,IAAI,EAAC,MAAM,KAAK,CAAC;AACzB,OAAO,EAAC,QAAQ,EAAC,MAAM,6BAA6B,CAAC;AACrD,OAAO,EAAC,KAAK,EAAC,MAAM,4BAA4B,CAAC;AACjD,OAAO,oBAAoB,CAAC;AAC5B,OAAO,qBAAqB,CAAC;AAE7B;;;;;;;;;;;;;;GAcG;AACH,eAAe;IACb,KAAK,EAAE,MAAM;IACb,QAAQ,EAAE;QACR,IAAI,EAAE;YACJ,OAAO,EAAE,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC;YAC3B,OAAO,EAAE,EAAC,IAAI,EAAE,QAAQ,EAAC;SAC1B;QACD,IAAI,EAAE;YACJ,OAAO,EAAE,CAAC,SAAS,EAAE,aAAa,EAAE,eAAe,CAAC;YACpD,OAAO,EAAE,EAAC,IAAI,EAAE,cAAc,EAAC;SAChC;QACD,YAAY,EAAE;YACZ,OAAO,EAAE,CAAC,SAAS,EAAE,iBAAiB,EAAE,iBAAiB,EAAE,iBAAiB,EAAE,iBAAiB,CAAC;YAChG,OAAO,EAAE,EAAC,IAAI,EAAE,cAAc,EAAC;SAChC;KACF;IACD,IAAI,EAAE;QACJ,cAAc,EAAE,SAAS;QACzB,MAAM,EAAE,sBAAsB;QAC9B,OAAO,EAAE,MAAM;QACf,MAAM,EAAE,SAAS;QACjB,kBAAkB,EAAE,KAAK;QACzB,gBAAgB,EAAE,IAAI;KACvB;IACD,UAAU,EAAE;QACV,MAAM,EAAE,YAAY;KACrB;IACD,IAAI,EAAE,CAAC,WAAW,CAAC;CACpB,CAAC;AAEF,MAAM,CAAC,MAAM,OAAO,GAAG;IACrB,MAAM,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAA;;cAEV,QAAQ,CAAC;QACf,OAAO,EAAE,IAAI;QACb,aAAa,EAAE,IAAI,CAAC,IAAI,KAAK,aAAa;QAC1C,eAAe,EAAE,IAAI,CAAC,IAAI,KAAK,eAAe;QAC9C,iBAAiB,EAAE,IAAI,CAAC,YAAY,KAAK,iBAAiB;QAC1D,iBAAiB,EAAE,IAAI,CAAC,YAAY,KAAK,iBAAiB;QAC1D,iBAAiB,EAAE,IAAI,CAAC,YAAY,KAAK,iBAAiB;QAC1D,iBAAiB,EAAE,IAAI,CAAC,YAAY,KAAK,iBAAiB;QAC1D,gBAAgB,EAAE,IAAI,CAAC,gBAAgB,CAAC;QACxC,kBAAkB,EAAE,IAAI,CAAC,kBAAkB,CAAC;KAC7C,CAAC;;
|
|
1
|
+
{"version":3,"file":"index.stories.js","sourceRoot":"","sources":["../../../../../src/components/css-components/z-fab/index.stories.ts"],"names":[],"mappings":"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","sourcesContent":["import {html} from \"lit\";\nimport {classMap} from \"lit/directives/class-map.js\";\nimport {ICONS} from \"../../../constants/iconset\";\nimport \"../../z-icon/index\";\nimport \"./index.stories.css\";\n\n/**\n * You can use the `.z-fab` class on a `<button>` or `<a>` with some additional configuration class:\n * - Sizes: `.z-fab-small`, `.z-fab-x-small`. Default with no size classes, is `big`\n * - Color variants: `.z-fab-primary03`, `.z-fab-surface01`, `.z-fab-surface02`, `.z-fab-surface04`. Default with no color classes, is `primary01`\n * - `.z-fab-extended`: show the label (if any) near the icon\n * - `.z-fab-extendable`: label will be shown only on mouse hover and only on desktop viewports (don't add the `.z-fab-extended` class in this case)\n *\n * Some css custom properties are also available to customize the component:\n * - `--z-fab-right-offset`: the right offset of the fab button (Default: `--grid-margin`)\n * - `--z-fab-bottom-offset`: the bottom offset of the fab button (Default: `--grid-margin`)\n * - `--z-fab-icon-size`: the size of the icon (Default: `20px`)\n * - `--z-fab-icon-fill`: the fill color of the icon (Default: `--color-inverse-icon`)\n *\n * > NB: for the `extended` and `extendable` versions, always wrap the text of the label with some element (e.g. a `<span>`).\n */\nexport default {\n title: \"ZFab\",\n argTypes: {\n icon: {\n options: Object.keys(ICONS),\n control: {type: \"select\"},\n },\n size: {\n options: [\"default\", \"z-fab-small\", \"z-fab-x-small\"],\n control: {type: \"inline-radio\"},\n },\n colorVariant: {\n options: [\"default\", \"z-fab-primary03\", \"z-fab-surface01\", \"z-fab-surface02\", \"z-fab-surface04\"],\n control: {type: \"inline-radio\"},\n },\n },\n args: {\n \"colorVariant\": \"default\",\n \"icon\": \"question-mark-circle\",\n \"label\": \"Info\",\n \"size\": \"default\",\n \"z-fab-extendable\": false,\n \"z-fab-extended\": true,\n },\n parameters: {\n layout: \"fullscreen\",\n },\n tags: [\"!autodocs\"],\n};\n\nexport const Default = {\n render: (args) => html`\n <button\n class=${classMap({\n \"z-fab\": true,\n \"z-fab-small\": args.size === \"z-fab-small\",\n \"z-fab-x-small\": args.size === \"z-fab-x-small\",\n \"z-fab-primary03\": args.colorVariant === \"z-fab-primary03\",\n \"z-fab-surface01\": args.colorVariant === \"z-fab-surface01\",\n \"z-fab-surface02\": args.colorVariant === \"z-fab-surface02\",\n \"z-fab-surface04\": args.colorVariant === \"z-fab-surface04\",\n \"z-fab-extended\": args[\"z-fab-extended\"],\n \"z-fab-extendable\": args[\"z-fab-extendable\"],\n })}\n >\n ${args.icon ? html`<z-icon name=${args.icon}></z-icon>` : \"\"}\n ${args.label ? html`<span>${args.label}</span>` : \"\"}\n </button>\n `,\n};\n\n/**\n * Multiple ZFab can be used in the same page (max 3), but only one can be \"default\". The other ones must have a smaller size and can't have the text.\n * You can space them by setting the `--z-fab-bottom-offset` CSS prop.\n */\nexport const Multiple = {\n render: (args) => html`\n <button\n class=${classMap({\n \"z-fab\": true,\n \"z-fab-small\": args.size === \"z-fab-small\",\n \"z-fab-x-small\": args.size === \"z-fab-x-small\",\n \"z-fab-primary03\": args.colorVariant === \"z-fab-primary03\",\n \"z-fab-surface01\": args.colorVariant === \"z-fab-surface01\",\n \"z-fab-surface02\": args.colorVariant === \"z-fab-surface02\",\n \"z-fab-surface04\": args.colorVariant === \"z-fab-surface04\",\n \"z-fab-extended\": args[\"z-fab-extended\"],\n \"z-fab-extendable\": args[\"z-fab-extendable\"],\n })}\n >\n <z-icon name=${args.icon}></z-icon>\n <span>${args.label}</span>\n </button>\n <button\n class=${classMap({\n \"z-fab\": true,\n \"fab2\": true,\n \"z-fab-small\": true,\n \"z-fab-surface01\": true,\n })}\n >\n <z-icon name=\"support\"></z-icon>\n </button>\n `,\n};\n"]}
|
|
@@ -1418,6 +1418,12 @@
|
|
|
1418
1418
|
transition: all 0.2s ease-in-out;
|
|
1419
1419
|
}
|
|
1420
1420
|
|
|
1421
|
+
.z-fab:focus {
|
|
1422
|
+
-webkit-box-shadow: var(--shadow-focus-primary);
|
|
1423
|
+
box-shadow: var(--shadow-focus-primary);
|
|
1424
|
+
outline: none;
|
|
1425
|
+
}
|
|
1426
|
+
|
|
1421
1427
|
button.z-fab {
|
|
1422
1428
|
border: none;
|
|
1423
1429
|
}
|
|
@@ -1566,6 +1572,13 @@ button.z-link:focus {
|
|
|
1566
1572
|
fill: var(--color-hover-link);
|
|
1567
1573
|
}
|
|
1568
1574
|
|
|
1575
|
+
a.z-link:focus,
|
|
1576
|
+
button.z-link:focus {
|
|
1577
|
+
-webkit-box-shadow: var(--shadow-focus-primary);
|
|
1578
|
+
box-shadow: var(--shadow-focus-primary);
|
|
1579
|
+
outline: none;
|
|
1580
|
+
}
|
|
1581
|
+
|
|
1569
1582
|
a.z-link:active,
|
|
1570
1583
|
button.z-link:active,
|
|
1571
1584
|
a.z-link.z-link-active:active,
|
|
@@ -1600,6 +1613,8 @@ button.z-link.z-link-active.z-link-black {
|
|
|
1600
1613
|
|
|
1601
1614
|
a.z-link.z-link-disabled,
|
|
1602
1615
|
button.z-link.z-link-disabled {
|
|
1616
|
+
-webkit-box-shadow: none;
|
|
1617
|
+
box-shadow: none;
|
|
1603
1618
|
color: var(--color-disabled03);
|
|
1604
1619
|
cursor: default;
|
|
1605
1620
|
fill: var(--color-disabled03);
|
package/package.json
CHANGED
|
@@ -1418,6 +1418,12 @@
|
|
|
1418
1418
|
transition: all 0.2s ease-in-out;
|
|
1419
1419
|
}
|
|
1420
1420
|
|
|
1421
|
+
.z-fab:focus {
|
|
1422
|
+
-webkit-box-shadow: var(--shadow-focus-primary);
|
|
1423
|
+
box-shadow: var(--shadow-focus-primary);
|
|
1424
|
+
outline: none;
|
|
1425
|
+
}
|
|
1426
|
+
|
|
1421
1427
|
button.z-fab {
|
|
1422
1428
|
border: none;
|
|
1423
1429
|
}
|
|
@@ -1566,6 +1572,13 @@ button.z-link:focus {
|
|
|
1566
1572
|
fill: var(--color-hover-link);
|
|
1567
1573
|
}
|
|
1568
1574
|
|
|
1575
|
+
a.z-link:focus,
|
|
1576
|
+
button.z-link:focus {
|
|
1577
|
+
-webkit-box-shadow: var(--shadow-focus-primary);
|
|
1578
|
+
box-shadow: var(--shadow-focus-primary);
|
|
1579
|
+
outline: none;
|
|
1580
|
+
}
|
|
1581
|
+
|
|
1569
1582
|
a.z-link:active,
|
|
1570
1583
|
button.z-link:active,
|
|
1571
1584
|
a.z-link.z-link-active:active,
|
|
@@ -1600,6 +1613,8 @@ button.z-link.z-link-active.z-link-black {
|
|
|
1600
1613
|
|
|
1601
1614
|
a.z-link.z-link-disabled,
|
|
1602
1615
|
button.z-link.z-link-disabled {
|
|
1616
|
+
-webkit-box-shadow: none;
|
|
1617
|
+
box-shadow: none;
|
|
1603
1618
|
color: var(--color-disabled03);
|
|
1604
1619
|
cursor: default;
|
|
1605
1620
|
fill: var(--color-disabled03);
|
|
@@ -1418,6 +1418,12 @@
|
|
|
1418
1418
|
transition: all 0.2s ease-in-out;
|
|
1419
1419
|
}
|
|
1420
1420
|
|
|
1421
|
+
.z-fab:focus {
|
|
1422
|
+
-webkit-box-shadow: var(--shadow-focus-primary);
|
|
1423
|
+
box-shadow: var(--shadow-focus-primary);
|
|
1424
|
+
outline: none;
|
|
1425
|
+
}
|
|
1426
|
+
|
|
1421
1427
|
button.z-fab {
|
|
1422
1428
|
border: none;
|
|
1423
1429
|
}
|
|
@@ -1566,6 +1572,13 @@ button.z-link:focus {
|
|
|
1566
1572
|
fill: var(--color-hover-link);
|
|
1567
1573
|
}
|
|
1568
1574
|
|
|
1575
|
+
a.z-link:focus,
|
|
1576
|
+
button.z-link:focus {
|
|
1577
|
+
-webkit-box-shadow: var(--shadow-focus-primary);
|
|
1578
|
+
box-shadow: var(--shadow-focus-primary);
|
|
1579
|
+
outline: none;
|
|
1580
|
+
}
|
|
1581
|
+
|
|
1569
1582
|
a.z-link:active,
|
|
1570
1583
|
button.z-link:active,
|
|
1571
1584
|
a.z-link.z-link-active:active,
|
|
@@ -1600,6 +1613,8 @@ button.z-link.z-link-active.z-link-black {
|
|
|
1600
1613
|
|
|
1601
1614
|
a.z-link.z-link-disabled,
|
|
1602
1615
|
button.z-link.z-link-disabled {
|
|
1616
|
+
-webkit-box-shadow: none;
|
|
1617
|
+
box-shadow: none;
|
|
1603
1618
|
color: var(--color-disabled03);
|
|
1604
1619
|
cursor: default;
|
|
1605
1620
|
fill: var(--color-disabled03);
|
package/www/index.html
CHANGED
|
@@ -1 +1 @@
|
|
|
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-9e18903a.css"> <link rel="modulepreload" href="/build/p-21d22d93.js"><link rel="modulepreload" href="/build/p-025f494e.js"><link rel="modulepreload" href="/build/p-2c886e8b.js"><link rel="modulepreload" href="/build/p-955da62e.js"><link rel="modulepreload" href="/build/p-cc3c02fe.js"><script type="module" src="/build/p-21d22d93.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> </body></html>
|