@sankhyatronics/sankhya-cms 0.1.8 → 0.1.10
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/LICENSE +21 -21
- package/README.md +34 -34
- package/custom-elements.json +1145 -1086
- package/dist/bento-grid/index.js +3 -3
- package/dist/card/index.js +2 -2
- package/dist/carousel/index.js +3 -3
- package/dist/{chunk-3JU3R22O.js → chunk-5EBWMPJS.js} +2 -2
- package/dist/chunk-5EBWMPJS.js.map +1 -0
- package/dist/{chunk-2JGWWXEI.js → chunk-76AVBQUA.js} +3 -3
- package/dist/chunk-76AVBQUA.js.map +1 -0
- package/dist/{chunk-NN3OCPDV.js → chunk-7NLZND6Q.js} +3 -3
- package/dist/{chunk-EMVHNAID.js → chunk-ALI26WOB.js} +3 -3
- package/dist/chunk-ALI26WOB.js.map +1 -0
- package/dist/{chunk-TLHG33MM.js → chunk-BLQV2YMO.js} +3 -3
- package/dist/chunk-BLQV2YMO.js.map +1 -0
- package/dist/{chunk-UVNBZD7R.js → chunk-BMHMNXIA.js} +3 -3
- package/dist/chunk-BMHMNXIA.js.map +1 -0
- package/dist/{chunk-ZRXYWH6C.js → chunk-DH53HZPB.js} +4 -4
- package/dist/{chunk-HPIQSECE.js → chunk-EMCQBT3S.js} +3 -3
- package/dist/{chunk-BQTDFQ4V.js → chunk-FLY7TNRT.js} +3 -3
- package/dist/chunk-FLY7TNRT.js.map +1 -0
- package/dist/{chunk-3VE6VFJ4.js → chunk-FZ36KL73.js} +1 -1
- package/dist/chunk-FZ36KL73.js.map +1 -0
- package/dist/{chunk-HGTC3LCW.js → chunk-G3CF7MBO.js} +3 -3
- package/dist/{chunk-CDC4P77V.js → chunk-GJO3RGOB.js} +2 -2
- package/dist/chunk-GJO3RGOB.js.map +1 -0
- package/dist/{chunk-K4ZICRZL.js → chunk-JKBWZLG4.js} +3 -3
- package/dist/chunk-JKBWZLG4.js.map +1 -0
- package/dist/{chunk-4HKSA5UT.js → chunk-JQY2G4QK.js} +2 -2
- package/dist/chunk-JQY2G4QK.js.map +1 -0
- package/dist/{chunk-RHAOQ6K4.js → chunk-KMU6ABQF.js} +1 -1
- package/dist/chunk-KMU6ABQF.js.map +1 -0
- package/dist/{chunk-IQPW3CYZ.js → chunk-LEXZKGQX.js} +3 -3
- package/dist/chunk-LEXZKGQX.js.map +1 -0
- package/dist/{chunk-MW43OS47.js → chunk-MSSH3HFK.js} +2 -2
- package/dist/chunk-MSSH3HFK.js.map +1 -0
- package/dist/{chunk-DQHMJZ6X.js → chunk-R5G6KFTJ.js} +18 -8
- package/dist/chunk-R5G6KFTJ.js.map +1 -0
- package/dist/{chunk-VYON56QO.js → chunk-SMLR736E.js} +2 -2
- package/dist/chunk-SMLR736E.js.map +1 -0
- package/dist/{chunk-HGJT24UG.js → chunk-VWS53WY4.js} +3 -3
- package/dist/chunk-VWS53WY4.js.map +1 -0
- package/dist/{chunk-VRRBMOUP.js → chunk-WT4OATGP.js} +3 -3
- package/dist/chunk-WT4OATGP.js.map +1 -0
- package/dist/{chunk-PB7ZPPLP.js → chunk-WTD2YIAA.js} +1 -1
- package/dist/chunk-WTD2YIAA.js.map +1 -0
- package/dist/{chunk-X2ALYIVT.js → chunk-XWB4CKDU.js} +20 -4
- package/dist/chunk-XWB4CKDU.js.map +1 -0
- package/dist/{chunk-XXPBFHWR.js → chunk-YQ42EBK5.js} +2 -2
- package/dist/chunk-YQ42EBK5.js.map +1 -0
- package/dist/{chunk-6H262SG6.js → chunk-YVTFQHVY.js} +2 -2
- package/dist/chunk-YVTFQHVY.js.map +1 -0
- package/dist/{chunk-7PSYCTEN.js → chunk-ZN4LIKVG.js} +2 -2
- package/dist/chunk-ZN4LIKVG.js.map +1 -0
- package/dist/cms-theme.css +26 -26
- package/dist/content-block/index.js +4 -4
- package/dist/cookie-consent/index.js +2 -2
- package/dist/dropdown/index.js +3 -3
- package/dist/feature-split/index.js +4 -4
- package/dist/features-section/index.js +5 -5
- package/dist/fonts/inter-latin-400-normal.woff2 +0 -0
- package/dist/fonts/inter-latin-500-normal.woff2 +0 -0
- package/dist/fonts/inter-latin-600-normal.woff2 +0 -0
- package/dist/fonts/inter-latin-700-normal.woff2 +0 -0
- package/dist/fonts.css +39 -0
- package/dist/footer/index.js +2 -2
- package/dist/header/index.d.ts +7 -0
- package/dist/header/index.js +3 -3
- package/dist/hero/index.js +3 -3
- package/dist/icon-button/index.js +2 -2
- package/dist/index.js +35 -35
- package/dist/items-accordion/index.js +3 -3
- package/dist/markdown/index.js +2 -2
- package/dist/mega-menu/index.js +3 -3
- package/dist/menu-grid/index.js +2 -2
- package/dist/menu-grid-item/index.js +2 -2
- package/dist/menu-item/index.d.ts +5 -0
- package/dist/menu-item/index.js +3 -3
- package/dist/promo-banner/index.js +3 -3
- package/dist/schema/index.js.map +1 -1
- package/dist/section/index.js +3 -3
- package/dist/select/index.js +3 -3
- package/dist/shared/icons.js +1 -1
- package/dist/shared/styles.js +1 -1
- package/dist/stats/index.js +2 -2
- package/dist/testimonials/index.js +4 -4
- package/dist/theme.css +340 -291
- package/dist/themes.css +84 -64
- package/dist/theming/index.js.map +1 -1
- package/package.json +4 -2
- package/dist/chunk-2JGWWXEI.js.map +0 -1
- package/dist/chunk-3JU3R22O.js.map +0 -1
- package/dist/chunk-3VE6VFJ4.js.map +0 -1
- package/dist/chunk-4HKSA5UT.js.map +0 -1
- package/dist/chunk-6H262SG6.js.map +0 -1
- package/dist/chunk-7PSYCTEN.js.map +0 -1
- package/dist/chunk-BQTDFQ4V.js.map +0 -1
- package/dist/chunk-CDC4P77V.js.map +0 -1
- package/dist/chunk-DQHMJZ6X.js.map +0 -1
- package/dist/chunk-EMVHNAID.js.map +0 -1
- package/dist/chunk-HGJT24UG.js.map +0 -1
- package/dist/chunk-IQPW3CYZ.js.map +0 -1
- package/dist/chunk-K4ZICRZL.js.map +0 -1
- package/dist/chunk-MW43OS47.js.map +0 -1
- package/dist/chunk-PB7ZPPLP.js.map +0 -1
- package/dist/chunk-RHAOQ6K4.js.map +0 -1
- package/dist/chunk-TLHG33MM.js.map +0 -1
- package/dist/chunk-UVNBZD7R.js.map +0 -1
- package/dist/chunk-VRRBMOUP.js.map +0 -1
- package/dist/chunk-VYON56QO.js.map +0 -1
- package/dist/chunk-X2ALYIVT.js.map +0 -1
- package/dist/chunk-XXPBFHWR.js.map +0 -1
- /package/dist/{chunk-NN3OCPDV.js.map → chunk-7NLZND6Q.js.map} +0 -0
- /package/dist/{chunk-ZRXYWH6C.js.map → chunk-DH53HZPB.js.map} +0 -0
- /package/dist/{chunk-HPIQSECE.js.map → chunk-EMCQBT3S.js.map} +0 -0
- /package/dist/{chunk-HGTC3LCW.js.map → chunk-G3CF7MBO.js.map} +0 -0
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/hero/Hero.ts"],"sourcesContent":["import { LitElement, css, html, nothing } from 'lit';\r\nimport { customElement, property } from 'lit/decorators.js';\r\n\r\nimport { controlBaseStyles, rootFontFamilyStyles } from '../shared/styles';\r\nimport { ctaLinkStyles, paddingScaleStyles } from '../shared/section-styles';\r\nimport type { HeroActionEventDetail } from './HeroEvents';\r\n\r\n/**\r\n * Full-width hero banner: background image with a darkening overlay, optional eyebrow, title,\r\n * optional subtitle and up to two call-to-action links. Port of `SankhyaUI`'s React `Hero`; the\r\n * framer-motion entrance is redone as CSS keyframes (skipped under `prefers-reduced-motion`).\r\n *\r\n * `size`, `content-position` and `overlay=\"gradient\"` give the large editorial layout (copy on the\r\n * lower left over a gradient that darkens towards it) used by enterprise marketing heroes; the\r\n * defaults keep the original centered banner. Put several heroes in an `st-carousel` with\r\n * `indicator-style=\"tabs\"` for a tabbed hero carousel.\r\n *\r\n * @fires action - Cancelable, before navigating. Detail `{ href, kind }`, `kind` being `primary` or `secondary`.\r\n * @cssprop --st-hero-text-color - Text colour over the image.\r\n * @cssprop --st-hero-min-height - Minimum height when `size` is `large` (default `640px`).\r\n * @csspart eyebrow - The small label above the title.\r\n * @csspart secondary-action - The outlined second button.\r\n */\r\n@customElement('st-hero')\r\nexport class Hero extends LitElement {\r\n static styles = css`\r\n ${controlBaseStyles}\r\n ${paddingScaleStyles}\r\n\r\n @keyframes st-hero-zoom {\r\n from { opacity: 0; transform: scale(1.1); }\r\n to { opacity: 1; transform: scale(1); }\r\n }\r\n @keyframes st-hero-rise {\r\n from { opacity: 0; transform: translateY(30px); }\r\n to { opacity: 1; transform: none; }\r\n }\r\n @keyframes st-hero-fade {\r\n from { opacity: 0; }\r\n to { opacity: 1; }\r\n }\r\n\r\n :host {\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n position: relative;\r\n overflow: hidden;\r\n width: 100%;\r\n box-sizing: border-box;\r\n background-color: var(--st-color-text-strong);\r\n background-repeat: no-repeat;\r\n background-size: cover;\r\n background-position: var(--st-hero-position, center center);\r\n color: var(--st-color-on-solid);\r\n ${rootFontFamilyStyles}\r\n animation: st-hero-zoom 1.5s ease-out;\r\n }\r\n\r\n :host([inverted]) {\r\n background-color: var(--st-color-surface);\r\n color: var(--st-color-text-strong);\r\n }\r\n\r\n .overlay {\r\n position: absolute;\r\n inset: 0;\r\n z-index: 1;\r\n background: linear-gradient(\r\n to bottom,\r\n color-mix(in oklch, var(--st-color-text-strong) 40%, transparent),\r\n color-mix(in oklch, var(--st-color-text-strong) 20%, transparent),\r\n color-mix(in oklch, var(--st-color-text-strong) 40%, transparent)\r\n );\r\n }\r\n\r\n :host([inverted]) .overlay {\r\n display: none;\r\n }\r\n\r\n .content {\r\n display: flex;\r\n flex-direction: column;\r\n gap: var(--st-space-20);\r\n position: relative;\r\n z-index: 2;\r\n width: 80%;\r\n margin: 0 auto;\r\n text-align: center;\r\n align-items: center;\r\n /* Set here, not only on :host: text sits on the image/overlay, so a colour class the page puts\r\n on the host (e.g. a theme text colour) must not turn it dark. */\r\n color: var(--st-hero-text-color, var(--st-color-on-solid));\r\n }\r\n\r\n :host([inverted]) .content {\r\n color: var(--st-hero-text-color, var(--st-color-text-strong));\r\n }\r\n\r\n :host([text-alignment='left']) .content { text-align: left; align-items: flex-start; }\r\n :host([text-alignment='right']) .content { text-align: right; align-items: flex-end; }\r\n :host([text-alignment='justify']) .content { text-align: justify; align-items: stretch; }\r\n\r\n .title {\r\n font-size: var(--st-cms-text-display);\r\n font-weight: var(--st-font-weight-bold);\r\n line-height: 1.1;\r\n color: inherit;\r\n margin: 0;\r\n animation: st-hero-rise 0.8s 0.3s ease-out backwards;\r\n }\r\n\r\n .subtitle {\r\n font-size: var(--st-cms-text-xl);\r\n line-height: 1.5;\r\n color: inherit;\r\n margin: 0;\r\n animation: st-hero-fade 0.8s 0.5s ease-out backwards;\r\n }\r\n\r\n .actions {\r\n display: flex;\r\n justify-content: center;\r\n width: 100%;\r\n }\r\n\r\n .cta {\r\n ${ctaLinkStyles}\r\n background: var(--st-button-primary-bg);\r\n color: var(--st-button-primary-color);\r\n font-weight: var(--st-button-font-weight);\r\n font-size: var(--st-text-md);\r\n animation: st-hero-rise 0.6s 0.7s ease-out backwards;\r\n }\r\n\r\n .cta:hover {\r\n transform: scale(1.05);\r\n }\r\n\r\n .cta:active {\r\n transform: scale(0.98);\r\n }\r\n\r\n .eyebrow {\r\n margin: 0;\r\n font-size: var(--st-text-sm);\r\n font-weight: var(--st-font-weight-bold);\r\n letter-spacing: 0.12em;\r\n text-transform: uppercase;\r\n color: inherit;\r\n opacity: 0.85;\r\n animation: st-hero-fade 0.8s 0.2s ease-out backwards;\r\n }\r\n\r\n .actions {\r\n flex-wrap: wrap;\r\n gap: var(--st-space-12);\r\n }\r\n\r\n .cta.secondary {\r\n background: transparent;\r\n color: inherit;\r\n box-shadow: inset 0 0 0 1.5px currentColor;\r\n }\r\n\r\n .cta.secondary:hover {\r\n background: color-mix(in oklch, currentColor 12%, transparent);\r\n }\r\n\r\n /* size=\"large\" / \"full\": a tall editorial hero. */\r\n :host([size='large']) {\r\n min-height: var(--st-hero-min-height, 640px);\r\n }\r\n\r\n :host([size='full']) {\r\n min-height: 100svh;\r\n }\r\n\r\n :host([size='large']) .title,\r\n :host([size='full']) .title {\r\n font-size: clamp(2.5rem, 6vw, 5rem);\r\n letter-spacing: -0.02em;\r\n line-height: 1.05;\r\n }\r\n\r\n /* content-position=\"bottom\": copy sits in the lower part of the hero, on the container grid. */\r\n :host([content-position='bottom']) {\r\n align-items: flex-end;\r\n }\r\n\r\n :host([content-position='bottom']) .content {\r\n width: 100%;\r\n max-width: var(--st-cms-container-max);\r\n box-sizing: border-box;\r\n padding: var(--st-space-48) var(--st-space-24);\r\n }\r\n\r\n :host([content-position='bottom']) .title,\r\n :host([content-position='bottom']) .subtitle {\r\n max-width: 18ch;\r\n }\r\n\r\n :host([content-position='bottom']) .subtitle {\r\n max-width: 48ch;\r\n }\r\n\r\n :host([content-position='bottom']:not([text-alignment='center']):not([text-alignment='right'])) .actions {\r\n justify-content: flex-start;\r\n }\r\n\r\n :host([content-position='bottom'][text-alignment='center']) .title,\r\n :host([content-position='bottom'][text-alignment='center']) .subtitle {\r\n margin-inline: auto;\r\n }\r\n\r\n /* overlay=\"gradient\": darkest behind the copy, clearing towards the far side of the image. */\r\n :host([overlay='gradient']) .overlay {\r\n background:\r\n linear-gradient(to top, color-mix(in oklch, var(--st-color-text-strong) 85%, transparent), transparent 70%),\r\n linear-gradient(to right, color-mix(in oklch, var(--st-color-text-strong) 70%, transparent), transparent 75%);\r\n }\r\n\r\n :host([overlay='gradient'][text-alignment='right']) .overlay {\r\n background:\r\n linear-gradient(to top, color-mix(in oklch, var(--st-color-text-strong) 85%, transparent), transparent 70%),\r\n linear-gradient(to left, color-mix(in oklch, var(--st-color-text-strong) 70%, transparent), transparent 75%);\r\n }\r\n\r\n :host([overlay='none']) .overlay {\r\n display: none;\r\n }\r\n\r\n @media (min-width: 768px) {\r\n .content { padding: var(--st-space-32); }\r\n }\r\n @media (min-width: 1024px) {\r\n .content { padding: var(--st-space-48); }\r\n :host([content-position='bottom']) .content { padding: var(--st-space-48) var(--st-space-32) 6rem; }\r\n }\r\n\r\n @media (prefers-reduced-motion: reduce) {\r\n :host, .eyebrow, .title, .subtitle, .cta { animation: none; }\r\n .cta { transition: none; }\r\n }\r\n `;\r\n\r\n @property({ type: String })\r\n title = '';\r\n\r\n @property({ type: String })\r\n subtitle = '';\r\n\r\n @property({ type: String, attribute: 'image-src' })\r\n imageSrc = '';\r\n\r\n @property({ type: String, attribute: 'action-label' })\r\n actionLabel = '';\r\n\r\n @property({ type: String })\r\n href = '';\r\n\r\n @property({ type: String, reflect: true, attribute: 'text-alignment' })\r\n textAlignment: 'left' | 'center' | 'right' | 'justify' = 'left';\r\n\r\n @property({ type: String, reflect: true })\r\n padding: 'none' | 'small' | 'medium' | 'large' = 'none';\r\n\r\n @property({ type: Boolean, reflect: true })\r\n inverted = false;\r\n\r\n @property({ type: String, attribute: 'focal-point' })\r\n focalPoint: 'top' | 'left' | 'right' | 'bottom' | 'center' = 'center';\r\n\r\n /** Small uppercase label above the title (e.g. an event or product name). */\r\n @property({ type: String })\r\n eyebrow = '';\r\n\r\n /** Label of an outlined second button next to the primary one. */\r\n @property({ type: String, attribute: 'secondary-action-label' })\r\n secondaryActionLabel = '';\r\n\r\n @property({ type: String, attribute: 'secondary-href' })\r\n secondaryHref = '';\r\n\r\n /** `auto` sizes to the content; `large` is a tall editorial hero (`--st-hero-min-height`); `full` fills the viewport. */\r\n @property({ type: String, reflect: true })\r\n size: 'auto' | 'large' | 'full' = 'auto';\r\n\r\n /** `center` keeps the copy in the middle; `bottom` puts it in the lower part of the hero, on the page container. */\r\n @property({ type: String, reflect: true, attribute: 'content-position' })\r\n contentPosition: 'center' | 'bottom' = 'center';\r\n\r\n /** `even` darkens the whole image; `gradient` darkens behind the copy only; `none` shows the image as is. */\r\n @property({ type: String, reflect: true })\r\n overlay: 'even' | 'gradient' | 'none' = 'even';\r\n\r\n private static positions = {\r\n top: 'center top',\r\n left: 'left center',\r\n right: 'right center',\r\n bottom: 'center bottom',\r\n center: 'center center'\r\n } as const;\r\n\r\n protected willUpdate(): void {\r\n this.style.backgroundImage = this.imageSrc ? `url(${JSON.stringify(this.imageSrc)})` : '';\r\n this.style.setProperty('--st-hero-position', Hero.positions[this.focalPoint] ?? Hero.positions.center);\r\n }\r\n\r\n private emitAction(event: MouseEvent, href: string, kind: 'primary' | 'secondary'): void {\r\n const action = new CustomEvent<HeroActionEventDetail>('action', {\r\n detail: { href, kind },\r\n bubbles: true,\r\n composed: true,\r\n cancelable: true\r\n });\r\n this.dispatchEvent(action);\r\n if (action.defaultPrevented) event.preventDefault();\r\n }\r\n\r\n private onClick = (event: MouseEvent): void => this.emitAction(event, this.href, 'primary');\r\n\r\n private onSecondaryClick = (event: MouseEvent): void => this.emitAction(event, this.secondaryHref, 'secondary');\r\n\r\n render() {\r\n return html`\r\n <div class=\"overlay\" part=\"overlay\"></div>\r\n <div class=\"content\" part=\"content\">\r\n ${this.eyebrow ? html`<p class=\"eyebrow\" part=\"eyebrow\">${this.eyebrow}</p>` : nothing}\r\n <h1 class=\"title\" part=\"title\">${this.title}</h1>\r\n ${this.subtitle ? html`<p class=\"subtitle\" part=\"subtitle\">${this.subtitle}</p>` : nothing}\r\n ${this.actionLabel || this.secondaryActionLabel\r\n ? html`<div class=\"actions\" part=\"actions\">\r\n ${this.actionLabel\r\n ? html`<a class=\"cta\" part=\"action\" href=${this.href || nothing} @click=${this.onClick}>${this.actionLabel}</a>`\r\n : nothing}\r\n ${this.secondaryActionLabel\r\n ? html`<a class=\"cta secondary\" part=\"secondary-action\" href=${this.secondaryHref || nothing} @click=${this.onSecondaryClick}\r\n >${this.secondaryActionLabel}</a\r\n >`\r\n : nothing}\r\n </div>`\r\n : nothing}\r\n <slot></slot>\r\n </div>\r\n `;\r\n }\r\n}\r\n"],"mappings":"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","names":[]}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/cookie-consent/CookieConsent.ts"],"sourcesContent":["import { LitElement, css, html, nothing } from 'lit';\r\nimport { customElement, property, state } from 'lit/decorators.js';\r\n\r\nimport { buttonResetStyles, controlBaseStyles, rootFontFamilyStyles } from '../shared/styles';\r\nimport type { CookieConsentEventDetail, CookieConsentStatus } from './CookieConsentEvents';\r\n\r\nconst DEFAULT_STORAGE_KEY = 'sankhya_ui_cookie_consent';\r\n\r\n/**\r\n * Fixed bottom consent bar. The source read/wrote consent through a React `UserContext`; here the\r\n * element persists the choice itself in localStorage (`storage-key`, default the source's\r\n * `sankhya_ui_cookie_consent`; storage errors are ignored) and renders nothing once a choice\r\n * exists. Fires `cookie-consent-accept` / `cookie-consent-refuse` (detail `{ status }`). The\r\n * default slot replaces the message text.\r\n *\r\n * @cssprop --st-cookie-consent-padding - Overrides the bar's padding.\r\n */\r\n@customElement('st-cookie-consent')\r\nexport class CookieConsent extends LitElement {\r\n static styles = css`\r\n ${controlBaseStyles}\r\n\r\n @keyframes st-cookie-slide-up {\r\n from {\r\n transform: translateY(100%);\r\n }\r\n to {\r\n transform: translateY(0);\r\n }\r\n }\r\n\r\n :host {\r\n position: fixed;\r\n bottom: 0;\r\n left: 0;\r\n width: 100%;\r\n box-sizing: border-box;\r\n z-index: 9999;\r\n display: flex;\r\n flex-direction: column;\r\n gap: var(--st-space-16);\r\n /* !important: a page-level reset (e.g. Tailwind Preflight) otherwise zeroes a shadow host's\r\n padding; override with --st-cookie-consent-padding instead. */\r\n padding: var(--st-cookie-consent-padding, var(--st-space-24)) !important;\r\n background: var(--st-color-surface);\r\n color: var(--st-color-text);\r\n border-top: 1px solid var(--st-color-border);\r\n box-shadow: 0 -4px 10px var(--st-shadow-color-sm);\r\n animation: st-cookie-slide-up 0.3s ease-out;\r\n ${rootFontFamilyStyles}\r\n }\r\n\r\n .content {\r\n flex: 1;\r\n }\r\n\r\n .message {\r\n margin: 0;\r\n font-size: var(--st-text-md);\r\n line-height: 1.5;\r\n }\r\n\r\n .link {\r\n color: var(--st-color-accent-text);\r\n text-decoration: underline;\r\n margin-left: var(--st-space-4);\r\n }\r\n\r\n .link:hover {\r\n text-decoration: none;\r\n }\r\n\r\n .actions {\r\n display: flex;\r\n gap: var(--st-space-12);\r\n flex-shrink: 0;\r\n }\r\n\r\n .btn {\r\n ${buttonResetStyles}\r\n padding: var(--st-space-8) var(--st-space-16);\r\n border: 1px solid transparent;\r\n border-radius: var(--st-radius-xs);\r\n font-weight: var(--st-font-weight-medium);\r\n font-size: var(--st-text-md);\r\n transition:\r\n background-color 0.2s ease,\r\n color 0.2s ease;\r\n }\r\n\r\n .accept {\r\n background: var(--st-button-primary-bg);\r\n color: var(--st-button-primary-color);\r\n }\r\n\r\n .accept:hover {\r\n opacity: 0.9;\r\n }\r\n\r\n .refuse {\r\n border-color: var(--st-color-border);\r\n color: var(--st-color-text-muted);\r\n }\r\n\r\n .refuse:hover {\r\n background: var(--st-color-hover);\r\n color: var(--st-color-text-strong);\r\n }\r\n\r\n @media (min-width: 768px) {\r\n :host {\r\n flex-direction: row;\r\n align-items: center;\r\n justify-content: space-between;\r\n padding: var(--st-cookie-consent-padding, var(--st-space-16) var(--st-space-32)) !important;\r\n }\r\n }\r\n\r\n @media (prefers-reduced-motion: reduce) {\r\n :host {\r\n animation: none;\r\n }\r\n .btn {\r\n transition: none;\r\n }\r\n }\r\n `;\r\n\r\n @property({ type: String })\r\n message = '';\r\n\r\n @property({ type: String, attribute: 'accept-button-text' })\r\n acceptButtonText = 'Accept';\r\n\r\n @property({ type: String, attribute: 'refuse-button-text' })\r\n refuseButtonText = 'Refuse';\r\n\r\n @property({ type: String, attribute: 'privacy-policy-link' })\r\n privacyPolicyLink = '';\r\n\r\n @property({ type: String, attribute: 'privacy-policy-text' })\r\n privacyPolicyText = 'Privacy Policy';\r\n\r\n @property({ type: String, attribute: 'storage-key' })\r\n storageKey = DEFAULT_STORAGE_KEY;\r\n\r\n /** The stored choice, or `null` while undecided (the bar is only shown then). */\r\n @state() private consent: CookieConsentStatus | null = null;\r\n\r\n connectedCallback(): void {\r\n super.connectedCallback();\r\n this.consent = this.readStored();\r\n }\r\n\r\n private readStored(): CookieConsentStatus | null {\r\n try {\r\n const saved = localStorage.getItem(this.storageKey);\r\n return saved === 'accepted' || saved === 'refused' ? saved : null;\r\n } catch {\r\n return null;\r\n }\r\n }\r\n\r\n private choose(status: CookieConsentStatus): void {\r\n this.consent = status;\r\n try {\r\n localStorage.setItem(this.storageKey, status);\r\n } catch {\r\n // Storage unavailable (private mode, blocked): the choice just doesn't persist.\r\n }\r\n this.dispatchEvent(\r\n new CustomEvent<CookieConsentEventDetail>(status === 'accepted' ? 'cookie-consent-accept' : 'cookie-consent-refuse', {\r\n detail: { status },\r\n bubbles: true,\r\n composed: true\r\n })\r\n );\r\n }\r\n\r\n render() {\r\n if (this.consent !== null) return nothing;\r\n return html`\r\n <div class=\"content\" part=\"content\">\r\n <p class=\"message\" part=\"message\">\r\n <slot>\r\n ${this.message || 'We use cookies to enhance your experience. By continuing to visit this site you agree to our use of cookies.'}\r\n ${this.privacyPolicyLink\r\n ? html`<a class=\"link\" part=\"link\" href=${this.privacyPolicyLink} target=\"_blank\" rel=\"noopener noreferrer\">${this.privacyPolicyText}</a>`\r\n : nothing}\r\n </slot>\r\n </p>\r\n </div>\r\n <div class=\"actions\" part=\"actions\">\r\n <button class=\"btn refuse\" part=\"refuse\" type=\"button\" @click=${() => this.choose('refused')}>${this.refuseButtonText}</button>\r\n <button class=\"btn accept\" part=\"accept\" type=\"button\" @click=${() => this.choose('accepted')}>${this.acceptButtonText}</button>\r\n </div>\r\n `;\r\n }\r\n}\r\n"],"mappings":"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","names":[]}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/shared/icons.ts"],"sourcesContent":["import { html } from 'lit';\r\nimport type { TemplateResult } from 'lit';\r\n\r\n/**\r\n * Every inline SVG icon used across components, centralized so a glyph's\r\n * path data lives in exactly one place instead of being copy-pasted at each\r\n * call site. Each icon is a small function returning a Lit `TemplateResult`\r\n * (not a `css`-style fragment) so callers can size — and, where noted, class\r\n * — the icon per context while sharing the same markup.\r\n */\r\n\r\nconst FOLDER_ICON_COLOR = 'oklch(0.72 0.09 75)';\r\n\r\n/** Filled folder glyph (browse rows/tiles). Fixed 20x16 — folders don't resize per usage. */\r\nexport function folderIcon(): TemplateResult {\r\n return html`\r\n <svg width=\"20\" height=\"16\" viewBox=\"0 0 20 16\" fill=\"none\" aria-hidden=\"true\">\r\n <path d=\"M0 2a2 2 0 012-2h5l2 2h9a2 2 0 012 2v10a2 2 0 01-2 2H2a2 2 0 01-2-2V2z\" fill=${FOLDER_ICON_COLOR} />\r\n </svg>\r\n `;\r\n}\r\n\r\n/** Outlined folder glyph (breadcrumb crumb icon). `className` lets the caller hook its own layout class. */\r\nexport function folderOutlineIcon(size = 11, className = ''): TemplateResult {\r\n return html`\r\n <svg class=${className} width=${size} height=${size} viewBox=\"0 0 24 24\" fill=\"none\" aria-hidden=\"true\">\r\n <path\r\n d=\"M4 4h5l2 2h9v12H4V4z\"\r\n stroke=\"currentColor\"\r\n stroke-width=\"2\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n />\r\n </svg>\r\n `;\r\n}\r\n\r\n/** External-link/\"open\" glyph (open site/library actions in the Templates/Data/Save-location pickers). */\r\nexport function externalLinkIcon(size = 15): TemplateResult {\r\n return html`\r\n <svg width=${size} height=${size} viewBox=\"0 0 24 24\" fill=\"none\" aria-hidden=\"true\">\r\n <path\r\n d=\"M18 13v5a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h5M15 4h5v5M20 4l-9 9\"\r\n stroke=\"currentColor\"\r\n stroke-width=\"1.8\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n />\r\n </svg>\r\n `;\r\n}\r\n\r\n/** Refresh/reload glyph (Templates/Data picker refresh buttons). */\r\nexport function refreshIcon(size = 15): TemplateResult {\r\n return html`\r\n <svg width=${size} height=${size} viewBox=\"0 0 24 24\" fill=\"none\" aria-hidden=\"true\">\r\n <path\r\n d=\"M17.65 6.35A7.958 7.958 0 0 0 12 4a8 8 0 1 0 8 8h-2a6 6 0 1 1-6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z\"\r\n fill=\"currentColor\"\r\n />\r\n </svg>\r\n `;\r\n}\r\n\r\n/** Clock glyph (the wizard's \"Recent activity\" history trigger button, Steps 1-3). */\r\nexport function historyIcon(size = 15): TemplateResult {\r\n return html`\r\n <svg width=${size} height=${size} viewBox=\"0 0 24 24\" fill=\"none\" aria-hidden=\"true\">\r\n <circle cx=\"12\" cy=\"12\" r=\"9\" stroke=\"currentColor\" stroke-width=\"2\" />\r\n <path d=\"M12 7v5l3.5 2\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n `;\r\n}\r\n\r\n/** Trash/delete glyph (clear-all button in the selected-chips summary badge). */\r\nexport function trashIcon(size = 15): TemplateResult {\r\n return html`\r\n <svg width=${size} height=${size} viewBox=\"0 0 24 24\" fill=\"none\" aria-hidden=\"true\">\r\n <path\r\n d=\"M4 4h2l1.2 12.4A2 2 0 0 0 9.2 18.2h8.1a2 2 0 0 0 1.98-1.7L20.5 8H6.5\"\r\n stroke=\"currentColor\"\r\n stroke-width=\"2\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n />\r\n <circle cx=\"10\" cy=\"21\" r=\"1.4\" fill=\"currentColor\" />\r\n <circle cx=\"17\" cy=\"21\" r=\"1.4\" fill=\"currentColor\" />\r\n </svg>\r\n `;\r\n}\r\n\r\n/** Chevron glyph (pager prev/next buttons, the select trigger's caret). */\r\nexport function chevronIcon(direction: 'left' | 'right' | 'down', size = 14): TemplateResult {\r\n const d = { left: 'M15 18l-6-6 6-6', right: 'M9 6l6 6-6 6', down: 'M6 9l6 6 6-6' }[direction];\r\n\r\n return html`\r\n <svg width=${size} height=${size} viewBox=\"0 0 24 24\" fill=\"none\" aria-hidden=\"true\">\r\n <path d=${d} stroke=\"currentColor\" stroke-width=\"2.4\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n `;\r\n}\r\n\r\n/** Up-right arrow glyph (marks a link that leaves the site — mega-menu links and buttons). */\r\nexport function arrowUpRightIcon(size = 12): TemplateResult {\r\n return html`\r\n <svg width=${size} height=${size} viewBox=\"0 0 24 24\" fill=\"none\" aria-hidden=\"true\">\r\n <path d=\"M7 17L17 7M8 7h9v9\" stroke=\"currentColor\" stroke-width=\"2.4\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n `;\r\n}\r\n\r\n/** Plus glyph (\"New folder\" action button). */\r\nexport function plusIcon(size = 13): TemplateResult {\r\n return html`\r\n <svg width=${size} height=${size} viewBox=\"0 0 24 24\" fill=\"none\" aria-hidden=\"true\">\r\n <path d=\"M12 4v16M4 12h16\" stroke=\"currentColor\" stroke-width=\"2.4\" stroke-linecap=\"round\" />\r\n </svg>\r\n `;\r\n}\r\n\r\n/** Cards-view glyph (2x2 grid — view-toggle button). */\r\nexport function cardsViewIcon(size = 15): TemplateResult {\r\n return html`\r\n <svg width=${size} height=${size} viewBox=\"0 0 16 16\" fill=\"none\" aria-hidden=\"true\">\r\n <rect x=\"1\" y=\"1\" width=\"6\" height=\"6\" rx=\"1\" fill=\"currentColor\" />\r\n <rect x=\"9\" y=\"1\" width=\"6\" height=\"6\" rx=\"1\" fill=\"currentColor\" />\r\n <rect x=\"1\" y=\"9\" width=\"6\" height=\"6\" rx=\"1\" fill=\"currentColor\" />\r\n <rect x=\"9\" y=\"9\" width=\"6\" height=\"6\" rx=\"1\" fill=\"currentColor\" />\r\n </svg>\r\n `;\r\n}\r\n\r\n/** Checkmark glyph (completed-step marker in the step indicator). */\r\nexport function checkIcon(size = 14): TemplateResult {\r\n return html`\r\n <svg width=${size} height=${size} viewBox=\"0 0 24 24\" fill=\"none\" aria-hidden=\"true\">\r\n <path d=\"M4 12l5 5L20 6\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n `;\r\n}\r\n\r\n/** SharePoint site glyph (globe — root \"All sites\" browser rows). */\r\nexport function siteIcon(size = 18): TemplateResult {\r\n return html`\r\n <svg width=${size} height=${size} viewBox=\"0 0 24 24\" fill=\"none\" aria-hidden=\"true\">\r\n <circle cx=\"12\" cy=\"12\" r=\"9\" stroke=\"currentColor\" stroke-width=\"1.6\" />\r\n <path d=\"M3 12h18M12 3a14 14 0 0 1 0 18M12 3a14 14 0 0 0 0 18\" stroke=\"currentColor\" stroke-width=\"1.6\" />\r\n </svg>\r\n `;\r\n}\r\n\r\n/** 3x3 dot-grid glyph (bento-menu app-switcher trigger). */\r\nexport function bentoGridIcon(size = 18): TemplateResult {\r\n return html`\r\n <svg width=${size} height=${size} viewBox=\"0 0 24 24\" fill=\"currentColor\" aria-hidden=\"true\">\r\n <path\r\n d=\"M16 20h4v-4h-4m0-2h4v-4h-4m-6-2h4V4h-4m6 4h4V4h-4m-6 10h4v-4h-4m-6 4h4v-4H4m0 10h4v-4H4m6 4h4v-4h-4M4 8h4V4H4z\"\r\n />\r\n </svg>\r\n `;\r\n}\r\n\r\n/** List-view glyph (stacked rows — view-toggle button). */\r\nexport function listViewIcon(size = 15): TemplateResult {\r\n return html`\r\n <svg width=${size} height=${size} viewBox=\"0 0 16 16\" fill=\"none\" aria-hidden=\"true\">\r\n <rect x=\"1\" y=\"2\" width=\"3\" height=\"3\" rx=\"0.5\" fill=\"currentColor\" />\r\n <rect x=\"6\" y=\"2.5\" width=\"9\" height=\"2\" rx=\"1\" fill=\"currentColor\" />\r\n <rect x=\"1\" y=\"6.5\" width=\"3\" height=\"3\" rx=\"0.5\" fill=\"currentColor\" />\r\n <rect x=\"6\" y=\"7\" width=\"9\" height=\"2\" rx=\"1\" fill=\"currentColor\" />\r\n <rect x=\"1\" y=\"11\" width=\"3\" height=\"3\" rx=\"0.5\" fill=\"currentColor\" />\r\n <rect x=\"6\" y=\"11.5\" width=\"9\" height=\"2\" rx=\"1\" fill=\"currentColor\" />\r\n </svg>\r\n `;\r\n}\r\n\r\n/**\r\n * A small set of generic domain icons for `st-menu-grid-item`'s icon slot (nav \"mega menu\"\r\n * entries — sales/purchase/accounting/settings items) — deliberately simple line glyphs rather\r\n * than pixel-perfect illustrations, same fidelity level as the icons above.\r\n */\r\n\r\n/** Shopping-cart glyph (sales/orders). */\r\nexport function cartIcon(size = 18): TemplateResult {\r\n return html`\r\n <svg width=${size} height=${size} viewBox=\"0 0 24 24\" fill=\"none\" aria-hidden=\"true\">\r\n <path\r\n d=\"M3 4h2l2.4 12.4A2 2 0 0 0 9.36 18h8.2a2 2 0 0 0 1.96-1.6L21 8H6\"\r\n stroke=\"currentColor\"\r\n stroke-width=\"2\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n />\r\n <circle cx=\"10\" cy=\"21\" r=\"1.4\" fill=\"currentColor\" />\r\n <circle cx=\"17\" cy=\"21\" r=\"1.4\" fill=\"currentColor\" />\r\n </svg>\r\n `;\r\n}\r\n\r\n/** Delivery-truck glyph (purchase orders / receiving). */\r\nexport function truckIcon(size = 18): TemplateResult {\r\n return html`\r\n <svg width=${size} height=${size} viewBox=\"0 0 24 24\" fill=\"none\" aria-hidden=\"true\">\r\n <path d=\"M2 6h11v10H2z\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linejoin=\"round\" />\r\n <path d=\"M13 10h4l4 3.5V16h-8z\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linejoin=\"round\" />\r\n <circle cx=\"6.5\" cy=\"18\" r=\"1.8\" stroke=\"currentColor\" stroke-width=\"2\" />\r\n <circle cx=\"16.5\" cy=\"18\" r=\"1.8\" stroke=\"currentColor\" stroke-width=\"2\" />\r\n </svg>\r\n `;\r\n}\r\n\r\n/** Package/box glyph (products, inventory). */\r\nexport function boxIcon(size = 18): TemplateResult {\r\n return html`\r\n <svg width=${size} height=${size} viewBox=\"0 0 24 24\" fill=\"none\" aria-hidden=\"true\">\r\n <path\r\n d=\"M12 3l8 4.2v9.6L12 21l-8-4.2V7.2L12 3z\"\r\n stroke=\"currentColor\"\r\n stroke-width=\"2\"\r\n stroke-linejoin=\"round\"\r\n />\r\n <path d=\"M4.2 7.2L12 11l7.8-3.8M12 11v10\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linejoin=\"round\" />\r\n </svg>\r\n `;\r\n}\r\n\r\n/** Map-pin glyph (stock locations). */\r\nexport function mapPinIcon(size = 18): TemplateResult {\r\n return html`\r\n <svg width=${size} height=${size} viewBox=\"0 0 24 24\" fill=\"none\" aria-hidden=\"true\">\r\n <path\r\n d=\"M12 21s7-6.1 7-11.5A7 7 0 0 0 5 9.5C5 14.9 12 21 12 21z\"\r\n stroke=\"currentColor\"\r\n stroke-width=\"2\"\r\n stroke-linejoin=\"round\"\r\n />\r\n <circle cx=\"12\" cy=\"9.5\" r=\"2.4\" stroke=\"currentColor\" stroke-width=\"2\" />\r\n </svg>\r\n `;\r\n}\r\n\r\n/** Two-person glyph (partners — customers/vendors/employees). */\r\nexport function usersIcon(size = 18): TemplateResult {\r\n return html`\r\n <svg width=${size} height=${size} viewBox=\"0 0 24 24\" fill=\"none\" aria-hidden=\"true\">\r\n <circle cx=\"9\" cy=\"8\" r=\"3.2\" stroke=\"currentColor\" stroke-width=\"2\" />\r\n <path d=\"M3 20c0-3.3 2.7-6 6-6s6 2.7 6 6\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" />\r\n <path\r\n d=\"M16 5.3a3.2 3.2 0 0 1 0 6.2M19 20c0-2.8-2-5.1-4.6-5.8\"\r\n stroke=\"currentColor\"\r\n stroke-width=\"2\"\r\n stroke-linecap=\"round\"\r\n />\r\n </svg>\r\n `;\r\n}\r\n\r\n/** Open-book glyph (journals). */\r\nexport function bookIcon(size = 18): TemplateResult {\r\n return html`\r\n <svg width=${size} height=${size} viewBox=\"0 0 24 24\" fill=\"none\" aria-hidden=\"true\">\r\n <path\r\n d=\"M12 5.5c-1.6-1-4-1.5-6-1.5-1 0-2 .1-3 .4v13.6c1-.3 2-.4 3-.4 2 0 4.4.5 6 1.5m0-13.6c1.6-1 4-1.5 6-1.5 1 0 2 .1 3 .4v13.6c-1-.3-2-.4-3-.4-2 0-4.4.5-6 1.5m0-13.6v13.6\"\r\n stroke=\"currentColor\"\r\n stroke-width=\"1.8\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n />\r\n </svg>\r\n `;\r\n}\r\n\r\n/** Document/invoice glyph. */\r\nexport function documentIcon(size = 18): TemplateResult {\r\n return html`\r\n <svg width=${size} height=${size} viewBox=\"0 0 24 24\" fill=\"none\" aria-hidden=\"true\">\r\n <path d=\"M6 2h9l5 5v15H6V2z\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linejoin=\"round\" />\r\n <path d=\"M15 2v5h5\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linejoin=\"round\" />\r\n <path d=\"M9 12h6M9 16h6\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" />\r\n </svg>\r\n `;\r\n}\r\n\r\n/** Receipt glyph, zig-zag bottom edge (credit/debit notes). */\r\nexport function receiptIcon(size = 18): TemplateResult {\r\n return html`\r\n <svg width=${size} height=${size} viewBox=\"0 0 24 24\" fill=\"none\" aria-hidden=\"true\">\r\n <path\r\n d=\"M5 2h14v19l-2.5-1.6L14 21l-2.5-1.6L9 21l-2.5-1.6L5 21V2z\"\r\n stroke=\"currentColor\"\r\n stroke-width=\"2\"\r\n stroke-linejoin=\"round\"\r\n />\r\n <path d=\"M8 8h8M8 12h8\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" />\r\n </svg>\r\n `;\r\n}\r\n\r\n/** Percent glyph (taxes). */\r\nexport function percentIcon(size = 18): TemplateResult {\r\n return html`\r\n <svg width=${size} height=${size} viewBox=\"0 0 24 24\" fill=\"none\" aria-hidden=\"true\">\r\n <path d=\"M19 5L5 19\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" />\r\n <circle cx=\"7\" cy=\"7\" r=\"2.5\" stroke=\"currentColor\" stroke-width=\"2\" />\r\n <circle cx=\"17\" cy=\"17\" r=\"2.5\" stroke=\"currentColor\" stroke-width=\"2\" />\r\n </svg>\r\n `;\r\n}\r\n\r\n/** Stacked-coins glyph (payment terms). */\r\nexport function coinsIcon(size = 18): TemplateResult {\r\n return html`\r\n <svg width=${size} height=${size} viewBox=\"0 0 24 24\" fill=\"none\" aria-hidden=\"true\">\r\n <ellipse cx=\"8\" cy=\"7\" rx=\"5.5\" ry=\"3\" stroke=\"currentColor\" stroke-width=\"2\" />\r\n <path d=\"M2.5 7v10c0 1.7 2.5 3 5.5 3s5.5-1.3 5.5-3V7\" stroke=\"currentColor\" stroke-width=\"2\" />\r\n <path d=\"M2.5 12c0 1.7 2.5 3 5.5 3s5.5-1.3 5.5-3\" stroke=\"currentColor\" stroke-width=\"2\" />\r\n <ellipse cx=\"16.5\" cy=\"12\" rx=\"5\" ry=\"2.7\" stroke=\"currentColor\" stroke-width=\"2\" />\r\n <path d=\"M11.5 12v5c0 1.5 2.2 2.7 5 2.7s5-1.2 5-2.7v-5\" stroke=\"currentColor\" stroke-width=\"2\" />\r\n </svg>\r\n `;\r\n}\r\n\r\n/** Padlock glyph (fiscal year closing / lock dates). */\r\nexport function lockIcon(size = 18): TemplateResult {\r\n return html`\r\n <svg width=${size} height=${size} viewBox=\"0 0 24 24\" fill=\"none\" aria-hidden=\"true\">\r\n <rect x=\"4\" y=\"11\" width=\"16\" height=\"10\" rx=\"2\" stroke=\"currentColor\" stroke-width=\"2\" />\r\n <path d=\"M7 11V7a5 5 0 0 1 10 0v4\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" />\r\n <circle cx=\"12\" cy=\"16\" r=\"1.6\" fill=\"currentColor\" />\r\n </svg>\r\n `;\r\n}\r\n\r\n/**\r\n * Office file-type glyphs, ported from `PennyIcons` in `@sankhyatronics/sankhya-icons`\r\n * (FileWordIcon/FileExcelIcon/FilePowerPointIcon) — this package is Lit, so it can't import\r\n * the React components and carries the same path data instead. Filled, `currentColor`.\r\n */\r\nconst FILE_TYPE_ICON_PATHS = {\r\n word: 'm19.95 5.54-3.48-3.49A6.96 6.96 0 0 0 11.52 0H7C4.24 0 2 2.24 2 5v14c0 2.76 2.24 5 5 5h10c2.76 0 5-2.24 5-5v-8.51c0-1.87-.73-3.63-2.05-4.95Zm-1.41 1.41c.32.32.59.67.81 1.05h-4.34c-.55 0-1-.45-1-1V2.66c.38.22.73.49 1.05.81l3.48 3.49ZM20 19c0 1.65-1.35 3-3 3H7c-1.65 0-3-1.35-3-3V5c0-1.65 1.35-3 3-3h4.51c.16 0 .33 0 .49.02V7c0 1.65 1.35 3 3 3h4.98c.02.16.02.32.02.49V19Zm-3.28-5.76L15.3 18.9c-.15.61-.68 1.05-1.31 1.09-.63.04-1.21-.32-1.44-.91L12 17.7l-.55 1.38c-.22.56-.75.91-1.34.91h-.1c-.63-.04-1.15-.48-1.31-1.1l-1.41-5.66a1 1 0 0 1 1.94-.48l1 4 .85-2.13a1 1 0 0 1 1.86 0l.84 2.13 1.01-4a1 1 0 0 1 1.94.48Z',\r\n excel:\r\n 'M15.27 13.64 13.3 16l1.97 2.36a1.001 1.001 0 1 1-1.54 1.28L12 17.56l-1.73 2.08a.99.99 0 0 1-.77.36c-.23 0-.45-.08-.64-.23-.42-.35-.48-.98-.13-1.41L10.7 16l-1.97-2.36a1.001 1.001 0 1 1 1.54-1.28L12 14.44l1.73-2.08c.35-.42.98-.48 1.41-.13.42.35.48.98.13 1.41ZM22 10.49V19c0 2.76-2.24 5-5 5H7c-2.76 0-5-2.24-5-5V5c0-2.76 2.24-5 5-5h4.51c1.87 0 3.63.73 4.95 2.05l3.48 3.49a6.96 6.96 0 0 1 2.05 4.95Zm-6.95-7.03c-.32-.32-.67-.59-1.05-.81V7c0 .55.45 1 1 1h4.34c-.22-.38-.49-.73-.81-1.05l-3.48-3.49ZM20 10.48c0-.16 0-.33-.02-.49H15c-1.65 0-3-1.35-3-3V2.02C11.84 2 11.68 2 11.51 2H7C5.35 2 4 3.35 4 5v14c0 1.65 1.35 3 3 3h10c1.65 0 3-1.35 3-3v-8.51Z',\r\n powerpoint:\r\n 'm19.95 5.54-3.49-3.49A6.96 6.96 0 0 0 11.51 0H7C4.24 0 2 2.24 2 5v14c0 2.76 2.24 5 5 5h10c2.76 0 5-2.24 5-5v-8.51c0-1.87-.73-3.63-2.05-4.95Zm-1.41 1.41c.32.32.59.67.81 1.05h-4.34c-.55 0-1-.45-1-1V2.66c.38.22.73.49 1.05.81l3.49 3.49ZM20 19c0 1.65-1.35 3-3 3H7c-1.65 0-3-1.35-3-3V5c0-1.65 1.35-3 3-3h4.51c.16 0 .33 0 .49.02V7c0 1.65 1.35 3 3 3h4.98c.02.16.02.32.02.49V19Zm-10 1c-.55 0-1-.45-1-1v-5c0-1.1.9-2 2-2h1c1.65 0 3 1.35 3 3s-1.35 3-3 3h-1v1c0 .55-.45 1-1 1Zm1-4h1c.55 0 1-.45 1-1s-.45-1-1-1h-1v2Z'\r\n} as const;\r\n\r\n/** Word/Excel/PowerPoint file glyph (the document icon in front of template/file rows). */\r\nexport function fileTypeIcon(type: keyof typeof FILE_TYPE_ICON_PATHS, size = 24): TemplateResult {\r\n return html`\r\n <svg width=${size} height=${size} viewBox=\"0 0 24 24\" fill=\"currentColor\" aria-hidden=\"true\">\r\n <path d=${FILE_TYPE_ICON_PATHS[type]} />\r\n </svg>\r\n `;\r\n}\r\n\r\n/** Hamburger glyph (`st-header`'s mobile nav toggle, closed state). */\r\nexport function menuIcon(size = 20): TemplateResult {\r\n return html`\r\n <svg width=${size} height=${size} viewBox=\"0 0 24 24\" fill=\"none\" aria-hidden=\"true\">\r\n <path d=\"M4 6h16M4 12h16M4 18h16\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" />\r\n </svg>\r\n `;\r\n}\r\n\r\n/** X/close glyph (`st-header`'s mobile nav toggle, open state). */\r\nexport function closeIcon(size = 20): TemplateResult {\r\n return html`\r\n <svg width=${size} height=${size} viewBox=\"0 0 24 24\" fill=\"none\" aria-hidden=\"true\">\r\n <path d=\"M5 5l14 14M19 5L5 19\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" />\r\n </svg>\r\n `;\r\n}\r\n\r\n/** Gear/cog glyph (company settings). */\r\nexport function gearIcon(size = 18): TemplateResult {\r\n return html`\r\n <svg width=${size} height=${size} viewBox=\"0 0 24 24\" fill=\"none\" aria-hidden=\"true\">\r\n <circle cx=\"12\" cy=\"12\" r=\"3\" stroke=\"currentColor\" stroke-width=\"2\" />\r\n <path\r\n d=\"M12 3v2.2M12 18.8V21M21 12h-2.2M5.2 12H3M18 6l-1.6 1.6M7.6 16.4L6 18M18 18l-1.6-1.6M7.6 7.6L6 6\"\r\n stroke=\"currentColor\"\r\n stroke-width=\"2\"\r\n stroke-linecap=\"round\"\r\n />\r\n </svg>\r\n `;\r\n}\r\n\r\n/** Paint-palette glyph (theme/color-scheme switcher). */\r\nexport function paletteIcon(size = 18): TemplateResult {\r\n return html`\r\n <svg width=${size} height=${size} viewBox=\"0 0 24 24\" fill=\"none\" aria-hidden=\"true\">\r\n <path\r\n d=\"M12 3a9 9 0 1 0 0 18c1.1 0 2-.9 2-2 0-.5-.2-1-.5-1.3-.3-.4-.5-.8-.5-1.2 0-1.1.9-2 2-2h2a4 4 0 0 0 4-4c0-4.4-4-7.5-9-7.5z\"\r\n stroke=\"currentColor\"\r\n stroke-width=\"1.6\"\r\n stroke-linejoin=\"round\"\r\n />\r\n <circle cx=\"7.5\" cy=\"10.5\" r=\"1.2\" fill=\"currentColor\" />\r\n <circle cx=\"11\" cy=\"7\" r=\"1.2\" fill=\"currentColor\" />\r\n <circle cx=\"15.5\" cy=\"7.5\" r=\"1.2\" fill=\"currentColor\" />\r\n <circle cx=\"17.5\" cy=\"11.5\" r=\"1.2\" fill=\"currentColor\" />\r\n </svg>\r\n `;\r\n}\r\n"],"mappings":"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","names":[]}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/shared/styles.ts"],"sourcesContent":["import { css } from 'lit';\r\n\r\n/**\r\n * Reusable `css` fragments shared across component `static styles` blocks.\r\n *\r\n * Lit's `css` tag allows interpolating another `CSSResult` anywhere inside a\r\n * template, including mid-rule — `${fragment}` below expands to raw CSS\r\n * text, so these compose into a component's own selectors without forcing a\r\n * shared class name or touching `render()`. Each component keeps its own\r\n * selectors; only the duplicated property lists move here. Layout details\r\n * that genuinely vary per component (padding, gap, font-size, ...) stay\r\n * local, declared after a fragment so the cascade lets them override it.\r\n *\r\n * Add a fragment here only once a pattern is byte-identical (or near enough\r\n * that the deltas are better expressed as local overrides) across 3+\r\n * components — see `packages/suite-components/README.md#shared-style-fragments`.\r\n */\r\n\r\n/** Truncates overflowing text to a single line with an ellipsis. */\r\nexport const truncateStyles = css`\r\n overflow: hidden;\r\n text-overflow: ellipsis;\r\n white-space: nowrap;\r\n`;\r\n\r\n/**\r\n * Base for an unstyled, click-through interactive element (icon buttons,\r\n * menu triggers, link-like buttons) before component-specific padding,\r\n * font-size, and color are layered on.\r\n */\r\nexport const buttonResetStyles = css`\r\n border: 0;\r\n background: transparent;\r\n font: inherit;\r\n cursor: pointer;\r\n`;\r\n\r\n/**\r\n * The dark-filled primary-action button look (wizard Next/Generate/Run/Save,\r\n * active toggle buttons, ...). Pair with `ctaButtonDisabledStyles` on the\r\n * same selector's `:disabled` state.\r\n */\r\nexport const ctaButtonStyles = css`\r\n border: 0;\r\n border-radius: var(--st-button-radius);\r\n background: var(--st-button-primary-bg);\r\n color: var(--st-button-primary-color);\r\n font-weight: var(--st-button-font-weight);\r\n cursor: pointer;\r\n`;\r\n\r\nexport const ctaButtonDisabledStyles = css`\r\n background: var(--st-color-subtle);\r\n cursor: not-allowed;\r\n`;\r\n\r\n/**\r\n * Just the fill (background + color) from `ctaButtonStyles`, for selectors\r\n * that only need to swap an already-bordered/sized button into the CTA look\r\n * on an active/pressed/selected state (`[aria-pressed='true']`, `.active`,\r\n * ...) rather than defining the button from scratch.\r\n */\r\nexport const ctaButtonFillStyles = css`\r\n background: var(--st-button-primary-bg);\r\n color: var(--st-button-primary-color);\r\n`;\r\n\r\n/** Floating menu/dropdown panel chrome (user menu, language menu, ...). */\r\nexport const dropdownPanelStyles = css`\r\n position: absolute;\r\n top: 38px;\r\n right: 0;\r\n background: var(--st-color-surface);\r\n border: 1px solid var(--st-color-border);\r\n border-radius: var(--st-radius-sm);\r\n box-shadow: 0 4px 16px var(--st-shadow-color-sm);\r\n z-index: 30;\r\n overflow: hidden;\r\n`;\r\n\r\n/** \"No results\" / \"Nothing here.\" empty-state text. Padding stays local. */\r\nexport const emptyStateStyles = css`\r\n text-align: center;\r\n color: var(--st-color-text-muted);\r\n font-size: var(--st-text-base);\r\n`;\r\n\r\n/** Bordered, rounded shell wrapping a data table (browse/list views). */\r\nexport const tableShellStyles = css`\r\n background: var(--st-color-surface);\r\n border: 1px solid var(--st-color-border);\r\n border-radius: var(--st-radius-md);\r\n overflow: hidden;\r\n`;\r\n\r\n/** A single bordered result row with a name (truncated) + trailing link. */\r\nexport const resultRowStyles = css`\r\n display: flex;\r\n align-items: center;\r\n gap: var(--st-space-12);\r\n padding: var(--st-space-12) var(--st-space-14);\r\n border: 1px solid var(--st-color-border);\r\n border-radius: var(--st-radius-sm);\r\n`;\r\n\r\nexport const resultNameStyles = css`\r\n flex: 1;\r\n min-width: 120px;\r\n font-size: var(--st-text-base);\r\n font-weight: var(--st-font-weight-medium);\r\n ${truncateStyles}\r\n`;\r\n\r\nexport const resultLinkStyles = css`\r\n font-size: var(--st-text-sm);\r\n font-weight: var(--st-font-weight-semibold);\r\n color: var(--st-color-accent-text);\r\n`;\r\n\r\n/**\r\n * Uppercase, letter-spaced section/field \"eyebrow\" label (card headings,\r\n * table headers, field labels, ...). Font-size stays local since it varies\r\n * (11–12px) by context.\r\n */\r\nexport const eyebrowLabelStyles = css`\r\n font-weight: var(--st-font-weight-bold);\r\n color: var(--st-color-text-muted);\r\n text-transform: uppercase;\r\n letter-spacing: var(--st-tracking-wide);\r\n`;\r\n\r\n/** Top border separating stacked rows in a list/table (folder rows, data rows, table rows, ...). */\r\nexport const rowDividerStyles = css`\r\n border-top: 1px solid var(--st-color-divider);\r\n`;\r\n\r\n/**\r\n * Bordered, rounded surface shell for a card/tile/panel (as opposed to\r\n * `tableShellStyles`, which additionally clips overflow for tabular content).\r\n * Padding, gap, and cursor stay local since they vary by component.\r\n */\r\nexport const cardShellStyles = css`\r\n background: var(--st-color-surface);\r\n border: 1px solid var(--st-color-border);\r\n border-radius: var(--st-radius-md);\r\n`;\r\n\r\n/** A card/tile/row's bold primary name line (folder tiles/rows, template cards, ...). */\r\nexport const itemNameStyles = css`\r\n font-size: var(--st-text-base);\r\n font-weight: var(--st-font-weight-semibold);\r\n color: var(--st-color-text-strong);\r\n`;\r\n\r\n/** A card/tile/row's muted secondary caption line, paired with `itemNameStyles`. */\r\nexport const itemCaptionStyles = css`\r\n font-size: var(--st-text-xs);\r\n color: var(--st-color-text-muted);\r\n`;\r\n\r\n/**\r\n * Whole rules (not a property list) every component's stylesheet starts\r\n * with: routes keyboard focus rings and native checkbox/radio tint through\r\n * `--st-focus-ring` / `--st-checkbox-color`, whose defaults (`auto`) keep\r\n * the browser's own look until a host app themes them.\r\n */\r\nexport const controlBaseStyles = css`\r\n :is(button, a, input, select, textarea, [tabindex]):focus-visible {\r\n outline: var(--st-focus-ring);\r\n outline-offset: var(--st-focus-ring-offset);\r\n }\r\n\r\n input[type='checkbox'],\r\n input[type='radio'] {\r\n accent-color: var(--st-checkbox-color);\r\n }\r\n`;\r\n\r\n/** Default font stack, used by nearly every component. */\r\nexport const fontFamilyStyles = css`\r\n font-family: var(--st-font-family);\r\n`;\r\n\r\n/**\r\n * Font stack for page-root/chrome components (`st-template-hub`, the admin\r\n * and configuration pages, `st-app-header`, ...). Identical to\r\n * `fontFamilyStyles` now that `--st-font-family` always resolves via\r\n * `theme.css` (no per-usage fallback) — kept as a separate export so those\r\n * call sites stay semantically distinct if the two ever need to diverge\r\n * again.\r\n */\r\nexport const rootFontFamilyStyles = css`\r\n font-family: var(--st-font-family);\r\n`;\r\n\r\n/** Canonical responsive breakpoints (px). Interpolate as `${BREAKPOINT_TABLET}px`. */\r\nexport const BREAKPOINT_TABLET = 900;\r\nexport const BREAKPOINT_MOBILE = 500;\r\n"],"mappings":";AAAA,SAAS,WAAW;AAmBb,IAAM,iBAAiB;AAAA;AAAA;AAAA;AAAA;AAWvB,IAAM,oBAAoB;AAAA;AAAA;AAAA;AAAA;AAAA;AAY1B,IAAM,kBAAkB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AASxB,IAAM,0BAA0B;AAAA;AAAA;AAAA;AAWhC,IAAM,sBAAsB;AAAA;AAAA;AAAA;AAM5B,IAAM,sBAAsB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAa5B,IAAM,mBAAmB;AAAA;AAAA;AAAA;AAAA;AAOzB,IAAM,mBAAmB;AAAA;AAAA;AAAA;AAAA;AAAA;AAQzB,IAAM,kBAAkB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AASxB,IAAM,mBAAmB;AAAA;AAAA;AAAA;AAAA;AAAA,IAK5B,cAAc;AAAA;AAGX,IAAM,mBAAmB;AAAA;AAAA;AAAA;AAAA;AAWzB,IAAM,qBAAqB;AAAA;AAAA;AAAA;AAAA;AAAA;AAQ3B,IAAM,mBAAmB;AAAA;AAAA;AASzB,IAAM,kBAAkB;AAAA;AAAA;AAAA;AAAA;AAOxB,IAAM,iBAAiB;AAAA;AAAA;AAAA;AAAA;AAOvB,IAAM,oBAAoB;AAAA;AAAA;AAAA;AAW1B,IAAM,oBAAoB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAa1B,IAAM,mBAAmB;AAAA;AAAA;AAYzB,IAAM,uBAAuB;AAAA;AAAA;AAK7B,IAAM,oBAAoB;AAC1B,IAAM,oBAAoB;","names":[]}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/select/Select.ts"],"sourcesContent":["import { LitElement, css, html, nothing } from 'lit';\r\nimport type { PropertyValues } from 'lit';\r\nimport { customElement, property, query } from 'lit/decorators.js';\r\n\r\nimport { chevronIcon, externalLinkIcon } from '../shared/icons';\r\nimport { controlBaseStyles, eyebrowLabelStyles, fontFamilyStyles } from '../shared/styles';\r\nimport type { SelectOption } from './SelectEvents';\r\nimport type { SelectChangedEventDetail } from './SelectEvents';\r\n\r\nlet instanceCounter = 0;\r\n\r\n/**\r\n * A fully custom-styled replacement for native `<select>`, used everywhere\r\n * the wizard needs a single-choice dropdown (template source, list, document\r\n * library, admin roles, ...).\r\n *\r\n * Built on the CSS Customizable Select API (`appearance: base-select`) —\r\n * still a real `<select>`/`<option>` element tree, so focus, keyboard\r\n * (arrows/Home/End/typeahead), and ARIA all come from the browser for free,\r\n * but the trigger (`<button>`/`<selectedcontent>`) and popup\r\n * (`::picker(select)`) are fully styleable instead of OS-rendered. Chromium\r\n * only for now (Firefox/Safari fall back to an unstyled native `<select>` —\r\n * the extra `<button>`/`<selectedcontent>` markup is simply not rendered by\r\n * browsers that don't support the parsing/CSS additions, so the control\r\n * still works there, just without the custom look).\r\n *\r\n * `options` intentionally has no \"unselected\" placeholder entry — set\r\n * `value=\"\"` (or any value with no matching option) and it falls back to\r\n * showing `placeholder` in the trigger instead, letting callers swap the\r\n * placeholder text dynamically (e.g. \"Select a list\" vs \"Select a list\r\n * first\") without needing a synthetic option in the list. Internally this is\r\n * a real hidden/disabled `<option value=\"\">`, since a native `<select>`\r\n * always has *some* option selected.\r\n *\r\n * Fires `select-change` (detail: `{ value }`) only when the value actually\r\n * changes, matching native `<select>`'s `change` event semantics.\r\n *\r\n * `link-href` optionally renders an external-link button in front of\r\n * `field-label` — the same glyph/placement as the \"open library\" links\r\n * placed next to the Templates/Save-location breadcrumbs — for callers that\r\n * want a one-click way to open whatever the current selection points at\r\n * (e.g. the SharePoint site or library) in a new tab.\r\n */\r\n@customElement('st-select')\r\nexport class Select extends LitElement {\r\n static styles = css`\r\n ${controlBaseStyles}\r\n\r\n :host {\r\n display: inline-flex;\r\n flex-direction: column;\r\n gap: var(--st-space-4);\r\n min-width: 0;\r\n ${fontFamilyStyles}\r\n }\r\n\r\n .field-label-row {\r\n display: flex;\r\n align-items: center;\r\n gap: var(--st-space-6);\r\n min-width: 0;\r\n }\r\n\r\n .field-label {\r\n font-size: var(--st-text-xs);\r\n ${eyebrowLabelStyles}\r\n }\r\n\r\n .field-label-link {\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n flex: none;\r\n color: var(--st-color-text-faint);\r\n }\r\n\r\n .field-label-link:hover {\r\n color: var(--st-color-text-strong);\r\n }\r\n\r\n select {\r\n appearance: base-select;\r\n width: 100%;\r\n min-width: 0;\r\n border: 0;\r\n padding: 0;\r\n background: transparent;\r\n font: inherit;\r\n color: inherit;\r\n }\r\n\r\n select::picker(select) {\r\n appearance: base-select;\r\n margin-top: var(--st-space-4);\r\n background: var(--st-color-surface);\r\n border: 1px solid var(--st-color-border);\r\n border-radius: var(--st-radius-sm);\r\n box-shadow: 0 4px 16px var(--st-shadow-color-sm);\r\n padding: var(--st-space-4) 0;\r\n }\r\n\r\n .trigger {\r\n display: flex;\r\n align-items: center;\r\n justify-content: space-between;\r\n gap: var(--st-space-8);\r\n width: 100%;\r\n padding: var(--st-space-8) var(--st-space-10);\r\n border-radius: var(--st-radius-sm);\r\n border: 1px solid var(--st-color-border);\r\n background: var(--st-color-surface);\r\n color: var(--st-color-text-strong);\r\n font: inherit;\r\n font-size: var(--st-text-base);\r\n box-sizing: border-box;\r\n text-align: left;\r\n cursor: pointer;\r\n }\r\n\r\n .trigger:hover,\r\n .trigger:focus-visible {\r\n background: var(--st-color-hover);\r\n }\r\n\r\n /* Borderless variant for a header/toolbar utility slot, so it reads as the same kind of\r\n * hover-only control as st-icon-button and st-header's own language trigger (same fixed\r\n * height, no permanent visible border) instead of a form-field box. */\r\n :host([ghost]) .trigger {\r\n height: var(--st-size-32);\r\n padding: 0 var(--st-space-8);\r\n border: none;\r\n background: transparent;\r\n }\r\n\r\n :host([ghost]) .trigger:hover,\r\n :host([ghost]) .trigger:focus-visible {\r\n background: var(--st-color-hover);\r\n }\r\n\r\n select:disabled .trigger {\r\n color: var(--st-color-text-muted);\r\n cursor: not-allowed;\r\n }\r\n\r\n selectedcontent {\r\n overflow: hidden;\r\n text-overflow: ellipsis;\r\n white-space: nowrap;\r\n }\r\n\r\n select:has(option[value='']:checked) selectedcontent {\r\n color: var(--st-color-text-muted);\r\n }\r\n\r\n select::picker-icon {\r\n display: none;\r\n }\r\n\r\n .caret {\r\n display: flex;\r\n flex: none;\r\n color: var(--st-color-text-muted);\r\n }\r\n\r\n option {\r\n display: block;\r\n padding: var(--st-space-8) var(--st-space-10);\r\n font-size: var(--st-text-base);\r\n color: var(--st-color-text);\r\n cursor: pointer;\r\n }\r\n\r\n option[hidden] {\r\n display: none;\r\n }\r\n\r\n option:hover,\r\n option:focus {\r\n background: var(--st-color-hover);\r\n }\r\n\r\n option:checked {\r\n color: var(--st-color-text-strong);\r\n font-weight: var(--st-font-weight-semibold);\r\n }\r\n\r\n option::checkmark {\r\n display: none;\r\n }\r\n `;\r\n\r\n @property({ attribute: false })\r\n options: SelectOption[] = [];\r\n\r\n @property({ type: String })\r\n value = '';\r\n\r\n @property({ type: String })\r\n placeholder = 'Select…';\r\n\r\n /** Renders an internal `<label>` above the trigger, associated via `aria-labelledby`. Leave empty when the field is labeled some other way (e.g. context alone). */\r\n @property({ type: String, attribute: 'field-label' })\r\n fieldLabel = '';\r\n\r\n /**\r\n * Optional URL for an external-link button rendered in front of\r\n * `field-label` (same glyph/placement as the \"open library\" links next to\r\n * the Templates/Save-location breadcrumbs) — e.g. a link to the\r\n * SharePoint site or library the current selection points at. Ignored\r\n * when `field-label` is empty, since there'd be nothing to place it in\r\n * front of.\r\n */\r\n @property({ type: String, attribute: 'link-href' })\r\n linkHref = '';\r\n\r\n /** Accessible name/title for the `link-href` button. */\r\n @property({ type: String, attribute: 'link-label' })\r\n linkLabel = 'Open';\r\n\r\n /** Accessible name for the trigger when there's no visible `field-label` (e.g. a filter-row select). Ignored when `field-label` is set. */\r\n @property({ type: String, attribute: 'select-label' })\r\n selectLabel = '';\r\n\r\n @property({ type: Boolean, reflect: true })\r\n disabled = false;\r\n\r\n /** Borderless variant for a header/toolbar utility slot — see the `:host([ghost])` styles. */\r\n @property({ type: Boolean, reflect: true })\r\n ghost = false;\r\n\r\n @query('select')\r\n private readonly selectEl!: HTMLSelectElement;\r\n\r\n private readonly instanceId = ++instanceCounter;\r\n private readonly fieldLabelId = `st-select-label-${this.instanceId}`;\r\n\r\n protected updated(changed: PropertyValues): void {\r\n if (changed.has('value') || changed.has('options')) {\r\n const hasValue = this.options.some((option) => option.value === this.value);\r\n const nextValue = hasValue ? this.value : '';\r\n if (this.selectEl.value !== nextValue) this.selectEl.value = nextValue;\r\n }\r\n }\r\n\r\n render() {\r\n const hasValue = this.options.some((option) => option.value === this.value);\r\n\r\n return html`\r\n ${this.fieldLabel\r\n ? html`\r\n <span class=\"field-label-row\">\r\n ${this.linkHref\r\n ? html`\r\n <a\r\n part=\"field-label-link\"\r\n class=\"field-label-link\"\r\n href=${this.linkHref}\r\n target=\"_blank\"\r\n rel=\"noopener noreferrer\"\r\n title=${this.linkLabel}\r\n aria-label=${this.linkLabel}\r\n >\r\n ${externalLinkIcon(11)}\r\n </a>\r\n `\r\n : nothing}\r\n <span part=\"field-label\" id=${this.fieldLabelId} class=\"field-label\">${this.fieldLabel}</span>\r\n </span>\r\n `\r\n : nothing}\r\n <select\r\n part=\"select\"\r\n aria-label=${!this.fieldLabel && this.selectLabel ? this.selectLabel : nothing}\r\n aria-labelledby=${this.fieldLabel ? this.fieldLabelId : nothing}\r\n ?disabled=${this.disabled}\r\n @change=${this.onChange}\r\n >\r\n <button part=\"trigger\" class=\"trigger\" type=\"button\">\r\n <selectedcontent></selectedcontent>\r\n <span class=\"caret\">${chevronIcon('down', 10)}</span>\r\n </button>\r\n <option value=\"\" ?selected=${!hasValue} disabled hidden>${this.placeholder}</option>\r\n ${this.options.map(\r\n (option) => html`<option part=\"option\" value=${option.value} ?selected=${option.value === this.value}>${option.label}</option>`\r\n )}\r\n </select>\r\n `;\r\n }\r\n\r\n private onChange = (event: Event): void => {\r\n const newValue = (event.target as HTMLSelectElement).value;\r\n if (newValue === this.value) return;\r\n\r\n this.value = newValue;\r\n this.dispatchEvent(new CustomEvent<SelectChangedEventDetail>('select-change', { detail: { value: newValue }, bubbles: true, composed: true }));\r\n };\r\n}\r\n"],"mappings":"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","names":[]}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/content-block/ContentBlock.ts"],"sourcesContent":["import { LitElement, css, html, nothing } from 'lit';\r\nimport { customElement, property } from 'lit/decorators.js';\r\n\r\nimport { controlBaseStyles, fontFamilyStyles } from '../shared/styles';\r\nimport { sectionSubtitleStyles, sectionTitleStyles, sectionHeaderStyles } from '../shared/section-styles';\r\nimport '../markdown';\r\n\r\n/**\r\n * A long-form article section: centered title/subtitle, an optional featured image with caption,\r\n * then Markdown body text. Ports `SankhyaUI`'s React `ContentBlock`. The body comes from\r\n * `content-src` (a Markdown URL, as in the source) or an inline `content` string (added so the\r\n * block works without a fetch); `content-src` wins when both are set.\r\n *\r\n * @cssprop --st-content-block-padding - Overrides the block's padding.\r\n */\r\n@customElement('st-content-block')\r\nexport class ContentBlock extends LitElement {\r\n static styles = css`\r\n ${controlBaseStyles}\r\n\r\n :host {\r\n display: block;\r\n ${fontFamilyStyles}\r\n /* !important: a page-level reset (e.g. Tailwind Preflight) otherwise zeroes a shadow host's\r\n padding; override with --st-content-block-padding instead. */\r\n padding: var(--st-content-block-padding, var(--st-space-24)) !important;\r\n background: var(--st-color-surface);\r\n color: var(--st-color-text-strong);\r\n }\r\n\r\n :host([inverted]) {\r\n background: var(--st-color-text-strong);\r\n color: var(--st-color-on-solid);\r\n }\r\n\r\n .container {\r\n max-width: var(--st-cms-container-max);\r\n padding: 0 var(--st-space-48);\r\n margin: 0 auto;\r\n }\r\n\r\n .header {\r\n ${sectionHeaderStyles}\r\n }\r\n\r\n .title {\r\n ${sectionTitleStyles}\r\n line-height: 1.1;\r\n }\r\n\r\n .subtitle {\r\n ${sectionSubtitleStyles}\r\n }\r\n\r\n :host([inverted]) .title,\r\n :host([inverted]) .subtitle {\r\n color: inherit;\r\n }\r\n\r\n .featured-image {\r\n margin: 0 0 var(--st-space-48);\r\n border-radius: var(--st-radius-lg);\r\n overflow: hidden;\r\n }\r\n\r\n .featured-image img {\r\n width: 100%;\r\n height: auto;\r\n display: block;\r\n }\r\n\r\n figcaption {\r\n padding: var(--st-space-12);\r\n text-align: center;\r\n color: var(--st-color-text-muted);\r\n font-size: var(--st-text-xs);\r\n }\r\n\r\n st-markdown {\r\n color: var(--st-color-text);\r\n font-size: var(--st-text-xl);\r\n }\r\n\r\n :host([inverted]) st-markdown {\r\n color: inherit;\r\n }\r\n\r\n @media (max-width: 768px) {\r\n :host {\r\n padding: var(--st-content-block-padding, var(--st-space-48) var(--st-space-24)) !important;\r\n }\r\n\r\n .container {\r\n padding: 0;\r\n }\r\n }\r\n `;\r\n\r\n @property({ type: String })\r\n title = '';\r\n\r\n @property({ type: String })\r\n subtitle = '';\r\n\r\n /** URL of a Markdown file. */\r\n @property({ type: String, attribute: 'content-src' })\r\n contentSrc = '';\r\n\r\n /** Inline Markdown, used when `content-src` is not set. */\r\n @property({ type: String })\r\n content = '';\r\n\r\n @property({ type: String, attribute: 'image-src' })\r\n imageSrc = '';\r\n\r\n @property({ type: String, attribute: 'image-alt' })\r\n imageAlt = '';\r\n\r\n @property({ type: String, attribute: 'image-caption' })\r\n imageCaption = '';\r\n\r\n @property({ type: Boolean, reflect: true })\r\n inverted = false;\r\n\r\n render() {\r\n return html`\r\n <section class=\"container\" part=\"container\">\r\n <div class=\"header\" part=\"header\">\r\n ${this.title ? html`<div class=\"title\" part=\"title\">${this.title}</div>` : nothing}\r\n ${this.subtitle ? html`<div class=\"subtitle\" part=\"subtitle\">${this.subtitle}</div>` : nothing}\r\n </div>\r\n ${this.imageSrc\r\n ? html`\r\n <figure class=\"featured-image\" part=\"image\">\r\n <img src=${this.imageSrc} alt=${this.imageAlt || this.title} />\r\n ${this.imageCaption ? html`<figcaption>${this.imageCaption}</figcaption>` : nothing}\r\n </figure>\r\n `\r\n : nothing}\r\n <st-markdown part=\"body\" .src=${this.contentSrc} .content=${this.content}></st-markdown>\r\n </section>\r\n `;\r\n }\r\n}\r\n"],"mappings":";;;;;;;;;;;;;;AAAA,SAAS,YAAY,KAAK,MAAM,eAAe;AAC/C,SAAS,eAAe,gBAAgB;AAejC,IAAM,eAAN,cAA2B,WAAW;AAAA,EAAtC;AAAA;AAmFL,iBAAQ;AAGR,oBAAW;AAIX,sBAAa;AAIb,mBAAU;AAGV,oBAAW;AAGX,oBAAW;AAGX,wBAAe;AAGf,oBAAW;AAAA;AAAA,EAEX,SAAS;AACP,WAAO;AAAA;AAAA;AAAA,YAGC,KAAK,QAAQ,uCAAuC,KAAK,KAAK,WAAW,OAAO;AAAA,YAChF,KAAK,WAAW,6CAA6C,KAAK,QAAQ,WAAW,OAAO;AAAA;AAAA,UAE9F,KAAK,WACH;AAAA;AAAA,2BAEe,KAAK,QAAQ,QAAQ,KAAK,YAAY,KAAK,KAAK;AAAA,kBACzD,KAAK,eAAe,mBAAmB,KAAK,YAAY,kBAAkB,OAAO;AAAA;AAAA,gBAGvF,OAAO;AAAA,wCACqB,KAAK,UAAU,aAAa,KAAK,OAAO;AAAA;AAAA;AAAA,EAG9E;AACF;AA/Ha,aACJ,SAAS;AAAA,MACZ,iBAAiB;AAAA;AAAA;AAAA;AAAA,QAIf,gBAAgB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,QAoBhB,mBAAmB;AAAA;AAAA;AAAA;AAAA,QAInB,kBAAkB;AAAA;AAAA;AAAA;AAAA;AAAA,QAKlB,qBAAqB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAgD3B;AAAA,EADC,SAAS,EAAE,MAAM,OAAO,CAAC;AAAA,GAlFf,aAmFX;AAGA;AAAA,EADC,SAAS,EAAE,MAAM,OAAO,CAAC;AAAA,GArFf,aAsFX;AAIA;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,WAAW,cAAc,CAAC;AAAA,GAzFzC,aA0FX;AAIA;AAAA,EADC,SAAS,EAAE,MAAM,OAAO,CAAC;AAAA,GA7Ff,aA8FX;AAGA;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,WAAW,YAAY,CAAC;AAAA,GAhGvC,aAiGX;AAGA;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,WAAW,YAAY,CAAC;AAAA,GAnGvC,aAoGX;AAGA;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,WAAW,gBAAgB,CAAC;AAAA,GAtG3C,aAuGX;AAGA;AAAA,EADC,SAAS,EAAE,MAAM,SAAS,SAAS,KAAK,CAAC;AAAA,GAzG/B,aA0GX;AA1GW,eAAN;AAAA,EADN,cAAc,kBAAkB;AAAA,GACpB;","names":[]}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/feature-split/FeatureSplit.ts"],"sourcesContent":["import { LitElement, css, html, nothing } from 'lit';\r\nimport { customElement, property } from 'lit/decorators.js';\r\nimport 'iconify-icon';\r\n\r\nimport { controlBaseStyles, ctaButtonStyles, fontFamilyStyles } from '../shared/styles';\r\nimport '../markdown';\r\nimport {\r\n cardTitleStyles,\r\n iconTileStyles,\r\n reducedMotionStyles,\r\n sectionTitleStyles,\r\n} from '../shared/section-styles';\r\nimport type { FeatureSplitActionEventDetail } from './FeatureSplitEvents';\r\n\r\nexport interface FeatureSplitItem {\r\n /** Iconify icon name, e.g. `mdi:check`. */\r\n icon?: string;\r\n title: string;\r\n /** Markdown. */\r\n description: string;\r\n}\r\n\r\nexport type FeatureSplitImagePosition = 'left' | 'right' | 'top';\r\n\r\n/**\r\n * A title/markdown-subtitle/feature-list block beside (or under) an image.\r\n *\r\n * @cssprop --st-feature-split-padding - Overrides the block's padding.\r\n */\r\n@customElement('st-feature-split')\r\nexport class FeatureSplit extends LitElement {\r\n static styles = css`\r\n ${controlBaseStyles}\r\n\r\n :host {\r\n display: block;\r\n /* !important: a page-level reset (e.g. Tailwind Preflight) otherwise zeroes a shadow host's\r\n padding; override with --st-feature-split-padding instead. */\r\n padding: var(--st-feature-split-padding, var(--st-space-24)) !important;\r\n background: var(--st-color-page);\r\n ${fontFamilyStyles}\r\n }\r\n\r\n :host([inverted]) {\r\n background: var(--st-color-text-strong);\r\n }\r\n\r\n .container {\r\n max-width: var(--st-cms-container-max);\r\n margin: 0 auto;\r\n display: grid;\r\n grid-template-columns: 1fr 1fr;\r\n gap: var(--st-space-48);\r\n align-items: center;\r\n }\r\n\r\n :host([image-position='left']) .container {\r\n direction: rtl;\r\n }\r\n\r\n :host([image-position='left']) .content {\r\n direction: ltr;\r\n }\r\n\r\n :host([image-position='top']) .container {\r\n grid-template-columns: 1fr;\r\n text-align: center;\r\n }\r\n\r\n :host([image-position='top']) .content {\r\n align-items: center;\r\n }\r\n\r\n :host([image-position='top']) .image-wrapper {\r\n order: -1;\r\n max-width: 800px;\r\n margin: 0 auto;\r\n }\r\n\r\n .content {\r\n display: flex;\r\n flex-direction: column;\r\n gap: var(--st-space-32);\r\n }\r\n\r\n .title {\r\n ${sectionTitleStyles}\r\n margin: 0;\r\n }\r\n\r\n .subtitle {\r\n color: var(--st-color-text-muted);\r\n font-size: var(--st-text-base);\r\n line-height: 1.6;\r\n }\r\n\r\n .list {\r\n display: flex;\r\n flex-direction: column;\r\n gap: var(--st-space-24);\r\n margin-top: var(--st-space-16);\r\n }\r\n\r\n .item {\r\n display: flex;\r\n gap: var(--st-space-16);\r\n align-items: flex-start;\r\n text-align: left;\r\n }\r\n\r\n .icon {\r\n ${iconTileStyles}\r\n width: var(--st-space-48);\r\n height: var(--st-space-48);\r\n font-size: 24px;\r\n }\r\n\r\n .item-title {\r\n ${cardTitleStyles}\r\n }\r\n\r\n .item-description {\r\n color: var(--st-color-text-muted);\r\n font-size: var(--st-text-sm);\r\n line-height: 1.5;\r\n }\r\n\r\n .action {\r\n ${ctaButtonStyles}\r\n justify-self: start;\r\n padding: var(--st-space-16);\r\n border-radius: var(--st-radius-lg);\r\n }\r\n\r\n .image-wrapper {\r\n width: 100%;\r\n height: 100%;\r\n min-height: 400px;\r\n border-radius: var(--st-space-24);\r\n overflow: hidden;\r\n box-shadow: 0 20px 40px -12px var(--st-shadow-color-md);\r\n }\r\n\r\n .image {\r\n width: 100%;\r\n height: 100%;\r\n object-fit: cover;\r\n transition: transform 0.5s ease;\r\n }\r\n\r\n .image:hover {\r\n transform: scale(1.02);\r\n }\r\n\r\n :host([inverted]) .title,\r\n :host([inverted]) .item-title {\r\n color: var(--st-color-on-solid);\r\n }\r\n\r\n :host([inverted]) .subtitle,\r\n :host([inverted]) .item-description {\r\n color: var(--st-color-border);\r\n }\r\n\r\n :host([inverted]) .icon {\r\n background: var(--st-color-text);\r\n color: var(--st-color-border);\r\n }\r\n\r\n @media (max-width: 1024px) {\r\n .container {\r\n gap: var(--st-space-40);\r\n }\r\n }\r\n\r\n @media (max-width: 768px) {\r\n :host {\r\n padding: var(--st-feature-split-padding, var(--st-space-48) var(--st-space-24)) !important;\r\n }\r\n\r\n .container {\r\n grid-template-columns: 1fr;\r\n direction: ltr !important;\r\n }\r\n\r\n .image-wrapper {\r\n min-height: 300px;\r\n order: -1;\r\n }\r\n }\r\n\r\n ${reducedMotionStyles}\r\n `;\r\n\r\n @property({ type: Boolean, reflect: true })\r\n inverted = false;\r\n\r\n @property({ type: String })\r\n title = '';\r\n\r\n /** Markdown. */\r\n @property({ type: String })\r\n subtitle = '';\r\n\r\n @property({ attribute: false })\r\n items: FeatureSplitItem[] = [];\r\n\r\n @property({ type: String, attribute: 'image-src' })\r\n imageSrc = '';\r\n\r\n @property({ type: String, attribute: 'image-alt' })\r\n imageAlt = '';\r\n\r\n @property({ type: String, attribute: 'image-position', reflect: true })\r\n imagePosition: FeatureSplitImagePosition = 'right';\r\n\r\n @property({ type: String, attribute: 'action-label' })\r\n actionLabel = '';\r\n\r\n @property({ type: String })\r\n href = '';\r\n\r\n private onAction() {\r\n const event = new CustomEvent<FeatureSplitActionEventDetail>('feature-split-action', {\r\n detail: { href: this.href },\r\n bubbles: true,\r\n composed: true,\r\n cancelable: true,\r\n });\r\n if (this.dispatchEvent(event)) window.location.href = this.href;\r\n }\r\n\r\n render() {\r\n return html`\r\n <div class=\"container\" part=\"container\">\r\n <div class=\"content\" part=\"content\">\r\n <h2 class=\"title\" part=\"title\">${this.title}</h2>\r\n ${this.subtitle\r\n ? html`<div class=\"subtitle\" part=\"subtitle\"><st-markdown .content=${this.subtitle}></st-markdown></div>`\r\n : nothing}\r\n ${this.items.length > 0\r\n ? html`<div class=\"list\" part=\"list\">\r\n ${this.items.map(\r\n (item) => html`\r\n <div class=\"item\" part=\"item\">\r\n ${item.icon\r\n ? html`<div class=\"icon\" part=\"icon\"><iconify-icon icon=${item.icon}></iconify-icon></div>`\r\n : nothing}\r\n <div>\r\n <h3 class=\"item-title\" part=\"item-title\">${item.title}</h3>\r\n <div class=\"item-description\" part=\"item-description\">\r\n <st-markdown .content=${item.description}></st-markdown>\r\n </div>\r\n </div>\r\n </div>\r\n `,\r\n )}\r\n </div>`\r\n : nothing}\r\n ${this.actionLabel && this.href\r\n ? html`<button class=\"action\" part=\"action\" type=\"button\" @click=${this.onAction}>${this.actionLabel}</button>`\r\n : nothing}\r\n </div>\r\n <div class=\"image-wrapper\" part=\"image-wrapper\">\r\n <img class=\"image\" part=\"image\" src=${this.imageSrc} alt=${this.imageAlt || this.title} />\r\n </div>\r\n </div>\r\n `;\r\n }\r\n}\r\n"],"mappings":"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","names":[]}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/menu-grid/MenuGrid.ts"],"sourcesContent":["import { LitElement, css, html } from 'lit';\r\nimport { customElement, property } from 'lit/decorators.js';\r\n\r\nimport { controlBaseStyles } from '../shared/styles';\r\n\r\n/**\r\n * A responsive grid of `st-menu-grid-item`s — the \"rich\" nav-menu layout (icon + title +\r\n * description per entry, arranged in columns), typically slotted into `st-dropdown`'s default\r\n * slot. A 1:1 port of `SankhyaUI`'s React `MenuGrid` (`SankhyaCMS/SankhyaUI/src/components/Menu`):\r\n * same markup (`.menu-grid-container` > `.menu-grid.columns-N`), gap and breakpoints (768px: 2–4\r\n * columns → 2; 480px: everything → 1; a 1-column grid stays 1).\r\n */\r\n@customElement('st-menu-grid')\r\nexport class MenuGrid extends LitElement {\r\n static styles = css`\r\n ${controlBaseStyles}\r\n\r\n :host {\r\n display: block;\r\n }\r\n\r\n .menu-grid-container {\r\n width: 100%;\r\n }\r\n\r\n .menu-grid {\r\n display: grid;\r\n gap: 12px;\r\n }\r\n\r\n .menu-grid.columns-1 {\r\n grid-template-columns: repeat(1, 1fr);\r\n }\r\n\r\n .menu-grid.columns-2 {\r\n grid-template-columns: repeat(2, 1fr);\r\n }\r\n\r\n .menu-grid.columns-3 {\r\n grid-template-columns: repeat(3, 1fr);\r\n }\r\n\r\n .menu-grid.columns-4 {\r\n grid-template-columns: repeat(4, 1fr);\r\n }\r\n\r\n @media (max-width: 768px) {\r\n .menu-grid.columns-2,\r\n .menu-grid.columns-3,\r\n .menu-grid.columns-4 {\r\n grid-template-columns: repeat(2, 1fr);\r\n }\r\n }\r\n\r\n @media (max-width: 480px) {\r\n .menu-grid.columns-1,\r\n .menu-grid.columns-2,\r\n .menu-grid.columns-3,\r\n .menu-grid.columns-4 {\r\n grid-template-columns: 1fr;\r\n }\r\n }\r\n `;\r\n\r\n /** Number of columns at full width (1–4, same as the source component's `columns-N` classes). */\r\n @property({ type: Number })\r\n columns = 3;\r\n\r\n /** Extra class(es) appended to the inner grid element — the source component's `gridClassName`.\r\n * Its outer `className` is the host element itself here: set a `class` attribute on `st-menu-grid`. */\r\n @property({ type: String, attribute: 'grid-class-name' })\r\n gridClassName = '';\r\n\r\n render() {\r\n const columns = Math.min(4, Math.max(1, Math.round(this.columns) || 1));\r\n return html`\r\n <div class=\"menu-grid-container\" part=\"container\">\r\n <div part=\"grid\" class=\"menu-grid columns-${columns} ${this.gridClassName}\">\r\n <slot></slot>\r\n </div>\r\n </div>\r\n `;\r\n }\r\n}\r\n"],"mappings":";;;;;;;;AAAA,SAAS,YAAY,KAAK,YAAY;AACtC,SAAS,eAAe,gBAAgB;AAYjC,IAAM,WAAN,cAAuB,WAAW;AAAA,EAAlC;AAAA;AAqDL,mBAAU;AAKV,yBAAgB;AAAA;AAAA,EAEhB,SAAS;AACP,UAAM,UAAU,KAAK,IAAI,GAAG,KAAK,IAAI,GAAG,KAAK,MAAM,KAAK,OAAO,KAAK,CAAC,CAAC;AACtE,WAAO;AAAA;AAAA,oDAEyC,OAAO,IAAI,KAAK,aAAa;AAAA;AAAA;AAAA;AAAA;AAAA,EAK/E;AACF;AAtEa,SACJ,SAAS;AAAA,MACZ,iBAAiB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAmDrB;AAAA,EADC,SAAS,EAAE,MAAM,OAAO,CAAC;AAAA,GApDf,SAqDX;AAKA;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,WAAW,kBAAkB,CAAC;AAAA,GAzD7C,SA0DX;AA1DW,WAAN;AAAA,EADN,cAAc,cAAc;AAAA,GAChB;","names":[]}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/header/Header.ts"],"sourcesContent":["import { LitElement, css, html, nothing } from 'lit';\r\nimport { customElement, property, state } from 'lit/decorators.js';\r\n\r\nimport { chevronIcon, closeIcon, menuIcon } from '../shared/icons';\r\nimport { BREAKPOINT_TABLET, buttonResetStyles, controlBaseStyles, dropdownPanelStyles, rootFontFamilyStyles } from '../shared/styles';\r\nimport type { LanguageChangedEventDetail } from './HeaderEvents';\r\n\r\n/**\r\n * The app-shell header bar — brand (image + title, or title alone) on the left, a `slot=\"menu\"`\r\n * for primary nav (e.g. `st-dropdown`/`st-menu-grid` mega-menus, or plain links) taking the\r\n * middle, and a `slot=\"utility\"` for account/app-switcher/theme controls on the right. Ported\r\n * from `SankhyaUI`'s React `Header` (a separate, unrelated marketing-site project) to this\r\n * package's Lit conventions and this workspace's actual needs — that source component takes an\r\n * `imageSrc` logo with no text fallback, but none of this suite's apps has a logo image today, so\r\n * `title` is the primary brand prop here and `brand-image-url` is optional, mirroring\r\n * `st-app-header`'s own brand/title split (this component's slotted-menu/utility shape is a\r\n * deliberately different, more generic surface than `st-app-header`'s fixed nav-links/user-menu\r\n * props — pick whichever fits a given app's header).\r\n *\r\n * Layout follows the source's `Header.css`: the menu starts 4rem after the brand, the utility\r\n * controls sit after a vertical divider, and below `BREAKPOINT_TABLET` (900px here; 768px in the\r\n * source) `menu`/`utility` collapse behind a hamburger toggle into a full-screen layer under the\r\n * toggle (closes on Escape or a click inside it), where the menu's `st-dropdown`s are switched to\r\n * `inline` so they open in the flow — the same two slotted elements just get repositioned by CSS\r\n * (`.mobile-panel`'s `display: contents` at desktop width vs. a real fixed-position box below\r\n * `BREAKPOINT_TABLET`), rather than the slots being duplicated in the template, since a shadow\r\n * root can only ever assign a given light-DOM child to the *first* slot of a given name.\r\n *\r\n * An optional `slot=\"brand-extra\"` sits right after the brand (e.g. an edition badge such as\r\n * \"🇮🇳 India Edition\"); unlike `menu`/`utility` it stays in the bar at every width.\r\n *\r\n * Also carries an optional built-in language switcher (`languages`/`currentLanguageCode`, fires\r\n * `language-change`) — ported from `st-app-header`'s own implementation verbatim rather than\r\n * rebuilt, since the source `Header`'s reference story shows an equivalent flag/language `Select`\r\n * as a first-class header utility. Hidden entirely when `languages` has fewer than two entries.\r\n * This component has no translation logic itself; the consuming app owns what a language `code`\r\n * means and which content it re-renders in response.\r\n */\r\n@customElement('st-header')\r\nexport class Header extends LitElement {\r\n static styles = css`\r\n ${controlBaseStyles}\r\n\r\n :host {\r\n display: flex;\r\n align-items: center;\r\n /* The containing block of an st-dropdown[mega] panel, which spans the bar. */\r\n position: relative;\r\n /* Spacing between brand, menu and utility controls is the rows' own margins (SankhyaUI's\r\n layout), not a flex gap. */\r\n gap: 0;\r\n /* !important on the box-model properties only: a shadow host's own :host rule always loses\r\n * to ANY rule the consuming page has for the same property on that element, regardless of\r\n * specificity (see st-footer's own padding/border-top for the same fix). Without\r\n * box-sizing: border-box pinned here, a page that also sets its own padding on this host\r\n * (e.g. a p-2 utility class) adds that padding on TOP of the fixed 64px height instead of\r\n * being absorbed inside it — which is exactly what happens in Template Hub, the one app that\r\n * doesn't load Tailwind Preflight (Preflight's own box-sizing: border-box reset is what\r\n * silently keeps every other app's header at the intended 64px). */\r\n box-sizing: border-box !important;\r\n padding: 0 2rem !important;\r\n height: 64px !important;\r\n background: var(--st-color-surface);\r\n border-bottom: 1px solid var(--st-color-border) !important;\r\n ${rootFontFamilyStyles}\r\n color: var(--st-color-text-strong);\r\n }\r\n\r\n :host([sticky]) {\r\n position: sticky;\r\n top: 0;\r\n z-index: 100;\r\n }\r\n\r\n :host([inverted]) {\r\n background: var(--st-color-text-strong);\r\n color: var(--st-color-on-solid);\r\n border-bottom-color: transparent;\r\n }\r\n\r\n :host([sticky]),\r\n :host([transparent]),\r\n :host([hide-on-scroll]) {\r\n transition:\r\n background-color 0.3s ease,\r\n color 0.3s ease,\r\n box-shadow 0.3s ease,\r\n border-color 0.3s ease,\r\n transform 0.3s ease;\r\n }\r\n\r\n /* Once the page has scrolled, a sticky/fixed header lifts off the content. */\r\n :host([scrolled][sticky]),\r\n :host([scrolled][transparent]),\r\n :host([scrolled][hide-on-scroll]) {\r\n box-shadow: 0 4px 16px var(--st-shadow-color-md);\r\n border-bottom-color: transparent !important;\r\n }\r\n\r\n /* transparent: fixed over the top of the page (e.g. a dark hero), see-through until scrolled. */\r\n :host([transparent]) {\r\n position: fixed;\r\n top: 0;\r\n left: 0;\r\n right: 0;\r\n z-index: 100;\r\n }\r\n\r\n :host([transparent]:not([scrolled]):not([mobile-open])) {\r\n background: transparent;\r\n border-bottom-color: transparent !important;\r\n color: var(--st-header-transparent-color, var(--st-color-on-solid));\r\n /* Read by st-menu-item / st-dropdown triggers in the bar (their panels reset them). */\r\n --st-nav-color: var(--st-header-transparent-color, var(--st-color-on-solid));\r\n --st-nav-hover-bg: color-mix(in oklch, currentColor 14%, transparent);\r\n }\r\n\r\n :host([transparent]:not([scrolled]):not([mobile-open])) .utility-row {\r\n border-left-color: color-mix(in oklch, currentColor 35%, transparent);\r\n }\r\n\r\n :host([transparent]:not([scrolled]):not([mobile-open])) .lang-trigger {\r\n color: inherit;\r\n }\r\n\r\n :host([transparent]:not([scrolled]):not([mobile-open])) .lang-trigger:hover,\r\n :host([transparent]:not([scrolled]):not([mobile-open])) .toggle:hover {\r\n background: color-mix(in oklch, currentColor 14%, transparent);\r\n }\r\n\r\n /* hide-on-scroll: slides away while scrolling down, back as soon as the user scrolls up. */\r\n :host([hide-on-scroll]:not([sticky]):not([transparent])) {\r\n position: sticky;\r\n top: 0;\r\n z-index: 100;\r\n }\r\n\r\n :host([scroll-hidden]:not([mobile-open])) {\r\n transform: translateY(-100%);\r\n box-shadow: none;\r\n }\r\n\r\n .brand {\r\n display: flex;\r\n align-items: center;\r\n gap: var(--st-space-10);\r\n flex: none;\r\n text-decoration: none;\r\n color: inherit;\r\n }\r\n\r\n .brand-mark {\r\n width: var(--st-size-28);\r\n height: var(--st-size-28);\r\n border-radius: var(--st-radius-sm);\r\n flex: none;\r\n object-fit: contain;\r\n }\r\n\r\n .brand-title {\r\n font-size: var(--st-text-xl);\r\n font-weight: var(--st-font-weight-bold);\r\n letter-spacing: var(--st-tracking-tight);\r\n white-space: nowrap;\r\n }\r\n\r\n /* Optional slot=\"brand-extra\" (e.g. an edition badge) right after the brand. Outside the\r\n mobile panel, so it stays beside the logo at every width; no box at all when empty. */\r\n .brand-extra {\r\n display: flex;\r\n align-items: center;\r\n gap: var(--st-space-8);\r\n flex: none;\r\n margin-left: var(--st-space-10);\r\n white-space: nowrap;\r\n }\r\n\r\n .brand-extra.empty {\r\n display: none;\r\n }\r\n\r\n /* Desktop: a transparent pass-through so .menu-row/.utility-row lay out directly as :host's\r\n own flex children. Mobile (see below) turns this into the actual overlay box. */\r\n .mobile-panel {\r\n display: contents;\r\n }\r\n\r\n /* Desktop layout from SankhyaUI's Header: the menu starts 4rem after the brand and takes the\r\n free width; the utility controls sit after a vertical divider. Between 901px and 1200px the\r\n gaps tighten so the menu still fits down to the 900px hamburger breakpoint. */\r\n .menu-row {\r\n flex: 1;\r\n display: flex;\r\n align-items: center;\r\n gap: 1.5rem;\r\n min-width: 0;\r\n margin-left: 4rem;\r\n }\r\n\r\n .utility-row {\r\n flex: none;\r\n display: flex;\r\n align-items: center;\r\n gap: 1rem;\r\n margin-left: 1.5rem;\r\n padding-left: 1.5rem;\r\n border-left: 1px solid var(--st-color-border);\r\n }\r\n\r\n :host([inverted]) .utility-row {\r\n border-left-color: currentColor;\r\n }\r\n\r\n .utility-row.empty {\r\n display: none;\r\n }\r\n\r\n @media (max-width: 1200px) {\r\n :host {\r\n padding: 0 1rem !important;\r\n }\r\n\r\n .menu-row {\r\n margin-left: 0.5rem;\r\n }\r\n\r\n .utility-row {\r\n margin-left: 0.5rem;\r\n padding-left: 0.5rem;\r\n }\r\n }\r\n\r\n @keyframes st-header-fade-in {\r\n from {\r\n opacity: 0;\r\n }\r\n to {\r\n opacity: 1;\r\n }\r\n }\r\n\r\n .toggle {\r\n display: none;\r\n align-items: center;\r\n justify-content: center;\r\n flex: none;\r\n position: relative;\r\n z-index: 1002;\r\n width: var(--st-size-32);\r\n height: var(--st-size-32);\r\n margin-left: auto;\r\n padding: 0.5rem;\r\n border: 0;\r\n border-radius: var(--st-radius-sm);\r\n background: transparent;\r\n color: inherit;\r\n cursor: pointer;\r\n }\r\n\r\n .toggle:hover {\r\n background: var(--st-color-hover);\r\n }\r\n\r\n .lang-menu {\r\n position: relative;\r\n flex: none;\r\n }\r\n\r\n .lang-trigger {\r\n ${buttonResetStyles}\r\n display: flex;\r\n align-items: center;\r\n gap: var(--st-space-4);\r\n height: var(--st-size-32);\r\n padding: 0 var(--st-space-8);\r\n border-radius: var(--st-radius-sm);\r\n font-size: var(--st-text-base);\r\n font-weight: var(--st-font-weight-semibold);\r\n color: var(--st-color-text-muted);\r\n }\r\n\r\n .lang-trigger:hover {\r\n background: var(--st-color-hover);\r\n color: var(--st-color-text-strong);\r\n }\r\n\r\n .lang-dropdown {\r\n ${dropdownPanelStyles}\r\n min-width: 140px;\r\n }\r\n\r\n .lang-option {\r\n ${buttonResetStyles}\r\n display: block;\r\n width: 100%;\r\n padding: var(--st-space-10) var(--st-space-14);\r\n font-size: var(--st-text-base);\r\n font-weight: var(--st-font-weight-semibold);\r\n text-align: left;\r\n color: inherit;\r\n }\r\n\r\n .lang-option:hover {\r\n background: var(--st-color-hover);\r\n }\r\n\r\n .lang-option.active {\r\n color: var(--st-color-accent-text);\r\n }\r\n\r\n /* Hamburger layout from SankhyaUI's Header: a full-screen layer under the toggle, menu above\r\n the utility controls, the menu's dropdowns opening in the flow (see syncInlineDropdowns). */\r\n @media (max-width: ${BREAKPOINT_TABLET}px) {\r\n :host {\r\n padding: 0 1rem !important;\r\n }\r\n\r\n .mobile-panel {\r\n display: none;\r\n }\r\n\r\n .toggle {\r\n display: inline-flex;\r\n }\r\n\r\n :host([mobile-open]) .mobile-panel {\r\n display: flex;\r\n flex-direction: column;\r\n gap: 2rem;\r\n position: fixed;\r\n inset: 0;\r\n background: var(--st-color-surface);\r\n padding: 5rem 1.5rem 2rem;\r\n overflow-y: auto;\r\n z-index: 1001;\r\n animation: st-header-fade-in 0.3s ease;\r\n }\r\n\r\n :host([mobile-open]) .menu-row,\r\n :host([mobile-open]) .utility-row {\r\n flex-direction: column;\r\n align-items: stretch;\r\n gap: 1.5rem;\r\n margin-left: 0;\r\n }\r\n\r\n :host([mobile-open]) .utility-row {\r\n padding: 1.5rem 0 0;\r\n border-left: 0;\r\n border-top: 1px solid var(--st-color-border);\r\n }\r\n\r\n /* Apps usually slot one flex-row wrapper per slot; stack its items as the source does. */\r\n :host([mobile-open]) ::slotted([slot='menu']),\r\n :host([mobile-open]) ::slotted([slot='utility']) {\r\n flex-direction: column !important;\r\n align-items: stretch !important;\r\n margin: 0 !important;\r\n }\r\n }\r\n\r\n /* The same collapsed layout, switched on by script when the menu no longer fits the bar at\r\n desktop width (see evaluateFit) — without it the menu spills over the utility controls. */\r\n :host([compact]) .mobile-panel {\r\n display: none;\r\n }\r\n\r\n :host([compact]) .toggle {\r\n display: inline-flex;\r\n }\r\n\r\n :host([compact][mobile-open]) .mobile-panel {\r\n display: flex;\r\n flex-direction: column;\r\n gap: 2rem;\r\n position: fixed;\r\n inset: 0;\r\n background: var(--st-color-surface);\r\n padding: 5rem 1.5rem 2rem;\r\n overflow-y: auto;\r\n z-index: 1001;\r\n animation: st-header-fade-in 0.3s ease;\r\n }\r\n\r\n :host([compact][mobile-open]) .menu-row,\r\n :host([compact][mobile-open]) .utility-row {\r\n flex-direction: column;\r\n align-items: stretch;\r\n gap: 1.5rem;\r\n margin-left: 0;\r\n }\r\n\r\n :host([compact][mobile-open]) .utility-row {\r\n padding: 1.5rem 0 0;\r\n border-left: 0;\r\n border-top: 1px solid var(--st-color-border);\r\n }\r\n\r\n :host([compact][mobile-open]) ::slotted([slot='menu']),\r\n :host([compact][mobile-open]) ::slotted([slot='utility']) {\r\n flex-direction: column !important;\r\n align-items: stretch !important;\r\n margin: 0 !important;\r\n }\r\n\r\n @media (prefers-reduced-motion: reduce) {\r\n :host,\r\n .mobile-panel {\r\n animation: none !important;\r\n transition: none !important;\r\n }\r\n }\r\n `;\r\n\r\n @property({ type: String })\r\n title = '';\r\n\r\n /** Optional logo image URL, shown before `title`. Omitted entirely when empty — none of this suite's apps has one today. Matches the source component's `imageSrc` (renamed here to pair with `title`/`logoHref`, since this component's only image use is the brand mark). */\r\n @property({ type: String, attribute: 'brand-image-url' })\r\n brandImageUrl = '';\r\n\r\n /** `alt` text for the brand image — matches the source component's `altText` (default `'Logo'`). */\r\n @property({ type: String, attribute: 'alt-text' })\r\n altText = 'Logo';\r\n\r\n /** Wraps the brand in an `<a>` when set (e.g. `/`); a plain non-link `<div>` otherwise. */\r\n @property({ type: String })\r\n logoHref = '';\r\n\r\n /** `target` for the brand `<a>` — matches the source component's `logoTarget` (default `_self`). No effect when `logoHref` isn't set. */\r\n @property({ type: String, attribute: 'logo-target' })\r\n logoTarget = '_self';\r\n\r\n /** Extra class(es) appended to the brand link/div — matches the source component's `logoClassName`. */\r\n @property({ type: String, attribute: 'logo-class-name' })\r\n logoClassName = '';\r\n\r\n /** Inverts the header's color roles (light-on-dark instead of dark-on-light) — matches the\r\n * source component's `inverted` (from its shared `BaseProps`). */\r\n @property({ type: Boolean, reflect: true })\r\n inverted = false;\r\n\r\n @property({ type: Boolean, reflect: true })\r\n sticky = false;\r\n\r\n /**\r\n * Fixes the header over the top of the page and makes it see-through, with light text\r\n * (`--st-header-transparent-color`), until the page scrolls past `scroll-threshold` — for a\r\n * header laid over a dark hero. It then takes its normal background and a shadow. The page\r\n * content starts under it, so the first section should leave room for the 64px bar.\r\n */\r\n @property({ type: Boolean, reflect: true })\r\n transparent = false;\r\n\r\n /** Slides the header out of view while the page scrolls down and back in when it scrolls up. */\r\n @property({ type: Boolean, reflect: true, attribute: 'hide-on-scroll' })\r\n hideOnScroll = false;\r\n\r\n /** Scroll distance in px after which the header counts as `scrolled`. */\r\n @property({ type: Number, attribute: 'scroll-threshold' })\r\n scrollThreshold = 8;\r\n\r\n /** True once the page has scrolled past `scroll-threshold`; reflected so pages can style `st-header[scrolled]`. Set by the header, never from outside. */\r\n @property({ type: Boolean, reflect: true })\r\n scrolled = false;\r\n\r\n /** True while `hide-on-scroll` has slid the header away. Set by the header, never from outside. */\r\n @property({ type: Boolean, reflect: true, attribute: 'scroll-hidden' })\r\n scrollHidden = false;\r\n\r\n private lastScrollY = 0;\r\n private scrollFrame = 0;\r\n\r\n private onScroll = (): void => {\r\n if (this.scrollFrame) return;\r\n this.scrollFrame = requestAnimationFrame(() => {\r\n this.scrollFrame = 0;\r\n const y = Math.max(0, window.scrollY);\r\n this.scrolled = y > this.scrollThreshold;\r\n if (this.hideOnScroll) {\r\n const delta = y - this.lastScrollY;\r\n // Ignore tiny jitters; never hide while still at the top of the page or with the menu open.\r\n if (Math.abs(delta) > 4) this.scrollHidden = delta > 0 && y > this.offsetHeight && !this.mobileOpen;\r\n } else {\r\n this.scrollHidden = false;\r\n }\r\n this.lastScrollY = y;\r\n });\r\n };\r\n\r\n /**\r\n * Language switcher options, e.g. `[{ code: 'en', label: 'English' }, ...]` — hidden entirely\r\n * when empty or when only one language is offered (same convention as `st-app-header`'s\r\n * `languages`, which this reuses verbatim). This component has no translation logic itself —\r\n * selecting an option fires `language-change` (detail: `{ code }`), and the consuming app owns\r\n * what `code` actually means and which content it re-renders.\r\n */\r\n @property({ attribute: false })\r\n languages: { code: string; label: string }[] = [];\r\n\r\n @property({ type: String, attribute: 'current-language-code' })\r\n currentLanguageCode = '';\r\n\r\n @property({ type: String, attribute: 'language-menu-label' })\r\n languageMenuLabel = 'Language';\r\n\r\n /** Internal open/closed state for the mobile nav overlay, reflected to an attribute purely so\r\n * the `:host([mobile-open])` CSS selector above can react to it — not meant to be set from\r\n * outside. */\r\n @property({ type: Boolean, reflect: true, attribute: 'mobile-open' })\r\n mobileOpen = false;\r\n\r\n /** True while the menu doesn't fit the bar at the current width: the header then shows the same\r\n * hamburger layout it uses on a narrow screen. Set by `evaluateFit`, never from outside. */\r\n @property({ type: Boolean, reflect: true })\r\n compact = false;\r\n\r\n @state() private languageMenuOpen = false;\r\n\r\n /** Whether `slot=\"utility\"` has content — an empty utility row (and its divider) is hidden. */\r\n @state() private hasUtility = false;\r\n\r\n /** Whether `slot=\"brand-extra\"` has content — an empty one takes no room beside the brand. */\r\n @state() private hasBrandExtra = false;\r\n\r\n private resizeObserver?: ResizeObserver;\r\n\r\n /** Matches below BREAKPOINT_TABLET, where the hamburger layout is always on. */\r\n private narrowQuery?: MediaQueryList;\r\n\r\n /** The dropdowns this header switched to `inline` — only these are switched back, so a caller's\r\n * own `inline` setting is left alone. */\r\n private inlinedDropdowns = new Set<HTMLElement & { inline: boolean; open: boolean }>();\r\n\r\n /** While the hamburger layout is on, the dropdowns in the header open in the flow of the\r\n * full-screen panel instead of floating over it (SankhyaUI's touch-device layout). */\r\n private syncInlineDropdowns = (): void => {\r\n const collapsed = this.compact || !!this.narrowQuery?.matches;\r\n const dropdowns = Array.from(this.querySelectorAll('st-dropdown')) as (HTMLElement & { inline: boolean; open: boolean })[];\r\n if (collapsed) {\r\n for (const dropdown of dropdowns) {\r\n if (dropdown.inline) continue;\r\n dropdown.inline = true;\r\n this.inlinedDropdowns.add(dropdown);\r\n }\r\n } else {\r\n for (const dropdown of this.inlinedDropdowns) dropdown.inline = false;\r\n this.inlinedDropdowns.clear();\r\n }\r\n };\r\n\r\n private onBrandExtraSlotChange = (event: Event): void => {\r\n this.hasBrandExtra = (event.target as HTMLSlotElement).assignedElements({ flatten: true }).length > 0;\r\n this.evaluateFit();\r\n };\r\n\r\n private onUtilitySlotChange = (event: Event): void => {\r\n this.hasUtility = (event.target as HTMLSlotElement).assignedElements({ flatten: true }).length > 0;\r\n this.evaluateFit();\r\n };\r\n\r\n private onMenuSlotChange = (): void => {\r\n this.evaluateFit();\r\n this.syncInlineDropdowns();\r\n };\r\n\r\n protected updated(changed: Map<string, unknown>): void {\r\n if (changed.has('compact')) this.syncInlineDropdowns();\r\n // A mega dropdown's drill-down panel would otherwise still cover the menu next time it opens.\r\n if (changed.has('mobileOpen') && !this.mobileOpen) {\r\n for (const dropdown of this.inlinedDropdowns) dropdown.open = false;\r\n }\r\n }\r\n\r\n /** The bar width at which the menu last overflowed — the bar only expands again once it is\r\n * clearly wider than this, so it can't flip back and forth right at the threshold. */\r\n private collapsedAtWidth = 0;\r\n\r\n /** Collapses to the hamburger layout when the slotted menu overflows its row, and expands again\r\n * once there is room. The collapsed layout hides the menu, so the room it needs can't be\r\n * measured then; the width remembered when it collapsed stands in for it. */\r\n private evaluateFit = (): void => {\r\n const width = this.clientWidth;\r\n if (this.compact) {\r\n if (width > this.collapsedAtWidth + 24) {\r\n this.compact = false;\r\n this.mobileOpen = false;\r\n void this.updateComplete.then(this.evaluateFit);\r\n }\r\n return;\r\n }\r\n if (this.menuOverflows()) {\r\n this.collapsedAtWidth = width;\r\n this.compact = true;\r\n }\r\n };\r\n\r\n /** Whether the visible menu items reach past the right edge of the menu row. Measured from the\r\n * items' own boxes (the slotted elements and their direct children), not the row's scrollWidth:\r\n * a closed dropdown's absolutely positioned panel also counts towards scrollWidth, which would\r\n * report overflow at any width. */\r\n private menuOverflows(): boolean {\r\n const row = this.renderRoot.querySelector<HTMLElement>('.menu-row');\r\n const slot = this.renderRoot.querySelector<HTMLSlotElement>('slot[name=\"menu\"]');\r\n if (!row || !slot) return false;\r\n const limit = row.getBoundingClientRect().right + 1;\r\n let right = 0;\r\n for (const el of slot.assignedElements({ flatten: true })) {\r\n for (const box of [el, ...Array.from(el.children)]) {\r\n const rect = box.getBoundingClientRect();\r\n if (rect.width > 0) right = Math.max(right, rect.right);\r\n }\r\n }\r\n return right > limit;\r\n }\r\n\r\n protected firstUpdated(): void {\r\n this.resizeObserver = new ResizeObserver(this.evaluateFit);\r\n this.resizeObserver.observe(this);\r\n this.evaluateFit();\r\n this.syncInlineDropdowns();\r\n }\r\n\r\n connectedCallback(): void {\r\n super.connectedCallback();\r\n window.addEventListener('keydown', this.closeOnEscape);\r\n window.addEventListener('click', this.closeLanguageMenuOnOutsideClick);\r\n window.addEventListener('scroll', this.onScroll, { passive: true });\r\n this.onScroll();\r\n this.narrowQuery = window.matchMedia(`(max-width: ${BREAKPOINT_TABLET}px)`);\r\n this.narrowQuery.addEventListener('change', this.syncInlineDropdowns);\r\n // Menus often render their dropdowns after the header (e.g. once the user's role loads),\r\n // deeper than a slotchange reports.\r\n this.lightDomObserver = new MutationObserver(this.syncInlineDropdowns);\r\n this.lightDomObserver.observe(this, { childList: true, subtree: true });\r\n }\r\n\r\n private lightDomObserver?: MutationObserver;\r\n\r\n disconnectedCallback(): void {\r\n this.lightDomObserver?.disconnect();\r\n this.narrowQuery?.removeEventListener('change', this.syncInlineDropdowns);\r\n this.resizeObserver?.disconnect();\r\n window.removeEventListener('keydown', this.closeOnEscape);\r\n window.removeEventListener('click', this.closeLanguageMenuOnOutsideClick);\r\n window.removeEventListener('scroll', this.onScroll);\r\n if (this.scrollFrame) cancelAnimationFrame(this.scrollFrame);\r\n this.scrollFrame = 0;\r\n super.disconnectedCallback();\r\n }\r\n\r\n private closeOnEscape = (event: KeyboardEvent): void => {\r\n if (this.mobileOpen && event.key === 'Escape') this.mobileOpen = false;\r\n if (this.languageMenuOpen && event.key === 'Escape') this.languageMenuOpen = false;\r\n };\r\n\r\n private closeLanguageMenuOnOutsideClick = (event: Event): void => {\r\n if (this.languageMenuOpen && !event.composedPath().includes(this)) this.languageMenuOpen = false;\r\n };\r\n\r\n private renderLanguageMenu() {\r\n if (this.languages.length < 2) return nothing;\r\n const current = this.languages.find((lang) => lang.code === this.currentLanguageCode);\r\n return html`\r\n <div class=\"lang-menu\" part=\"language-menu\">\r\n <button\r\n part=\"language-menu-trigger\"\r\n type=\"button\"\r\n class=\"lang-trigger\"\r\n aria-label=${this.languageMenuLabel}\r\n aria-expanded=${this.languageMenuOpen}\r\n @click=${(event: Event) => {\r\n event.stopPropagation();\r\n this.languageMenuOpen = !this.languageMenuOpen;\r\n }}\r\n >\r\n <span part=\"language-menu-current\">${current?.label ?? this.languageMenuLabel}</span>\r\n ${chevronIcon('down', 10)}\r\n </button>\r\n ${this.languageMenuOpen\r\n ? html`\r\n <div part=\"language-dropdown\" class=\"lang-dropdown\">\r\n ${this.languages.map(\r\n (lang) => html`\r\n <button\r\n part=\"language-option\"\r\n type=\"button\"\r\n class=\"lang-option ${lang.code === this.currentLanguageCode ? 'active' : ''}\"\r\n aria-current=${lang.code === this.currentLanguageCode}\r\n @click=${() => this.onLanguageSelect(lang.code)}\r\n >\r\n ${lang.label}\r\n </button>\r\n `\r\n )}\r\n </div>\r\n `\r\n : nothing}\r\n </div>\r\n `;\r\n }\r\n\r\n private onLanguageSelect(code: string): void {\r\n this.languageMenuOpen = false;\r\n if (code === this.currentLanguageCode) return;\r\n this.dispatchEvent(new CustomEvent<LanguageChangedEventDetail>('language-change', { detail: { code }, bubbles: true, composed: true }));\r\n }\r\n\r\n private renderBrand() {\r\n const content = html`\r\n ${this.brandImageUrl ? html`<img part=\"brand-mark\" class=\"brand-mark\" src=${this.brandImageUrl} alt=${this.altText} /> ` : nothing}\r\n <span part=\"brand-title\" class=\"brand-title\">${this.title}</span>\r\n `;\r\n return this.logoHref\r\n ? html`<a part=\"brand\" class=\"brand ${this.logoClassName}\" href=${this.logoHref} target=${this.logoTarget}>${content}</a>`\r\n : html`<div part=\"brand\" class=\"brand ${this.logoClassName}\">${content}</div>`;\r\n }\r\n\r\n render() {\r\n return html`\r\n ${this.renderBrand()}\r\n <div class=\"brand-extra ${this.hasBrandExtra ? '' : 'empty'}\" part=\"brand-extra\"><slot name=\"brand-extra\" @slotchange=${this.onBrandExtraSlotChange}></slot></div>\r\n\r\n <div class=\"mobile-panel\" part=\"mobile-panel\" @click=${() => (this.mobileOpen = false)}>\r\n <div class=\"menu-row\" part=\"menu-row\"><slot name=\"menu\" @slotchange=${this.onMenuSlotChange}></slot></div>\r\n <div class=\"utility-row ${this.hasUtility || this.languages.length >= 2 ? '' : 'empty'}\" part=\"utility-row\">\r\n ${this.renderLanguageMenu()}<slot name=\"utility\" @slotchange=${this.onUtilitySlotChange}></slot>\r\n </div>\r\n </div>\r\n\r\n <button\r\n part=\"toggle\"\r\n type=\"button\"\r\n class=\"toggle\"\r\n aria-label=${this.mobileOpen ? 'Close menu' : 'Open menu'}\r\n aria-expanded=${this.mobileOpen}\r\n @click=${() => (this.mobileOpen = !this.mobileOpen)}\r\n >\r\n ${this.mobileOpen ? closeIcon() : menuIcon()}\r\n </button>\r\n `;\r\n }\r\n}\r\n"],"mappings":"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","names":[]}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/icon-button/IconButton.ts"],"sourcesContent":["import { LitElement, css, html } from 'lit';\r\nimport { customElement, property } from 'lit/decorators.js';\r\n\r\nimport { buttonResetStyles, controlBaseStyles, rootFontFamilyStyles } from '../shared/styles';\r\n\r\n/**\r\n * A small, icon-only action button — ported from `SankhyaUI`'s React `IconButton` (a separate,\r\n * unrelated marketing-site project; that source takes an iconify string `icon` prop, this package\r\n * has no iconify dependency, so the icon is default-slotted content instead, same convention as\r\n * `st-dropdown`/`st-menu-grid-item`'s `slot=\"icon\"`).\r\n *\r\n * Fires a plain native `click` — no custom event, since a caller just wants an ordinary button.\r\n */\r\n@customElement('st-icon-button')\r\nexport class IconButton extends LitElement {\r\n static styles = css`\r\n ${controlBaseStyles}\r\n\r\n :host {\r\n display: inline-flex;\r\n ${rootFontFamilyStyles}\r\n }\r\n\r\n button {\r\n ${buttonResetStyles}\r\n display: inline-flex;\r\n align-items: center;\r\n justify-content: center;\r\n width: var(--st-size-32);\r\n height: var(--st-size-32);\r\n border-radius: var(--st-radius-sm);\r\n color: var(--st-color-text-muted);\r\n }\r\n\r\n button:hover {\r\n background: var(--st-color-hover);\r\n color: var(--st-color-text-strong);\r\n }\r\n\r\n :host([disabled]) button {\r\n color: var(--st-color-text-muted);\r\n cursor: not-allowed;\r\n pointer-events: none;\r\n }\r\n `;\r\n\r\n /** Accessible name and tooltip — matches the source component's `ariaLabel` (renamed: modern\r\n * browsers already expose a native `ariaLabel` reflected property on every `Element`, so reusing\r\n * that exact name as a Lit reactive property would shadow it). Required for a control with no\r\n * visible text. */\r\n @property({ type: String })\r\n label = '';\r\n\r\n @property({ type: Boolean, reflect: true })\r\n disabled = false;\r\n\r\n render() {\r\n return html`\r\n <button part=\"button\" type=\"button\" aria-label=${this.label} title=${this.label} ?disabled=${this.disabled}>\r\n <slot></slot>\r\n </button>\r\n `;\r\n }\r\n}\r\n"],"mappings":";;;;;;;;;;AAAA,SAAS,YAAY,KAAK,YAAY;AACtC,SAAS,eAAe,gBAAgB;AAajC,IAAM,aAAN,cAAyB,WAAW;AAAA,EAApC;AAAA;AAqCL,iBAAQ;AAGR,oBAAW;AAAA;AAAA,EAEX,SAAS;AACP,WAAO;AAAA,uDAC4C,KAAK,KAAK,UAAU,KAAK,KAAK,cAAc,KAAK,QAAQ;AAAA;AAAA;AAAA;AAAA,EAI9G;AACF;AAjDa,WACJ,SAAS;AAAA,MACZ,iBAAiB;AAAA;AAAA;AAAA;AAAA,QAIf,oBAAoB;AAAA;AAAA;AAAA;AAAA,QAIpB,iBAAiB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AA2BvB;AAAA,EADC,SAAS,EAAE,MAAM,OAAO,CAAC;AAAA,GApCf,WAqCX;AAGA;AAAA,EADC,SAAS,EAAE,MAAM,SAAS,SAAS,KAAK,CAAC;AAAA,GAvC/B,WAwCX;AAxCW,aAAN;AAAA,EADN,cAAc,gBAAgB;AAAA,GAClB;","names":[]}
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|