@adgytec/adgytec-web-ui-components 2.1.2 → 2.1.3
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/dist/assets/AppBar.css +1 -1
- package/dist/chunks/AppBar +7 -6
- package/dist/chunks/AppBar.map +1 -1
- package/package.json +1 -1
package/dist/assets/AppBar.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
@layer adgytec.comps{._app-
|
|
1
|
+
@layer adgytec.comps{._app-bar_54m0f_10{--_md-app-bar-background:var(--md-app-bar-background,var(--md-sys-color-surface));--_md-app-bar-on-scroll-background:var(--md-app-bar-on-scroll-background,var(--md-sys-color-surface-container));--_md-app-bar-title-color:var(--md-app-bar-title-color,var(--md-sys-color-on-surface));--_md-app-bar-headline-block-size:var(--md-sys-layout-space-28);gap:var(--md-sys-layout-space-12);padding-inline:var(--md-sys-layout-space-4);padding-block:var(--md-sys-layout-space-8);background-color:var(--_md-app-bar-background);transition:background-color var(--md-sys-motion-expressive-fast-effects) var(--md-sys-motion-expressive-fast-effects-duration);display:grid}@media (prefers-reduced-motion){._app-bar_54m0f_10{transition:none}}._app-bar_54m0f_10[data-size=medium]{--_md-app-bar-headline-block-size:var(--md-sys-layout-space-36)}._app-bar_54m0f_10[data-size=large]{--_md-app-bar-headline-block-size:calc(44 * var(--dp,1px))}._app-bar_54m0f_10[data-scroll]{background-color:var(--_md-app-bar-on-scroll-background);box-shadow:var(--md-sys-elevation-shadow-2)}._primary_54m0f_55{gap:var(--md-sys-layout-space-4);align-items:center;display:flex}._primary_54m0f_55[data-alignment=centered]{grid-template-columns:1fr auto 1fr;display:grid}._leading-action_54m0f_66{--md-button-color:var(--_md-app-bar-title-color)}._leading-action_54m0f_66[data-alignment=centered]{grid-column:1;justify-self:start}._headline_54m0f_75[data-initial-padding]{padding-inline-start:var(--md-sys-layout-space-12)}._headline_54m0f_75[data-alignment=centered]{grid-column:2;justify-self:center}._trailing-actions_54m0f_84{align-items:center;margin-inline-start:auto;display:flex}._trailing-actions_54m0f_84[data-alignment=centered]{grid-column:3;justify-self:end;margin-inline-start:0}._secondary_54m0f_97{padding-inline:var(--md-sys-layout-space-12)}}
|
package/dist/chunks/AppBar
CHANGED
|
@@ -4,12 +4,12 @@ import i from "clsx";
|
|
|
4
4
|
import { useContext as a, useMemo as o } from "react";
|
|
5
5
|
import { jsx as s, jsxs as c } from "react/jsx-runtime";
|
|
6
6
|
import '../assets/AppBar.css';var l = {
|
|
7
|
-
"app-bar": "_app-
|
|
8
|
-
primary: "
|
|
9
|
-
"leading-action": "_leading-
|
|
10
|
-
headline: "
|
|
11
|
-
"trailing-actions": "_trailing-
|
|
12
|
-
secondary: "
|
|
7
|
+
"app-bar": "_app-bar_54m0f_10",
|
|
8
|
+
primary: "_primary_54m0f_55",
|
|
9
|
+
"leading-action": "_leading-action_54m0f_66",
|
|
10
|
+
headline: "_headline_54m0f_75",
|
|
11
|
+
"trailing-actions": "_trailing-actions_54m0f_84",
|
|
12
|
+
secondary: "_secondary_54m0f_97"
|
|
13
13
|
}, u = ({ className: u, size: d = "small", alignment: f = "default", leadingAction: p, trailingActions: m, headline: h, ...g }) => {
|
|
14
14
|
let _ = a(e), v = d !== "small", y = m && m.length > 0;
|
|
15
15
|
return /* @__PURE__ */ s(t, {
|
|
@@ -41,6 +41,7 @@ import '../assets/AppBar.css';var l = {
|
|
|
41
41
|
!v && h && /* @__PURE__ */ s("div", {
|
|
42
42
|
"data-alignment": f,
|
|
43
43
|
className: i(l.headline),
|
|
44
|
+
"data-initial-padding": !p || void 0,
|
|
44
45
|
children: h
|
|
45
46
|
}),
|
|
46
47
|
y && /* @__PURE__ */ s("div", {
|
package/dist/chunks/AppBar.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AppBar","names":[],"sources":["../../src/components/AppBar/AppBar/appBar.module.css","../../src/components/AppBar/AppBar/AppBar.tsx"],"sourcesContent":["/* configurable tokens\n*\n* --md-app-bar-background\n* --md-app-bar-on-scroll-background\n* --md-app-bar-title-color\n*\n* configurable tokens end */\n\n@layer adgytec.comps {\n .app-bar {\n --_md-app-bar-background: var(\n --md-app-bar-background,\n var(--md-sys-color-surface)\n );\n --_md-app-bar-on-scroll-background: var(\n --md-app-bar-on-scroll-background,\n var(--md-sys-color-surface-container)\n );\n --_md-app-bar-title-color: var(\n --md-app-bar-title-color,\n var(--md-sys-color-on-surface)\n );\n --_md-app-bar-headline-block-size: var(--md-sys-layout-space-28);\n\n display: grid;\n gap: var(--md-sys-layout-space-12);\n\n padding-inline: var(--md-sys-layout-space-4);\n padding-block: var(--md-sys-layout-space-8);\n\n background-color: var(--_md-app-bar-background);\n\n transition: background-color\n var(--md-sys-motion-expressive-fast-effects)\n var(--md-sys-motion-expressive-fast-effects-duration);\n\n @media (prefers-reduced-motion) {\n transition: none;\n }\n\n &[data-size=\"medium\"] {\n --_md-app-bar-headline-block-size: var(--md-sys-layout-space-36);\n }\n\n &[data-size=\"large\"] {\n --_md-app-bar-headline-block-size: calc(44 * var(--dp, 1px));\n }\n\n &[data-scroll] {\n background-color: var(--_md-app-bar-on-scroll-background);\n box-shadow: var(--md-sys-elevation-shadow-2);\n }\n }\n\n .primary {\n display: flex;\n gap: var(--md-sys-layout-space-4);\n align-items: center;\n\n &[data-alignment=\"centered\"] {\n display: grid;\n grid-template-columns: 1fr auto 1fr;\n }\n }\n\n .leading-action {\n --md-button-color: var(--_md-app-bar-title-color);\n\n &[data-alignment=\"centered\"] {\n grid-column: 1;\n justify-self: start;\n }\n }\n\n .headline[data-alignment=\"centered\"] {\n grid-column: 2;\n justify-self: center;\n }\n\n .trailing-actions {\n margin-inline-start: auto;\n\n display: flex;\n align-items: center;\n\n &[data-alignment=\"centered\"] {\n grid-column: 3;\n justify-self: end;\n margin-inline-start: 0;\n }\n }\n\n .secondary {\n padding-inline: var(--md-sys-layout-space-12);\n }\n}\n","import clsx from \"clsx\";\nimport { useContext, useMemo } from \"react\";\nimport { AppBarStateContext } from \"../AppBarState\";\nimport {\n AppBarContext,\n AppBarHeadlineBlockSize,\n AppBarHeadlineTypography,\n} from \"../core\";\nimport styles from \"./appBar.module.css\";\nimport type { AppBarProps } from \"./types\";\n\nexport const AppBar: React.FC<AppBarProps> = ({\n className,\n size = \"small\",\n alignment = \"default\",\n leadingAction,\n trailingActions,\n headline,\n ...props\n}) => {\n const appBarState = useContext(AppBarStateContext);\n const hasSecondary = size !== \"small\";\n const hasTrailingActions = trailingActions && trailingActions.length > 0;\n\n const contextValue = useMemo(\n () => ({\n size,\n alignment,\n headlineBlockSize: AppBarHeadlineBlockSize[size],\n headlineTypography: AppBarHeadlineTypography[size],\n }),\n [size, alignment]\n );\n\n return (\n <AppBarContext value={contextValue}>\n <header\n className={clsx(styles[\"app-bar\"], className)}\n {...props}\n data-size={size}\n data-alignment={alignment}\n data-has-secondary={(hasSecondary && !!headline) || undefined}\n data-scroll={appBarState?.isScrolling || undefined}\n >\n <div\n data-primary\n className={clsx(styles[\"primary\"])}\n data-alignment={alignment}\n data-size={size}\n >\n {leadingAction && (\n <div\n data-alignment={alignment}\n data-primary-leading\n className={clsx(styles[\"leading-action\"])}\n >\n {leadingAction}\n </div>\n )}\n\n {!hasSecondary && headline && (\n <div\n data-alignment={alignment}\n className={clsx(styles[\"headline\"])}\n >\n {headline}\n </div>\n )}\n\n {hasTrailingActions && (\n <div\n data-alignment={alignment}\n data-primary-trailing\n className={clsx(styles[\"trailing-actions\"])}\n >\n {trailingActions}\n </div>\n )}\n </div>\n\n {hasSecondary && headline && (\n <div\n data-secondary\n data-alignment={alignment}\n className={clsx(styles[\"secondary\"])}\n >\n {headline}\n </div>\n )}\n </header>\n </AppBarContext>\n );\n};\n"],"mappings":";;;;;;;;;;;;GCWa,KAAiC,EAC1C,cACA,UAAO,SACP,eAAY,WACZ,kBACA,oBACA,aACA,GAAG,QACD;CACF,IAAM,IAAc,EAAW,CAAkB,GAC3C,IAAe,MAAS,SACxB,IAAqB,KAAmB,EAAgB,SAAS;CAYvE,OACI,kBAAC,GAAD;EAAe,OAXE,SACV;GACH;GACA;GACA,mBAAmB,EAAwB;GAC3C,oBAAoB,EAAyB;EACjD,IACA,CAAC,GAAM,CAAS,CAIM;YAClB,kBAAC,UAAD;GACI,WAAW,EAAK,EAAO,YAAY,CAAS;GAC5C,GAAI;GACJ,aAAW;GACX,kBAAgB;GAChB,sBAAqB,KAAgB,CAAC,CAAC,KAAa,KAAA;GACpD,eAAa,GAAa,eAAe,KAAA;aAN7C,CAQI,kBAAC,OAAD;IACI,gBAAA;IACA,WAAW,EAAK,EAAO,OAAU;IACjC,kBAAgB;IAChB,aAAW;cAJf;KAMK,KACG,kBAAC,OAAD;MACI,kBAAgB;MAChB,wBAAA;MACA,WAAW,EAAK,EAAO,iBAAiB;gBAEvC;KACA,CAAA;KAGR,CAAC,KAAgB,KACd,kBAAC,OAAD;MACI,kBAAgB;MAChB,WAAW,EAAK,EAAO,QAAW;
|
|
1
|
+
{"version":3,"file":"AppBar","names":[],"sources":["../../src/components/AppBar/AppBar/appBar.module.css","../../src/components/AppBar/AppBar/AppBar.tsx"],"sourcesContent":["/* configurable tokens\n*\n* --md-app-bar-background\n* --md-app-bar-on-scroll-background\n* --md-app-bar-title-color\n*\n* configurable tokens end */\n\n@layer adgytec.comps {\n .app-bar {\n --_md-app-bar-background: var(\n --md-app-bar-background,\n var(--md-sys-color-surface)\n );\n --_md-app-bar-on-scroll-background: var(\n --md-app-bar-on-scroll-background,\n var(--md-sys-color-surface-container)\n );\n --_md-app-bar-title-color: var(\n --md-app-bar-title-color,\n var(--md-sys-color-on-surface)\n );\n --_md-app-bar-headline-block-size: var(--md-sys-layout-space-28);\n\n display: grid;\n gap: var(--md-sys-layout-space-12);\n\n padding-inline: var(--md-sys-layout-space-4);\n padding-block: var(--md-sys-layout-space-8);\n\n background-color: var(--_md-app-bar-background);\n\n transition: background-color\n var(--md-sys-motion-expressive-fast-effects)\n var(--md-sys-motion-expressive-fast-effects-duration);\n\n @media (prefers-reduced-motion) {\n transition: none;\n }\n\n &[data-size=\"medium\"] {\n --_md-app-bar-headline-block-size: var(--md-sys-layout-space-36);\n }\n\n &[data-size=\"large\"] {\n --_md-app-bar-headline-block-size: calc(44 * var(--dp, 1px));\n }\n\n &[data-scroll] {\n background-color: var(--_md-app-bar-on-scroll-background);\n box-shadow: var(--md-sys-elevation-shadow-2);\n }\n }\n\n .primary {\n display: flex;\n gap: var(--md-sys-layout-space-4);\n align-items: center;\n\n &[data-alignment=\"centered\"] {\n display: grid;\n grid-template-columns: 1fr auto 1fr;\n }\n }\n\n .leading-action {\n --md-button-color: var(--_md-app-bar-title-color);\n\n &[data-alignment=\"centered\"] {\n grid-column: 1;\n justify-self: start;\n }\n }\n\n .headline[data-initial-padding] {\n padding-inline-start: var(--md-sys-layout-space-12);\n }\n\n .headline[data-alignment=\"centered\"] {\n grid-column: 2;\n justify-self: center;\n }\n\n .trailing-actions {\n margin-inline-start: auto;\n\n display: flex;\n align-items: center;\n\n &[data-alignment=\"centered\"] {\n grid-column: 3;\n justify-self: end;\n margin-inline-start: 0;\n }\n }\n\n .secondary {\n padding-inline: var(--md-sys-layout-space-12);\n }\n}\n","import clsx from \"clsx\";\nimport { useContext, useMemo } from \"react\";\nimport { AppBarStateContext } from \"../AppBarState\";\nimport {\n AppBarContext,\n AppBarHeadlineBlockSize,\n AppBarHeadlineTypography,\n} from \"../core\";\nimport styles from \"./appBar.module.css\";\nimport type { AppBarProps } from \"./types\";\n\nexport const AppBar: React.FC<AppBarProps> = ({\n className,\n size = \"small\",\n alignment = \"default\",\n leadingAction,\n trailingActions,\n headline,\n ...props\n}) => {\n const appBarState = useContext(AppBarStateContext);\n const hasSecondary = size !== \"small\";\n const hasTrailingActions = trailingActions && trailingActions.length > 0;\n\n const contextValue = useMemo(\n () => ({\n size,\n alignment,\n headlineBlockSize: AppBarHeadlineBlockSize[size],\n headlineTypography: AppBarHeadlineTypography[size],\n }),\n [size, alignment]\n );\n\n return (\n <AppBarContext value={contextValue}>\n <header\n className={clsx(styles[\"app-bar\"], className)}\n {...props}\n data-size={size}\n data-alignment={alignment}\n data-has-secondary={(hasSecondary && !!headline) || undefined}\n data-scroll={appBarState?.isScrolling || undefined}\n >\n <div\n data-primary\n className={clsx(styles[\"primary\"])}\n data-alignment={alignment}\n data-size={size}\n >\n {leadingAction && (\n <div\n data-alignment={alignment}\n data-primary-leading\n className={clsx(styles[\"leading-action\"])}\n >\n {leadingAction}\n </div>\n )}\n\n {!hasSecondary && headline && (\n <div\n data-alignment={alignment}\n className={clsx(styles[\"headline\"])}\n data-initial-padding={!leadingAction || undefined}\n >\n {headline}\n </div>\n )}\n\n {hasTrailingActions && (\n <div\n data-alignment={alignment}\n data-primary-trailing\n className={clsx(styles[\"trailing-actions\"])}\n >\n {trailingActions}\n </div>\n )}\n </div>\n\n {hasSecondary && headline && (\n <div\n data-secondary\n data-alignment={alignment}\n className={clsx(styles[\"secondary\"])}\n >\n {headline}\n </div>\n )}\n </header>\n </AppBarContext>\n );\n};\n"],"mappings":";;;;;;;;;;;;GCWa,KAAiC,EAC1C,cACA,UAAO,SACP,eAAY,WACZ,kBACA,oBACA,aACA,GAAG,QACD;CACF,IAAM,IAAc,EAAW,CAAkB,GAC3C,IAAe,MAAS,SACxB,IAAqB,KAAmB,EAAgB,SAAS;CAYvE,OACI,kBAAC,GAAD;EAAe,OAXE,SACV;GACH;GACA;GACA,mBAAmB,EAAwB;GAC3C,oBAAoB,EAAyB;EACjD,IACA,CAAC,GAAM,CAAS,CAIM;YAClB,kBAAC,UAAD;GACI,WAAW,EAAK,EAAO,YAAY,CAAS;GAC5C,GAAI;GACJ,aAAW;GACX,kBAAgB;GAChB,sBAAqB,KAAgB,CAAC,CAAC,KAAa,KAAA;GACpD,eAAa,GAAa,eAAe,KAAA;aAN7C,CAQI,kBAAC,OAAD;IACI,gBAAA;IACA,WAAW,EAAK,EAAO,OAAU;IACjC,kBAAgB;IAChB,aAAW;cAJf;KAMK,KACG,kBAAC,OAAD;MACI,kBAAgB;MAChB,wBAAA;MACA,WAAW,EAAK,EAAO,iBAAiB;gBAEvC;KACA,CAAA;KAGR,CAAC,KAAgB,KACd,kBAAC,OAAD;MACI,kBAAgB;MAChB,WAAW,EAAK,EAAO,QAAW;MAClC,wBAAsB,CAAC,KAAiB,KAAA;gBAEvC;KACA,CAAA;KAGR,KACG,kBAAC,OAAD;MACI,kBAAgB;MAChB,yBAAA;MACA,WAAW,EAAK,EAAO,mBAAmB;gBAEzC;KACA,CAAA;IAER;OAEJ,KAAgB,KACb,kBAAC,OAAD;IACI,kBAAA;IACA,kBAAgB;IAChB,WAAW,EAAK,EAAO,SAAY;cAElC;GACA,CAAA,CAEL;;CACG,CAAA;AAEvB"}
|