@trendyol/baklava 3.4.0-beta.9 → 3.4.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/baklava-react.d.ts +262 -307
- package/dist/baklava-react.d.ts.map +1 -1
- package/dist/baklava-react.js +1 -1
- package/dist/baklava-react.js.map +3 -3
- package/dist/baklava-svelte.d.ts +807 -0
- package/dist/baklava-vue.d.ts +26 -24
- package/dist/baklava.d.ts +22 -19
- package/dist/baklava.d.ts.map +1 -1
- package/dist/baklava.js +1 -1
- package/dist/chunk-3IZAFXL6.js +59 -0
- package/dist/chunk-3IZAFXL6.js.map +7 -0
- package/dist/chunk-5NSAJ3SX.js +23 -0
- package/dist/chunk-5NSAJ3SX.js.map +7 -0
- package/dist/{chunk-YLNOOPBO.js → chunk-5QGKDF4O.js} +2 -2
- package/dist/chunk-7N7YHRPA.js +22 -0
- package/dist/chunk-7N7YHRPA.js.map +7 -0
- package/dist/chunk-BDTCJ2JC.js +16 -0
- package/dist/chunk-BDTCJ2JC.js.map +7 -0
- package/dist/{chunk-4BO66Y63.js → chunk-C2UDBDKV.js} +7 -6
- package/dist/chunk-C2UDBDKV.js.map +7 -0
- package/dist/chunk-HCSEQTUP.js +37 -0
- package/dist/chunk-HCSEQTUP.js.map +7 -0
- package/dist/chunk-IEFQ6PGY.js +80 -0
- package/dist/chunk-IEFQ6PGY.js.map +7 -0
- package/dist/chunk-IR2QY2VG.js +24 -0
- package/dist/chunk-IR2QY2VG.js.map +7 -0
- package/dist/chunk-JN5BKKQZ.js +14 -0
- package/dist/chunk-JN5BKKQZ.js.map +7 -0
- package/dist/{chunk-KIQZ3N7J.js → chunk-JTNWYMYZ.js} +2 -2
- package/dist/{chunk-2Q566BEQ.js → chunk-KYLWO3YR.js} +14 -14
- package/dist/chunk-KYLWO3YR.js.map +7 -0
- package/dist/{chunk-6PSDYX3J.js → chunk-LZ6VDMPM.js} +2 -2
- package/dist/chunk-M4E4CVZ4.js +18 -0
- package/dist/{chunk-M54AQSC3.js.map → chunk-M4E4CVZ4.js.map} +2 -2
- package/dist/components/accordion-group/accordion/bl-accordion.d.ts +1 -0
- package/dist/components/accordion-group/accordion/bl-accordion.d.ts.map +1 -1
- package/dist/components/accordion-group/accordion/bl-accordion.js +1 -1
- package/dist/components/accordion-group/bl-accordion-group.test.d.ts.map +1 -1
- package/dist/components/calendar/bl-calendar.d.ts.map +1 -1
- package/dist/components/calendar/bl-calendar.js +1 -1
- package/dist/components/calendar/bl-calendar.test.d.ts.map +1 -1
- package/dist/components/datepicker/bl-datepicker.d.ts.map +1 -1
- package/dist/components/datepicker/bl-datepicker.js +1 -1
- package/dist/components/dialog/bl-dialog.stories.js +1 -1
- package/dist/components/input/bl-input.js +1 -1
- package/dist/components/link/bl-link.d.ts +77 -0
- package/dist/components/link/bl-link.d.ts.map +1 -0
- package/dist/components/link/bl-link.js +2 -0
- package/dist/components/link/bl-link.js.map +7 -0
- package/dist/components/link/bl-link.stories.d.ts +31 -0
- package/dist/components/link/bl-link.stories.d.ts.map +1 -0
- package/dist/components/link/bl-link.stories.js +63 -0
- package/dist/components/link/bl-link.stories.js.map +7 -0
- package/dist/components/link/bl-link.test.d.ts +2 -0
- package/dist/components/link/bl-link.test.d.ts.map +1 -0
- package/dist/components/notification/bl-notification.stories.js +1 -1
- package/dist/components/pagination/bl-pagination.js +1 -1
- package/dist/components/select/bl-select.d.ts.map +1 -1
- package/dist/components/select/bl-select.js +1 -1
- package/dist/components/select/option/bl-select-option.d.ts +5 -0
- package/dist/components/select/option/bl-select-option.d.ts.map +1 -1
- package/dist/components/select/option/bl-select-option.js +1 -1
- package/dist/components/stepper/bl-stepper-item.d.ts +107 -0
- package/dist/components/stepper/bl-stepper-item.d.ts.map +1 -0
- package/dist/components/stepper/bl-stepper-item.js +2 -0
- package/dist/components/stepper/bl-stepper-item.js.map +7 -0
- package/dist/components/stepper/bl-stepper-item.test.d.ts +2 -0
- package/dist/components/stepper/bl-stepper-item.test.d.ts.map +1 -0
- package/dist/components/stepper/bl-stepper.d.ts +46 -0
- package/dist/components/stepper/bl-stepper.d.ts.map +1 -0
- package/dist/components/stepper/bl-stepper.js +2 -0
- package/dist/components/stepper/bl-stepper.js.map +7 -0
- package/dist/components/stepper/bl-stepper.stories.d.ts +23 -0
- package/dist/components/stepper/bl-stepper.stories.d.ts.map +1 -0
- package/dist/components/stepper/bl-stepper.stories.js +100 -0
- package/dist/components/stepper/bl-stepper.stories.js.map +7 -0
- package/dist/components/stepper/bl-stepper.test.d.ts +2 -0
- package/dist/components/stepper/bl-stepper.test.d.ts.map +1 -0
- package/dist/components/table/table-body/bl-table-body.d.ts +5 -1
- package/dist/components/table/table-body/bl-table-body.d.ts.map +1 -1
- package/dist/components/table/table-body/bl-table-body.js +1 -1
- package/dist/components/table/table-cell/bl-table-cell.js +1 -1
- package/dist/components/table/table-header-cell/bl-table-header-cell.js +1 -1
- package/dist/components/table/table-row/bl-table-row.js +1 -1
- package/dist/custom-elements.json +10157 -2901
- package/dist/generated/locales/ar.d.ts +2 -0
- package/dist/generated/locales/ar.d.ts.map +1 -1
- package/dist/generated/locales/ar.js +1 -1
- package/dist/generated/locales/ar.js.map +2 -2
- package/dist/generated/locales/ro.d.ts +2 -0
- package/dist/generated/locales/ro.d.ts.map +1 -1
- package/dist/generated/locales/ro.js +1 -1
- package/dist/generated/locales/ro.js.map +2 -2
- package/dist/generated/locales/tr.d.ts +2 -0
- package/dist/generated/locales/tr.d.ts.map +1 -1
- package/dist/generated/locales/tr.js +1 -1
- package/dist/generated/locales/tr.js.map +2 -2
- package/dist/mixins/datepicker-calendar-mixin/datepicker-calendar-mixin.d.ts +4 -0
- package/dist/mixins/datepicker-calendar-mixin/datepicker-calendar-mixin.d.ts.map +1 -1
- package/dist/utilities/format-to-date-array.d.ts +1 -1
- package/dist/utilities/format-to-date-array.d.ts.map +1 -1
- package/package.json +3 -5
- package/dist/chunk-2P3LD4HV.js +0 -80
- package/dist/chunk-2P3LD4HV.js.map +0 -7
- package/dist/chunk-2Q566BEQ.js.map +0 -7
- package/dist/chunk-4BO66Y63.js.map +0 -7
- package/dist/chunk-7KND5OUR.js +0 -59
- package/dist/chunk-7KND5OUR.js.map +0 -7
- package/dist/chunk-EXUCTLBU.js +0 -24
- package/dist/chunk-EXUCTLBU.js.map +0 -7
- package/dist/chunk-H6EUN6QV.js +0 -22
- package/dist/chunk-H6EUN6QV.js.map +0 -7
- package/dist/chunk-HEB5ZFIH.js +0 -2
- package/dist/chunk-HEB5ZFIH.js.map +0 -7
- package/dist/chunk-M54AQSC3.js +0 -7
- /package/dist/{chunk-YLNOOPBO.js.map → chunk-5QGKDF4O.js.map} +0 -0
- /package/dist/{chunk-KIQZ3N7J.js.map → chunk-JTNWYMYZ.js.map} +0 -0
- /package/dist/{chunk-6PSDYX3J.js.map → chunk-LZ6VDMPM.js.map} +0 -0
|
@@ -0,0 +1,63 @@
|
|
|
1
|
+
import{a as i}from"../../chunk-M4E4CVZ4.js";import{a as t}from"../../chunk-DINNT5P2.js";import{b as r}from"../../chunk-4OT5AMS5.js";import"../../chunk-BWWXE4SL.js";var o="https://www.figma.com/design/RrcLH0mWpIUy4vwuTlDeKN/Baklava-Design-Guide?node-id=23617-1414",l="https://github.com/Trendyol/baklava/blob/main/src/components/link/docs/ADR/link-component-implementation.md",a={title:"Components/Link",component:"bl-link",parameters:{chromatic:{viewports:[1e3]},controls:{exclude:["content"]},docs:{description:{component:`<div class="bl-docs-container"><p class="bl-docs-description">The Link component is used for navigation between pages or to external URLs. It supports all native anchor tag attributes and provides additional styling variants. When not using the standalone variant, you can provide a custom icon using the icon slot.</p><div class="bl-docs-links" style="display: flex; gap: var(--bl-size-2xs); margin-top: var(--bl-size-m);"><bl-badge icon="document" style="--bl-badge-background: var(--bl-color-surface-hover)"><bl-link variant='inline' href='`+l+`' target='_blank'>ADR</bl-link></bl-badge><bl-badge icon="puzzle" style="--bl-badge-background: var(--bl-color-surface-hover)"><bl-link variant='inline' href='`+o+"' target='_blank'>Figma</bl-link></bl-badge></div></div>"}}},decorators:[i],argTypes:{href:{control:"text",description:"URL that the hyperlink points to",table:{type:{summary:"string"}}},variant:{control:{type:"select"},options:["inline","standalone"],description:"Link variant",table:{type:{summary:"LinkVariant"},defaultValue:{summary:"inline"}}},size:{control:{type:"select"},options:["small","medium","large"],description:"Link size (only applies to standalone variant)",table:{type:{summary:"LinkSize"},defaultValue:{summary:"medium"}}},kind:{control:{type:"select"},options:["primary","neutral"],description:"Link kind (only applies to standalone variant)",table:{type:{summary:"LinkKind"},defaultValue:{summary:"primary"}}},target:{control:{type:"select"},options:["_self","_blank","_parent","_top"],description:"Where to display the linked URL",table:{type:{summary:"HTMLAnchorElement['target']"},defaultValue:{summary:"_self"}}},rel:{control:"text",description:"Relationship between documents (e.g., noopener noreferrer)",table:{type:{summary:"HTMLAnchorElement['rel']"}}},hreflang:{control:"text",description:"Language of the linked document",table:{type:{summary:"HTMLAnchorElement['hreflang']"}}},type:{control:"text",description:"MIME type of the linked document",table:{type:{summary:"HTMLAnchorElement['type']"}}},referrerPolicy:{control:{type:"select"},options:["no-referrer","no-referrer-when-downgrade","origin","origin-when-cross-origin","same-origin","strict-origin","strict-origin-when-cross-origin","unsafe-url"],description:"Referrer policy for the link",table:{type:{summary:"HTMLAnchorElement['referrerPolicy']"}}},download:{control:"text",description:"Whether to download the resource instead of navigating to it",table:{type:{summary:"HTMLAnchorElement['download']"}}},ping:{control:"text",description:"URLs to be notified when following the link",table:{type:{summary:"HTMLAnchorElement['ping']"}}},"aria-label":{control:"text",description:"Aria label for accessibility",table:{type:{summary:"string"}}},icon:{control:"text",description:"Icon name for custom icon (only applies to non-standalone variants)",table:{type:{summary:"string"}}}}},d=a,n=e=>r`
|
|
2
|
+
<bl-link
|
|
3
|
+
href=${t(e.href)}
|
|
4
|
+
variant=${t(e.variant)}
|
|
5
|
+
size=${t(e.size)}
|
|
6
|
+
kind=${t(e.kind)}
|
|
7
|
+
target=${t(e.target)}
|
|
8
|
+
rel=${t(e.rel)}
|
|
9
|
+
hreflang=${t(e.hreflang)}
|
|
10
|
+
type=${t(e.type)}
|
|
11
|
+
referrerpolicy=${t(e.referrerPolicy)}
|
|
12
|
+
download=${t(e.download)}
|
|
13
|
+
ping=${t(e.ping)}
|
|
14
|
+
aria-label=${t(e["aria-label"])}
|
|
15
|
+
style=${t(e.customStyles)}
|
|
16
|
+
>
|
|
17
|
+
${e.content||"Link Text"}
|
|
18
|
+
${e.icon?r`<bl-icon name="${e.icon}" slot="icon"></bl-icon>`:""}
|
|
19
|
+
</bl-link>
|
|
20
|
+
`,m={args:{href:"/",content:"Link"},render:n},h={args:{href:"/",variant:"inline",content:"Link"},render:e=>r`
|
|
21
|
+
<div>
|
|
22
|
+
<bl-alert
|
|
23
|
+
variant="warning"
|
|
24
|
+
icon
|
|
25
|
+
style="margin-bottom: var(--bl-size-m);"
|
|
26
|
+
>
|
|
27
|
+
Inline variant should be used within a text container. Example:
|
|
28
|
+
<div style="margin-top: var(--bl-size-2xs);">
|
|
29
|
+
<p>Text with <bl-link variant="inline">a link</bl-link> inside.</p>
|
|
30
|
+
</div>
|
|
31
|
+
</bl-alert>
|
|
32
|
+
|
|
33
|
+
<p style="font-size: 16px; line-height: 1.5;">
|
|
34
|
+
This is a paragraph with a ${n(e)} in the text.
|
|
35
|
+
</p>
|
|
36
|
+
|
|
37
|
+
<p style="font-size: 14px; line-height: 1.5;">
|
|
38
|
+
This is a paragraph with a ${n(e)} in the text.
|
|
39
|
+
</p>
|
|
40
|
+
|
|
41
|
+
<p style="font-size: 12px; line-height: 1.5;">
|
|
42
|
+
This is a paragraph with a ${n(e)} in the text.
|
|
43
|
+
</p>
|
|
44
|
+
</div>
|
|
45
|
+
`},y={args:{href:"/",variant:"standalone",content:"Link"},render:n},g={args:{href:"/",content:"Link with Custom Icon",icon:"external_link"},render:n},b={args:{variant:"standalone"},render:()=>r`
|
|
46
|
+
<div style="display: flex; gap: 16px; align-items: center;">
|
|
47
|
+
${n({href:"/",variant:"standalone",size:"small",content:"Small"})}
|
|
48
|
+
${n({href:"/",variant:"standalone",size:"medium",content:"Medium"})}
|
|
49
|
+
${n({href:"/",variant:"standalone",size:"large",content:"Large"})}
|
|
50
|
+
</div>
|
|
51
|
+
`},f={args:{variant:"standalone"},render:()=>r`
|
|
52
|
+
<div style="display: flex; gap: 16px; align-items: center;">
|
|
53
|
+
${n({href:"/",variant:"standalone",kind:"primary",content:"Primary"})}
|
|
54
|
+
${n({href:"/",variant:"standalone",kind:"neutral",content:"Neutral"})}
|
|
55
|
+
</div>
|
|
56
|
+
`},u={args:{href:"https://example.com",target:"_blank",rel:"noopener noreferrer",hreflang:"en",type:"text/html",referrerPolicy:"no-referrer",download:"file.pdf",ping:"https://analytics.example.com",content:"External Link with Native Attributes"},render:n},v={args:{href:"/","aria-label":"View your profile settings",content:"Profile"},render:n},k={render:()=>r`
|
|
57
|
+
<div style="display: flex; gap: 16px; align-items: center;">
|
|
58
|
+
${n({href:"/",content:"Success Link",customStyles:"--bl-link-color: var(--bl-color-success); --bl-link-hover-color: var(--bl-color-success-highlight); --bl-link-active-color: var(--bl-color-success-highlight);"})}
|
|
59
|
+
${n({href:"/",content:"Warning Link",customStyles:"--bl-link-color: var(--bl-color-warning); --bl-link-hover-color: var(--bl-color-warning-highlight); --bl-link-active-color: var(--bl-color-warning-highlight);"})}
|
|
60
|
+
${n({href:"/",content:"Danger Link",customStyles:"--bl-link-color: var(--bl-color-danger); --bl-link-hover-color: var(--bl-color-danger-highlight); --bl-link-active-color: var(--bl-color-danger-highlight);"})}
|
|
61
|
+
</div>
|
|
62
|
+
`};export{v as AccessibleLink,g as CustomIconLink,k as CustomInlineColors,m as Default,h as InlineLink,f as KindVariants,u as NativeAnchorAttributes,b as SizeVariants,y as StandaloneLink,d as default};
|
|
63
|
+
//# sourceMappingURL=bl-link.stories.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../../src/components/link/bl-link.stories.ts"],
|
|
4
|
+
"sourcesContent": ["import type { Meta, StoryObj } from \"@storybook/web-components\";\nimport { html } from \"lit\";\nimport { ifDefined } from \"lit/directives/if-defined.js\";\nimport { centeredLayout } from \"../../utilities/chromatic-decorators\";\n\n\ninterface LinkArgs {\n href?: string;\n variant?: \"inline\" | \"standalone\";\n size?: \"small\" | \"medium\" | \"large\";\n kind?: \"primary\" | \"neutral\";\n target?: HTMLAnchorElement[\"target\"];\n rel?: HTMLAnchorElement[\"rel\"];\n hreflang?: HTMLAnchorElement[\"hreflang\"];\n type?: HTMLAnchorElement[\"type\"];\n referrerPolicy?: HTMLAnchorElement[\"referrerPolicy\"];\n download?: HTMLAnchorElement[\"download\"];\n ping?: HTMLAnchorElement[\"ping\"];\n \"aria-label\"?: string;\n content?: string;\n customStyles?: string;\n icon?: string;\n}\n\nconst FIGMA_LINK = \"https://www.figma.com/design/RrcLH0mWpIUy4vwuTlDeKN/Baklava-Design-Guide?node-id=23617-1414\";\nconst ADR_LINK = \"https://github.com/Trendyol/baklava/blob/main/src/components/link/docs/ADR/link-component-implementation.md\";\n\nconst meta: Meta<LinkArgs> = {\n title: \"Components/Link\",\n component: \"bl-link\",\n parameters: {\n chromatic: {\n viewports: [1000]\n },\n controls: {\n exclude: [\"content\"],\n },\n docs: {\n description: {\n component:\n \"<div class=\\\"bl-docs-container\\\">\" +\n \"<p class=\\\"bl-docs-description\\\">\" +\n \"The Link component is used for navigation between pages or to external URLs. \" +\n \"It supports all native anchor tag attributes and provides additional styling variants. \" +\n \"When not using the standalone variant, you can provide a custom icon using the icon slot.\" +\n \"</p>\" +\n\n \"<div class=\\\"bl-docs-links\\\" style=\\\"display: flex; gap: var(--bl-size-2xs); margin-top: var(--bl-size-m);\\\">\" +\n \"<bl-badge icon=\\\"document\\\" style=\\\"--bl-badge-background: var(--bl-color-surface-hover)\\\">\" +\n \"<bl-link variant='inline' href='\" + ADR_LINK + \"' target='_blank'>ADR</bl-link>\" +\n \"</bl-badge>\" +\n \"<bl-badge icon=\\\"puzzle\\\" style=\\\"--bl-badge-background: var(--bl-color-surface-hover)\\\">\" +\n \"<bl-link variant='inline' href='\" + FIGMA_LINK + \"' target='_blank'>Figma</bl-link>\" +\n \"</bl-badge>\" +\n \"</div>\" +\n \"</div>\",\n },\n },\n },\n decorators: [\n centeredLayout,\n ],\n argTypes: {\n href: {\n control: \"text\",\n description: \"URL that the hyperlink points to\",\n table: {\n type: { summary: \"string\" },\n },\n },\n variant: {\n control: { type: \"select\" },\n options: [\"inline\", \"standalone\"],\n description: \"Link variant\",\n table: {\n type: { summary: \"LinkVariant\" },\n defaultValue: { summary: \"inline\" },\n },\n },\n size: {\n control: { type: \"select\" },\n options: [\"small\", \"medium\", \"large\"],\n description: \"Link size (only applies to standalone variant)\",\n table: {\n type: { summary: \"LinkSize\" },\n defaultValue: { summary: \"medium\" },\n },\n },\n kind: {\n control: { type: \"select\" },\n options: [\"primary\", \"neutral\"],\n description: \"Link kind (only applies to standalone variant)\",\n table: {\n type: { summary: \"LinkKind\" },\n defaultValue: { summary: \"primary\" },\n },\n },\n target: {\n control: { type: \"select\" },\n options: [\"_self\", \"_blank\", \"_parent\", \"_top\"],\n description: \"Where to display the linked URL\",\n table: {\n type: { summary: \"HTMLAnchorElement['target']\" },\n defaultValue: { summary: \"_self\" },\n },\n },\n rel: {\n control: \"text\",\n description: \"Relationship between documents (e.g., noopener noreferrer)\",\n table: {\n type: { summary: \"HTMLAnchorElement['rel']\" },\n },\n },\n hreflang: {\n control: \"text\",\n description: \"Language of the linked document\",\n table: {\n type: { summary: \"HTMLAnchorElement['hreflang']\" },\n },\n },\n type: {\n control: \"text\",\n description: \"MIME type of the linked document\",\n table: {\n type: { summary: \"HTMLAnchorElement['type']\" },\n },\n },\n referrerPolicy: {\n control: { type: \"select\" },\n options: [\n \"no-referrer\",\n \"no-referrer-when-downgrade\",\n \"origin\",\n \"origin-when-cross-origin\",\n \"same-origin\",\n \"strict-origin\",\n \"strict-origin-when-cross-origin\",\n \"unsafe-url\",\n ],\n description: \"Referrer policy for the link\",\n table: {\n type: { summary: \"HTMLAnchorElement['referrerPolicy']\" },\n },\n },\n download: {\n control: \"text\",\n description: \"Whether to download the resource instead of navigating to it\",\n table: {\n type: { summary: \"HTMLAnchorElement['download']\" },\n },\n },\n ping: {\n control: \"text\",\n description: \"URLs to be notified when following the link\",\n table: {\n type: { summary: \"HTMLAnchorElement['ping']\" },\n },\n },\n \"aria-label\": {\n control: \"text\",\n description: \"Aria label for accessibility\",\n table: {\n type: { summary: \"string\" },\n },\n },\n icon: {\n control: \"text\",\n description: \"Icon name for custom icon (only applies to non-standalone variants)\",\n table: {\n type: { summary: \"string\" },\n },\n },\n },\n};\n\nexport default meta;\n\ntype Story = StoryObj<LinkArgs>;\n\nconst LinkTemplate = (args: LinkArgs) => html`\n <bl-link\n href=${ifDefined(args.href)}\n variant=${ifDefined(args.variant)}\n size=${ifDefined(args.size)}\n kind=${ifDefined(args.kind)}\n target=${ifDefined(args.target)}\n rel=${ifDefined(args.rel)}\n hreflang=${ifDefined(args.hreflang)}\n type=${ifDefined(args.type)}\n referrerpolicy=${ifDefined(args.referrerPolicy)}\n download=${ifDefined(args.download)}\n ping=${ifDefined(args.ping)}\n aria-label=${ifDefined(args[\"aria-label\"])}\n style=${ifDefined(args.customStyles)}\n >\n ${args.content || \"Link Text\"}\n ${args.icon ? html`<bl-icon name=\"${args.icon}\" slot=\"icon\"></bl-icon>` : \"\"}\n </bl-link>\n`;\n\nexport const Default: Story = {\n args: {\n href: \"/\",\n content: \"Link\",\n },\n render: LinkTemplate,\n};\n\nexport const InlineLink: Story = {\n args: {\n href: \"/\",\n variant: \"inline\",\n content: \"Link\",\n },\n render: (args) => html`\n <div>\n <bl-alert\n variant=\"warning\"\n icon\n style=\"margin-bottom: var(--bl-size-m);\"\n >\n Inline variant should be used within a text container. Example:\n <div style=\"margin-top: var(--bl-size-2xs);\">\n <p>Text with <bl-link variant=\"inline\">a link</bl-link> inside.</p>\n </div>\n </bl-alert>\n\n <p style=\"font-size: 16px; line-height: 1.5;\">\n This is a paragraph with a ${LinkTemplate(args)} in the text.\n </p>\n\n <p style=\"font-size: 14px; line-height: 1.5;\">\n This is a paragraph with a ${LinkTemplate(args)} in the text.\n </p>\n\n <p style=\"font-size: 12px; line-height: 1.5;\">\n This is a paragraph with a ${LinkTemplate(args)} in the text.\n </p>\n </div>\n `,\n};\n\nexport const StandaloneLink: Story = {\n args: {\n href: \"/\",\n variant: \"standalone\",\n content: \"Link\",\n },\n render: LinkTemplate,\n};\n\nexport const CustomIconLink: Story = {\n args: {\n href: \"/\",\n content: \"Link with Custom Icon\",\n icon: \"external_link\",\n },\n render: LinkTemplate,\n};\n\nexport const SizeVariants: Story = {\n args: {\n variant: \"standalone\",\n },\n render: () => html`\n <div style=\"display: flex; gap: 16px; align-items: center;\">\n ${LinkTemplate({ href: \"/\", variant: \"standalone\", size: \"small\", content: \"Small\" })}\n ${LinkTemplate({ href: \"/\", variant: \"standalone\", size: \"medium\", content: \"Medium\" })}\n ${LinkTemplate({ href: \"/\", variant: \"standalone\", size: \"large\", content: \"Large\" })}\n </div>\n `,\n};\n\nexport const KindVariants: Story = {\n args: {\n variant: \"standalone\",\n },\n render: () => html`\n <div style=\"display: flex; gap: 16px; align-items: center;\">\n ${LinkTemplate({ href: \"/\", variant: \"standalone\", kind: \"primary\", content: \"Primary\" })}\n ${LinkTemplate({ href: \"/\", variant: \"standalone\", kind: \"neutral\", content: \"Neutral\" })}\n </div>\n `,\n};\n\nexport const NativeAnchorAttributes: Story = {\n args: {\n href: \"https://example.com\",\n target: \"_blank\",\n rel: \"noopener noreferrer\",\n hreflang: \"en\",\n type: \"text/html\",\n referrerPolicy: \"no-referrer\",\n download: \"file.pdf\",\n ping: \"https://analytics.example.com\",\n content: \"External Link with Native Attributes\",\n },\n render: LinkTemplate,\n};\n\nexport const AccessibleLink: Story = {\n args: {\n href: \"/\",\n \"aria-label\": \"View your profile settings\",\n content: \"Profile\",\n\n },\n render: LinkTemplate,\n};\n\nexport const CustomInlineColors: Story = {\n render: () => html`\n <div style=\"display: flex; gap: 16px; align-items: center;\">\n ${LinkTemplate({\n href: \"/\",\n content: \"Success Link\",\n customStyles: \"--bl-link-color: var(--bl-color-success); --bl-link-hover-color: var(--bl-color-success-highlight); --bl-link-active-color: var(--bl-color-success-highlight);\"\n })}\n ${LinkTemplate({\n href: \"/\",\n content: \"Warning Link\",\n customStyles: \"--bl-link-color: var(--bl-color-warning); --bl-link-hover-color: var(--bl-color-warning-highlight); --bl-link-active-color: var(--bl-color-warning-highlight);\"\n })}\n ${LinkTemplate({\n href: \"/\",\n content: \"Danger Link\",\n customStyles: \"--bl-link-color: var(--bl-color-danger); --bl-link-hover-color: var(--bl-color-danger-highlight); --bl-link-active-color: var(--bl-color-danger-highlight);\"\n })}\n </div>\n `,\n};\n\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
|
+
"names": ["FIGMA_LINK", "ADR_LINK", "meta", "centeredLayout", "bl_link_stories_default", "LinkTemplate", "args", "x", "l", "Default", "InlineLink", "StandaloneLink", "CustomIconLink", "SizeVariants", "KindVariants", "NativeAnchorAttributes", "AccessibleLink", "CustomInlineColors"]
|
|
7
|
+
}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"bl-link.test.d.ts","sourceRoot":"","sources":["../../../src/components/link/bl-link.test.ts"],"names":[],"mappings":""}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import{
|
|
1
|
+
import{b as p}from"../../chunk-M4E4CVZ4.js";import{a as s}from"../../chunk-DINNT5P2.js";import{b as t}from"../../chunk-4OT5AMS5.js";import{e}from"../../chunk-BWWXE4SL.js";var A={title:"Components/Notification",component:"bl-notification",parameters:{chromatic:{viewports:[1e3]}},decorators:[p],argTypes:{duration:{control:"number",description:"Duration in seconds",defaultValue:7},caption:{control:"text",description:"Caption of the notification"},description:{control:"text",description:"Description of the notification. Required."},icon:{control:"text",defaultValue:"true",description:"Icon of the notification. If provided with a string, it will be used as an icon name. If provided with a boolean, it will use the default icon or no icon."},variant:{options:["info","warning","success","error"],default:"info",control:{type:"select"},description:"Variant of the notification"},permanent:{control:"boolean",defaultValue:!1,description:"If true, the notification will not have duration and will be removed when the user clicks on the close button."},primaryAction:{control:"object",description:"Primary action of the notification. onClick and label properties are required."},secondaryAction:{control:"object",description:"Secondary action of the notification. onClick and label properties are required."}},args:{noAnimation:!1,duration:20,caption:"Notification Caption",description:"Notification Description",icon:"true",variant:"info",permanent:!1,primaryAction:{label:"Primary Action",onClick(){}},secondaryAction:{label:"Secondary Action",onClick(){}}}},k=A,c=i=>{let o=document.querySelector("bl-notification");return o==null?void 0:o.addNotification(i)},b=i=>JSON.stringify(i,null,6),r=i=>t`
|
|
2
2
|
<bl-notification
|
|
3
3
|
?no-animation=${i.noAnimation}
|
|
4
4
|
duration=${s(i.duration)}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{a}from"../../chunk-P4S537UY.js";import"../../chunk-
|
|
1
|
+
import{a}from"../../chunk-P4S537UY.js";import"../../chunk-KYLWO3YR.js";import"../../chunk-5NSAJ3SX.js";import"../../chunk-ECPWEUBG.js";import"../../chunk-6XM52E7W.js";import"../../chunk-EZSEQHRH.js";import"../../chunk-3IZAFXL6.js";import"../../chunk-23PSWIUF.js";import"../../chunk-IPYZIIRV.js";import"../../chunk-NM74WWXQ.js";import"../../chunk-OYHUG47P.js";import"../../chunk-EG7U7PM3.js";import"../../chunk-AYJMIZZ3.js";import"../../chunk-XDUIVR6I.js";import"../../chunk-HZ6A5QFC.js";import"../../chunk-6LT7O7T2.js";import"../../chunk-DINNT5P2.js";import"../../chunk-3OQA4BKQ.js";import"../../chunk-GRL4DWKG.js";import"../../chunk-3USCFSFQ.js";import"../../chunk-7GK5LKBV.js";import"../../chunk-HBPBDC7T.js";import"../../chunk-5MOOXA2X.js";import"../../chunk-4OT5AMS5.js";import"../../chunk-BWWXE4SL.js";export{a as default};
|
|
2
2
|
//# sourceMappingURL=bl-pagination.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"bl-select.d.ts","sourceRoot":"","sources":["../../../src/components/select/bl-select.ts"],"names":[],"mappings":"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
|
|
1
|
+
{"version":3,"file":"bl-select.d.ts","sourceRoot":"","sources":["../../../src/components/select/bl-select.ts"],"names":[],"mappings":"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"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{a}from"../../chunk-
|
|
1
|
+
import{a}from"../../chunk-KYLWO3YR.js";import"../../chunk-5NSAJ3SX.js";import"../../chunk-ECPWEUBG.js";import"../../chunk-6XM52E7W.js";import"../../chunk-EZSEQHRH.js";import"../../chunk-NM74WWXQ.js";import"../../chunk-OYHUG47P.js";import"../../chunk-EG7U7PM3.js";import"../../chunk-AYJMIZZ3.js";import"../../chunk-XDUIVR6I.js";import"../../chunk-HZ6A5QFC.js";import"../../chunk-6LT7O7T2.js";import"../../chunk-DINNT5P2.js";import"../../chunk-3OQA4BKQ.js";import"../../chunk-GRL4DWKG.js";import"../../chunk-3USCFSFQ.js";import"../../chunk-7GK5LKBV.js";import"../../chunk-HBPBDC7T.js";import"../../chunk-5MOOXA2X.js";import"../../chunk-4OT5AMS5.js";import"../../chunk-BWWXE4SL.js";export{a as default};
|
|
2
2
|
//# sourceMappingURL=bl-select.js.map
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import { CSSResultGroup, LitElement } from "lit";
|
|
2
2
|
import { FormValue } from "@open-wc/form-helpers";
|
|
3
|
+
import { BaklavaIcon } from "../../icon/icon-list";
|
|
3
4
|
export default class BlSelectOption<ValueType extends FormValue = string> extends LitElement {
|
|
4
5
|
static get styles(): CSSResultGroup;
|
|
5
6
|
private _value;
|
|
@@ -20,6 +21,10 @@ export default class BlSelectOption<ValueType extends FormValue = string> extend
|
|
|
20
21
|
* Sets option as selected state
|
|
21
22
|
*/
|
|
22
23
|
selected: boolean;
|
|
24
|
+
/**
|
|
25
|
+
* Sets the name of the icon
|
|
26
|
+
*/
|
|
27
|
+
icon?: BaklavaIcon;
|
|
23
28
|
multiple: boolean;
|
|
24
29
|
/**
|
|
25
30
|
* Fires when clicked on the option
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"bl-select-option.d.ts","sourceRoot":"","sources":["../../../../src/components/select/option/bl-select-option.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAQ,UAAU,EAAE,MAAM,KAAK,CAAC;AAEvD,OAAO,EAAE,SAAS,EAAE,MAAM,uBAAuB,CAAC;
|
|
1
|
+
{"version":3,"file":"bl-select-option.d.ts","sourceRoot":"","sources":["../../../../src/components/select/option/bl-select-option.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAQ,UAAU,EAAE,MAAM,KAAK,CAAC;AAEvD,OAAO,EAAE,SAAS,EAAE,MAAM,uBAAuB,CAAC;AAElD,OAAO,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAKnD,MAAM,CAAC,OAAO,OAAO,cAAc,CAAC,SAAS,SAAS,SAAS,GAAG,MAAM,CAAE,SAAQ,UAAU;IAC1F,MAAM,KAAK,MAAM,IAAI,cAAc,CAElC;IAED,OAAO,CAAC,MAAM,CAAY;IAG1B;;OAEG;IACH,IACI,KAAK,IAAI,SAAS,CAErB;IAED,IAAI,KAAK,CAAC,GAAG,EAAE,SAAS,EAEvB;IAED;;OAEG;IAEH,KAAK,SAAM;IAEX;;OAEG;IAEH,QAAQ,UAAS;IAEjB;;OAEG;IAEH,QAAQ,UAAS;IAEjB;;OAEG;IAEH,IAAI,CAAC,EAAE,WAAW,CAAC;IAGnB,QAAQ,UAAS;IAEjB;;OAEG;IACwB,OAAO,CAAC,SAAS,CAA6C;IAEzF;;OAEG;IACgB,OAAO,CAAC,OAAO,CAA6C;IAE/E;;OAEG;IACe,OAAO,CAAC,MAAM,CAA6C;IAErD,OAAO,CAAC,WAAW,CAAc;IAEzD;;OAEG;IACH,KAAK;IAQL;;OAEG;IACH,IAAI;IAKJ,OAAO,CAAC,QAAQ,CAA6B;IAE7C,OAAO,CAAC,oBAAoB;IAgB5B,OAAO,CAAC,sBAAsB;IAa9B,MAAM;IAMN,OAAO,CAAC,aAAa;IAOrB,OAAO,CAAC,YAAY;IAIpB,OAAO,CAAC,cAAc;IAKtB,OAAO,CAAC,iBAAiB;IAKzB,iBAAiB;IAYjB,oBAAoB;CAIrB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,kBAAkB,EAAE,cAAc,CAAC;KACpC;CACF"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{a}from"../../../chunk-
|
|
1
|
+
import{a}from"../../../chunk-5NSAJ3SX.js";import"../../../chunk-GRL4DWKG.js";import"../../../chunk-5MOOXA2X.js";import"../../../chunk-4OT5AMS5.js";import"../../../chunk-BWWXE4SL.js";export{a as default};
|
|
2
2
|
//# sourceMappingURL=bl-select-option.js.map
|
|
@@ -0,0 +1,107 @@
|
|
|
1
|
+
import { CSSResultGroup, LitElement, TemplateResult } from "lit";
|
|
2
|
+
import "../icon/bl-icon";
|
|
3
|
+
import { BaklavaIcon } from "../icon/icon-list";
|
|
4
|
+
export type StepperItemVariant = "default" | "active" | "success" | "error";
|
|
5
|
+
export type StepperType = "dot" | "number" | "icon";
|
|
6
|
+
export type StepperDirection = "horizontal" | "vertical";
|
|
7
|
+
/**
|
|
8
|
+
* @tag bl-stepper-item
|
|
9
|
+
* @summary Baklava Stepper Item component for individual steps in a stepper
|
|
10
|
+
*
|
|
11
|
+
* @slot default - Step content (title and description)
|
|
12
|
+
*/
|
|
13
|
+
export default class BlStepperItem extends LitElement {
|
|
14
|
+
static get styles(): CSSResultGroup;
|
|
15
|
+
/**
|
|
16
|
+
* @internal
|
|
17
|
+
*/
|
|
18
|
+
static get shadowRootOptions(): {
|
|
19
|
+
delegatesFocus: boolean;
|
|
20
|
+
mode: ShadowRootMode;
|
|
21
|
+
slotAssignment?: SlotAssignmentMode | undefined;
|
|
22
|
+
customElements?: CustomElementRegistry | undefined;
|
|
23
|
+
};
|
|
24
|
+
/**
|
|
25
|
+
* Defines stepper item's id
|
|
26
|
+
*/
|
|
27
|
+
id: string;
|
|
28
|
+
/**
|
|
29
|
+
* Defines stepper item's status
|
|
30
|
+
*/
|
|
31
|
+
variant: StepperItemVariant;
|
|
32
|
+
/**
|
|
33
|
+
* Internal variant state that includes hover
|
|
34
|
+
* @internal
|
|
35
|
+
*/
|
|
36
|
+
private _internalVariant;
|
|
37
|
+
/**
|
|
38
|
+
* Defines stepper item's interaction
|
|
39
|
+
*/
|
|
40
|
+
disabled: boolean;
|
|
41
|
+
/**
|
|
42
|
+
* If stepper type is icon, it should be rendered on stepper items
|
|
43
|
+
*/
|
|
44
|
+
icon: BaklavaIcon;
|
|
45
|
+
/**
|
|
46
|
+
* Defines stepper item's main title
|
|
47
|
+
*/
|
|
48
|
+
title: string;
|
|
49
|
+
/**
|
|
50
|
+
* Defines stepper item's description
|
|
51
|
+
*/
|
|
52
|
+
description: string;
|
|
53
|
+
/**
|
|
54
|
+
* Internal state to show leading connector (line before the step)
|
|
55
|
+
* @internal
|
|
56
|
+
*/
|
|
57
|
+
showLeadingConnector: boolean;
|
|
58
|
+
/**
|
|
59
|
+
* Internal state to show trailing connector (line after the step)
|
|
60
|
+
* @internal
|
|
61
|
+
*/
|
|
62
|
+
showTrailingConnector: boolean;
|
|
63
|
+
/**
|
|
64
|
+
* Internal state to track stepper type from parent
|
|
65
|
+
* @internal
|
|
66
|
+
*/
|
|
67
|
+
stepperType: StepperType;
|
|
68
|
+
/**
|
|
69
|
+
* Internal state to track stepper direction from parent
|
|
70
|
+
* @internal
|
|
71
|
+
*/
|
|
72
|
+
direction: StepperDirection;
|
|
73
|
+
/**
|
|
74
|
+
* Internal state to track stepper usage from parent
|
|
75
|
+
* @internal
|
|
76
|
+
*/
|
|
77
|
+
stepUsage: "clickable" | "non-clickable";
|
|
78
|
+
/**
|
|
79
|
+
* Fires when stepper item is clicked
|
|
80
|
+
*/
|
|
81
|
+
private onItemClick;
|
|
82
|
+
willUpdate(changedProperties: Map<string | number | symbol, unknown>): void;
|
|
83
|
+
private get isClickable();
|
|
84
|
+
/**
|
|
85
|
+
* @internal
|
|
86
|
+
*/
|
|
87
|
+
get stepNumber(): number;
|
|
88
|
+
/**
|
|
89
|
+
* @internal
|
|
90
|
+
*/
|
|
91
|
+
get shouldShowIcon(): boolean;
|
|
92
|
+
/**
|
|
93
|
+
* @internal
|
|
94
|
+
*/
|
|
95
|
+
get iconName(): BaklavaIcon;
|
|
96
|
+
private handleClick;
|
|
97
|
+
private handleKeyDown;
|
|
98
|
+
private handleMouseEnter;
|
|
99
|
+
private handleMouseLeave;
|
|
100
|
+
render(): TemplateResult;
|
|
101
|
+
}
|
|
102
|
+
declare global {
|
|
103
|
+
interface HTMLElementTagNameMap {
|
|
104
|
+
"bl-stepper-item": BlStepperItem;
|
|
105
|
+
}
|
|
106
|
+
}
|
|
107
|
+
//# sourceMappingURL=bl-stepper-item.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"bl-stepper-item.d.ts","sourceRoot":"","sources":["../../../src/components/stepper/bl-stepper-item.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAQ,UAAU,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAKvE,OAAO,iBAAiB,CAAC;AACzB,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAGhD,MAAM,MAAM,kBAAkB,GAAG,SAAS,GAAG,QAAQ,GAAG,SAAS,GAAG,OAAO,CAAC;AAE5E,MAAM,MAAM,WAAW,GAAG,KAAK,GAAG,QAAQ,GAAG,MAAM,CAAC;AACpD,MAAM,MAAM,gBAAgB,GAAG,YAAY,GAAG,UAAU,CAAC;AAEzD;;;;;GAKG;AAGH,MAAM,CAAC,OAAO,OAAO,aAAc,SAAQ,UAAU;IACnD,MAAM,KAAK,MAAM,IAAI,cAAc,CAElC;IAED;;OAEG;IACH,MAAM,KAAK,iBAAiB;;;;;MAE3B;IAED;;OAEG;IAEH,EAAE,EAAE,MAAM,CAAM;IAEhB;;OAEG;IAEH,OAAO,EAAE,kBAAkB,CAAa;IAExC;;;OAGG;IACH,OAAO,CAAC,gBAAgB,CAAyC;IAEjE;;OAEG;IAEH,QAAQ,UAAS;IAEjB;;OAEG;IAEH,IAAI,EAAE,WAAW,CAAW;IAE5B;;OAEG;IAEH,KAAK,SAAM;IAEX;;OAEG;IAEH,WAAW,SAAM;IAEjB;;;OAGG;IAEH,oBAAoB,UAAS;IAE7B;;;OAGG;IAEH,qBAAqB,UAAQ;IAE7B;;;OAGG;IAEH,WAAW,EAAE,WAAW,CAAS;IAEjC;;;OAGG;IAEH,SAAS,EAAE,gBAAgB,CAAgB;IAE3C;;;OAGG;IAEH,SAAS,EAAE,WAAW,GAAG,eAAe,CAAe;IAEvD;;OAEG;IAC6B,OAAO,CAAC,WAAW,CAA0B;IAE7E,UAAU,CAAC,iBAAiB,EAAE,GAAG,CAAC,MAAM,GAAG,MAAM,GAAG,MAAM,EAAE,OAAO,CAAC;IASpE,OAAO,KAAK,WAAW,GAEtB;IAED;;OAEG;IACH,IAAI,UAAU,IAAI,MAAM,CAUvB;IAED;;OAEG;IACH,IAAI,cAAc,IAAI,OAAO,CAQ5B;IAED;;OAEG;IACH,IAAI,QAAQ,IAAI,WAAW,CAW1B;IAED,OAAO,CAAC,WAAW;IAUnB,OAAO,CAAC,aAAa;IAWrB,OAAO,CAAC,gBAAgB;IAOxB,OAAO,CAAC,gBAAgB;IAOxB,MAAM,IAAI,cAAc;CA0EzB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,iBAAiB,EAAE,aAAa,CAAC;KAClC;CACF"}
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
import{a}from"../../chunk-HCSEQTUP.js";import"../../chunk-6LT7O7T2.js";import"../../chunk-DINNT5P2.js";import"../../chunk-3OQA4BKQ.js";import"../../chunk-GRL4DWKG.js";import"../../chunk-3USCFSFQ.js";import"../../chunk-7GK5LKBV.js";import"../../chunk-5MOOXA2X.js";import"../../chunk-4OT5AMS5.js";import"../../chunk-BWWXE4SL.js";export{a as default};
|
|
2
|
+
//# sourceMappingURL=bl-stepper-item.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"bl-stepper-item.test.d.ts","sourceRoot":"","sources":["../../../src/components/stepper/bl-stepper-item.test.ts"],"names":[],"mappings":""}
|
|
@@ -0,0 +1,46 @@
|
|
|
1
|
+
import { CSSResultGroup, LitElement, TemplateResult } from "lit";
|
|
2
|
+
import "./bl-stepper-item";
|
|
3
|
+
export type StepperType = "dot" | "number" | "icon";
|
|
4
|
+
export type StepperDirection = "horizontal" | "vertical";
|
|
5
|
+
export type StepperUsage = "clickable" | "non-clickable";
|
|
6
|
+
/**
|
|
7
|
+
* @tag bl-stepper
|
|
8
|
+
* @summary Baklava Stepper component for displaying progress through a sequence of steps
|
|
9
|
+
*
|
|
10
|
+
* @slot default - Stepper items
|
|
11
|
+
*/
|
|
12
|
+
export default class BlStepper extends LitElement {
|
|
13
|
+
static get styles(): CSSResultGroup;
|
|
14
|
+
/**
|
|
15
|
+
* Defines stepper render style
|
|
16
|
+
*/
|
|
17
|
+
type: StepperType;
|
|
18
|
+
/**
|
|
19
|
+
* Defines stepper direction is horizontal or vertical
|
|
20
|
+
*/
|
|
21
|
+
direction: StepperDirection;
|
|
22
|
+
/**
|
|
23
|
+
* Defines stepper usage is clickable or non-clickable
|
|
24
|
+
*/
|
|
25
|
+
usage: StepperUsage;
|
|
26
|
+
private get stepperItemsArray();
|
|
27
|
+
/**
|
|
28
|
+
* Fires when stepper state changes
|
|
29
|
+
*/
|
|
30
|
+
private onStepperChange;
|
|
31
|
+
private get totalSteps();
|
|
32
|
+
private get activeStep();
|
|
33
|
+
private handleItemClick;
|
|
34
|
+
private handleKeyDown;
|
|
35
|
+
connectedCallback(): void;
|
|
36
|
+
firstUpdated(changedProperties: Map<string | number | symbol, unknown>): void;
|
|
37
|
+
updated(changedProperties: Map<string | number | symbol, unknown>): void;
|
|
38
|
+
private updateStepperItems;
|
|
39
|
+
render(): TemplateResult;
|
|
40
|
+
}
|
|
41
|
+
declare global {
|
|
42
|
+
interface HTMLElementTagNameMap {
|
|
43
|
+
"bl-stepper": BlStepper;
|
|
44
|
+
}
|
|
45
|
+
}
|
|
46
|
+
//# sourceMappingURL=bl-stepper.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"bl-stepper.d.ts","sourceRoot":"","sources":["../../../src/components/stepper/bl-stepper.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAQ,UAAU,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAIvE,OAAO,mBAAmB,CAAC;AAG3B,MAAM,MAAM,WAAW,GAAG,KAAK,GAAG,QAAQ,GAAG,MAAM,CAAC;AACpD,MAAM,MAAM,gBAAgB,GAAG,YAAY,GAAG,UAAU,CAAC;AACzD,MAAM,MAAM,YAAY,GAAG,WAAW,GAAG,eAAe,CAAC;AAYzD;;;;;GAKG;AAGH,MAAM,CAAC,OAAO,OAAO,SAAU,SAAQ,UAAU;IAC/C,MAAM,KAAK,MAAM,IAAI,cAAc,CAElC;IAED;;OAEG;IAEH,IAAI,EAAE,WAAW,CAAS;IAE1B;;OAEG;IAEH,SAAS,EAAE,gBAAgB,CAAgB;IAE3C;;OAEG;IAEH,KAAK,EAAE,YAAY,CAAe;IAElC,OAAO,KAAK,iBAAiB,GAE5B;IAED;;OAEG;IACyB,OAAO,CAAC,eAAe,CAGhD;IAEH,OAAO,KAAK,UAAU,GAErB;IAED,OAAO,KAAK,UAAU,GAMrB;IAED,OAAO,CAAC,eAAe;IA6BvB,OAAO,CAAC,aAAa;IAgCrB,iBAAiB;IAIjB,YAAY,CAAC,iBAAiB,EAAE,GAAG,CAAC,MAAM,GAAG,MAAM,GAAG,MAAM,EAAE,OAAO,CAAC;IAOtE,OAAO,CAAC,iBAAiB,EAAE,GAAG,CAAC,MAAM,GAAG,MAAM,GAAG,MAAM,EAAE,OAAO,CAAC;IAYjE,OAAO,CAAC,kBAAkB;IA+B1B,MAAM,IAAI,cAAc;CAwBzB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,YAAY,EAAE,SAAS,CAAC;KACzB;CACF"}
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
import{a}from"../../chunk-BDTCJ2JC.js";import"../../chunk-HCSEQTUP.js";import"../../chunk-6LT7O7T2.js";import"../../chunk-DINNT5P2.js";import"../../chunk-3OQA4BKQ.js";import"../../chunk-GRL4DWKG.js";import"../../chunk-3USCFSFQ.js";import"../../chunk-7GK5LKBV.js";import"../../chunk-5MOOXA2X.js";import"../../chunk-4OT5AMS5.js";import"../../chunk-BWWXE4SL.js";export{a as default};
|
|
2
|
+
//# sourceMappingURL=bl-stepper.js.map
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
import type { Meta, StoryObj } from "@storybook/web-components";
|
|
2
|
+
interface StepperArgs {
|
|
3
|
+
type?: "dot" | "number" | "icon";
|
|
4
|
+
direction?: "horizontal" | "vertical";
|
|
5
|
+
usage?: "clickable" | "non-clickable";
|
|
6
|
+
customStyles?: string;
|
|
7
|
+
}
|
|
8
|
+
declare const meta: Meta<StepperArgs>;
|
|
9
|
+
export default meta;
|
|
10
|
+
type Story = StoryObj<StepperArgs>;
|
|
11
|
+
export declare const Default: Story;
|
|
12
|
+
export declare const DotType: Story;
|
|
13
|
+
export declare const NumberType: Story;
|
|
14
|
+
export declare const IconType: Story;
|
|
15
|
+
export declare const VerticalDirection: Story;
|
|
16
|
+
export declare const NonClickable: Story;
|
|
17
|
+
export declare const WithErrorState: Story;
|
|
18
|
+
export declare const WithDisabledItems: Story;
|
|
19
|
+
export declare const MinimalSteps: Story;
|
|
20
|
+
export declare const ManySteps: Story;
|
|
21
|
+
export declare const WithoutDescriptions: Story;
|
|
22
|
+
export declare const InteractiveExample: Story;
|
|
23
|
+
//# sourceMappingURL=bl-stepper.stories.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"bl-stepper.stories.d.ts","sourceRoot":"","sources":["../../../src/components/stepper/bl-stepper.stories.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,2BAA2B,CAAC;AAOhE,UAAU,WAAW;IACnB,IAAI,CAAC,EAAE,KAAK,GAAG,QAAQ,GAAG,MAAM,CAAC;IACjC,SAAS,CAAC,EAAE,YAAY,GAAG,UAAU,CAAC;IACtC,KAAK,CAAC,EAAE,WAAW,GAAG,eAAe,CAAC;IACtC,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAKD,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,WAAW,CAgE3B,CAAC;AAEF,eAAe,IAAI,CAAC;AAEpB,KAAK,KAAK,GAAG,QAAQ,CAAC,WAAW,CAAC,CAAC;AAgBnC,eAAO,MAAM,OAAO,EAAE,KAOrB,CAAC;AAEF,eAAO,MAAM,OAAO,EAAE,KAOrB,CAAC;AAEF,eAAO,MAAM,UAAU,EAAE,KAOxB,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAmBtB,CAAC;AAEF,eAAO,MAAM,iBAAiB,EAAE,KAO/B,CAAC;AAEF,eAAO,MAAM,YAAY,EAAE,KAgE1B,CAAC;AAEF,eAAO,MAAM,cAAc,EAAE,KAc5B,CAAC;AAEF,eAAO,MAAM,iBAAiB,EAAE,KAc/B,CAAC;AAEF,eAAO,MAAM,YAAY,EAAE,KAY1B,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,KAqBvB,CAAC;AAEF,eAAO,MAAM,mBAAmB,EAAE,KAcjC,CAAC;AAEF,eAAO,MAAM,kBAAkB,EAAE,KA8DhC,CAAC"}
|
|
@@ -0,0 +1,100 @@
|
|
|
1
|
+
import{a as n}from"../../chunk-M4E4CVZ4.js";import{a as l}from"../../chunk-DINNT5P2.js";import{b as s}from"../../chunk-4OT5AMS5.js";import"../../chunk-BWWXE4SL.js";var c="https://www.figma.com/design/RrcLH0mWpIUy4vwuTlDeKN/Baklava-Design-Guide?node-id=23617-1414",d="https://github.com/Trendyol/baklava/blob/main/src/components/stepper/doc/ADR.md",b={title:"Components/Stepper",component:"bl-stepper",parameters:{chromatic:{viewports:[1e3]},controls:{exclude:["customStyles"]},docs:{description:{component:`<div class="bl-docs-container"><p class="bl-docs-description">The Stepper component displays progress through a sequence of steps. It supports different visual styles (dot, number, icon), directions (horizontal, vertical), and usage modes (clickable, non-clickable). Maximum 9 items are allowed.</p><div class="bl-docs-links" style="display: flex; gap: var(--bl-size-2xs); margin-top: var(--bl-size-m);"><bl-badge icon="document"<bl-link variant='inline' href='`+d+`' target='_blank'>ADR</bl-link></bl-badge><bl-badge icon="puzzle"<bl-link variant='inline' href='`+c+"' target='_blank'>Figma</bl-link></bl-badge></div></div>"}}},decorators:[n],argTypes:{type:{control:{type:"select"},options:["dot","number","icon"],description:"Stepper render style",table:{type:{summary:"StepperType"},defaultValue:{summary:"dot"}}},direction:{control:{type:"select"},options:["horizontal","vertical"],description:"Stepper direction",table:{type:{summary:"StepperDirection"},defaultValue:{summary:"horizontal"}}},usage:{control:{type:"select"},options:["clickable","non-clickable"],description:"Stepper usage mode",table:{type:{summary:"StepperUsage"},defaultValue:{summary:"clickable"}}}}},S=b,o=i=>s`
|
|
2
|
+
<bl-stepper
|
|
3
|
+
type=${l(i.type)}
|
|
4
|
+
direction=${l(i.direction)}
|
|
5
|
+
usage=${l(i.usage)}
|
|
6
|
+
style=${l(i.customStyles)}
|
|
7
|
+
>
|
|
8
|
+
<bl-stepper-item id="1" title="Step 1" description="First step description" variant="success"></bl-stepper-item>
|
|
9
|
+
<bl-stepper-item id="2" title="Step 2" description="Second step description" variant="active"></bl-stepper-item>
|
|
10
|
+
<bl-stepper-item id="3" title="Step 3" description="Third step description" variant="default"></bl-stepper-item>
|
|
11
|
+
<bl-stepper-item id="4" title="Step 4" description="Fourth step description" variant="default"></bl-stepper-item>
|
|
12
|
+
</bl-stepper>
|
|
13
|
+
`,y={args:{type:"dot",direction:"horizontal",usage:"clickable"},render:o},f={args:{type:"dot",direction:"horizontal",usage:"clickable"},render:o},g={args:{type:"number",direction:"horizontal",usage:"clickable"},render:o},h={args:{type:"icon",direction:"horizontal",usage:"clickable"},render:i=>s`
|
|
14
|
+
<bl-stepper
|
|
15
|
+
type=${l(i.type)}
|
|
16
|
+
direction=${l(i.direction)}
|
|
17
|
+
usage=${l(i.usage)}
|
|
18
|
+
style=${l(i.customStyles)}
|
|
19
|
+
>
|
|
20
|
+
<bl-stepper-item id="1" title="Step 1" description="First step description" variant="success" icon="check"></bl-stepper-item>
|
|
21
|
+
<bl-stepper-item id="2" title="Step 2" description="Second step description" variant="active" icon="settings"></bl-stepper-item>
|
|
22
|
+
<bl-stepper-item id="3" title="Step 3" description="Third step description" variant="default" icon="clock"></bl-stepper-item>
|
|
23
|
+
<bl-stepper-item id="4" title="Step 4" description="Fourth step description" variant="default" icon="lock"></bl-stepper-item>
|
|
24
|
+
</bl-stepper>
|
|
25
|
+
`},k={args:{type:"number",direction:"vertical",usage:"clickable"},render:o},z={args:{type:"dot",direction:"horizontal",usage:"non-clickable"},render:()=>s`
|
|
26
|
+
<div style="display: flex; flex-direction: column; gap: var(--bl-size-m);">
|
|
27
|
+
<bl-stepper type="dot" direction="horizontal" usage="non-clickable" id="non-clickable-stepper">
|
|
28
|
+
<bl-stepper-item id="1" title="Account Setup" description="Create your account" variant="success"></bl-stepper-item>
|
|
29
|
+
<bl-stepper-item id="2" title="Profile Information" description="Add your details" variant="active"></bl-stepper-item>
|
|
30
|
+
<bl-stepper-item id="3" title="Preferences" description="Set your preferences" variant="default"></bl-stepper-item>
|
|
31
|
+
<bl-stepper-item id="4" title="Confirmation" description="Review and confirm" variant="default"></bl-stepper-item>
|
|
32
|
+
</bl-stepper>
|
|
33
|
+
|
|
34
|
+
<div style="display: flex; gap: var(--bl-size-xs);">
|
|
35
|
+
<bl-button variant="secondary" size="small" @click=${()=>{let p=document.getElementById("non-clickable-stepper").querySelectorAll("bl-stepper-item"),e=0;if(p.forEach((t,r)=>{t.variant==="active"&&(e=r)}),e>0){let t=e-1;p.forEach((r,a)=>{a===t?r.variant="active":a<t?r.variant="success":r.variant="default"})}}}>Previous</bl-button>
|
|
36
|
+
|
|
37
|
+
<bl-button variant="primary" size="small" @click=${()=>{let p=document.getElementById("non-clickable-stepper").querySelectorAll("bl-stepper-item"),e=0;if(p.forEach((t,r)=>{t.variant==="active"&&(e=r)}),e<p.length-1){let t=e+1;p.forEach((r,a)=>{a===t?r.variant="active":a<t?r.variant="success":r.variant="default"})}}}>Next</bl-button>
|
|
38
|
+
</div>
|
|
39
|
+
</div>
|
|
40
|
+
`},I={args:{type:"number",direction:"horizontal",usage:"clickable"},render:()=>s`
|
|
41
|
+
<bl-stepper type="number" direction="horizontal" usage="clickable">
|
|
42
|
+
<bl-stepper-item id="1" title="Step 1" description="First step description" variant="success"></bl-stepper-item>
|
|
43
|
+
<bl-stepper-item id="2" title="Step 2" description="Second step description" variant="active"></bl-stepper-item>
|
|
44
|
+
<bl-stepper-item id="3" title="Step 3" description="Third step description" variant="error"></bl-stepper-item>
|
|
45
|
+
<bl-stepper-item id="4" title="Step 4" description="Fourth step description" variant="default"></bl-stepper-item>
|
|
46
|
+
</bl-stepper>
|
|
47
|
+
`},B={args:{type:"dot",direction:"horizontal",usage:"clickable"},render:()=>s`
|
|
48
|
+
<bl-stepper type="dot" direction="horizontal" usage="clickable">
|
|
49
|
+
<bl-stepper-item id="1" title="Step 1" description="First step description" variant="success"></bl-stepper-item>
|
|
50
|
+
<bl-stepper-item id="2" title="Step 2" description="Second step description" variant="active"></bl-stepper-item>
|
|
51
|
+
<bl-stepper-item id="3" title="Step 3" description="Third step description" variant="default" disabled></bl-stepper-item>
|
|
52
|
+
<bl-stepper-item id="4" title="Step 4" description="Fourth step description" variant="default"></bl-stepper-item>
|
|
53
|
+
</bl-stepper>
|
|
54
|
+
`},x={args:{type:"number",direction:"horizontal",usage:"clickable"},render:()=>s`
|
|
55
|
+
<bl-stepper type="number" direction="horizontal" usage="clickable">
|
|
56
|
+
<bl-stepper-item id="1" title="Step 1" variant="active"></bl-stepper-item>
|
|
57
|
+
<bl-stepper-item id="2" title="Step 2" variant="default"></bl-stepper-item>
|
|
58
|
+
</bl-stepper>
|
|
59
|
+
`},A={args:{type:"dot",direction:"horizontal",usage:"clickable"},render:()=>s`
|
|
60
|
+
<bl-stepper type="dot" direction="horizontal" usage="clickable">
|
|
61
|
+
<bl-stepper-item id="1" title="Step 1" variant="success"></bl-stepper-item>
|
|
62
|
+
<bl-stepper-item id="2" title="Step 2" variant="success"></bl-stepper-item>
|
|
63
|
+
<bl-stepper-item id="3" title="Step 3" variant="success"></bl-stepper-item>
|
|
64
|
+
<bl-stepper-item id="4" title="Step 4" variant="active"></bl-stepper-item>
|
|
65
|
+
<bl-stepper-item id="5" title="Step 5" variant="default"></bl-stepper-item>
|
|
66
|
+
<bl-stepper-item id="6" title="Step 6" variant="default"></bl-stepper-item>
|
|
67
|
+
<bl-stepper-item id="7" title="Step 7" variant="default"></bl-stepper-item>
|
|
68
|
+
<bl-stepper-item id="8" title="Step 8" variant="default"></bl-stepper-item>
|
|
69
|
+
<bl-stepper-item id="9" title="Step 9" variant="default"></bl-stepper-item>
|
|
70
|
+
<bl-stepper-item id="10" title="Step 10" variant="default"></bl-stepper-item>
|
|
71
|
+
<bl-stepper-item id="11" title="Step 11" variant="default"></bl-stepper-item>
|
|
72
|
+
</bl-stepper>
|
|
73
|
+
`},E={args:{type:"number",direction:"horizontal",usage:"clickable"},render:()=>s`
|
|
74
|
+
<bl-stepper type="number" direction="horizontal" usage="clickable">
|
|
75
|
+
<bl-stepper-item id="1" title="Step 1" variant="success"></bl-stepper-item>
|
|
76
|
+
<bl-stepper-item id="2" title="Step 2" variant="active"></bl-stepper-item>
|
|
77
|
+
<bl-stepper-item id="3" title="Step 3" variant="default"></bl-stepper-item>
|
|
78
|
+
<bl-stepper-item id="4" title="Step 4" variant="default"></bl-stepper-item>
|
|
79
|
+
</bl-stepper>
|
|
80
|
+
`},$={args:{type:"number",direction:"horizontal",usage:"clickable"},render:()=>s`
|
|
81
|
+
<div style="display: flex; flex-direction: column; gap: var(--bl-size-m);">
|
|
82
|
+
<bl-stepper type="number" direction="horizontal" usage="clickable" id="interactive-stepper">
|
|
83
|
+
<bl-stepper-item id="1" title="Account Setup" description="Create your account" variant="success"></bl-stepper-item>
|
|
84
|
+
<bl-stepper-item id="2" title="Profile Information" description="Add your details" variant="active"></bl-stepper-item>
|
|
85
|
+
<bl-stepper-item id="3" title="Preferences" description="Set your preferences" variant="default"></bl-stepper-item>
|
|
86
|
+
<bl-stepper-item id="4" title="Confirmation" description="Review and confirm" variant="default"></bl-stepper-item>
|
|
87
|
+
</bl-stepper>
|
|
88
|
+
|
|
89
|
+
<div style="display: flex; gap: var(--bl-size-xs);">
|
|
90
|
+
<bl-button variant="secondary" size="small" @click=${()=>{document.getElementById("interactive-stepper").querySelectorAll("bl-stepper-item").forEach((e,t)=>{t===0?e.variant="active":t<1?e.variant="success":e.variant="default"})}}>Go to Step 1</bl-button>
|
|
91
|
+
|
|
92
|
+
<bl-button variant="secondary" size="small" @click=${()=>{document.getElementById("interactive-stepper").querySelectorAll("bl-stepper-item").forEach((e,t)=>{t===1?e.variant="active":t<1?e.variant="success":e.variant="default"})}}>Go to Step 2</bl-button>
|
|
93
|
+
|
|
94
|
+
<bl-button variant="secondary" size="small" @click=${()=>{document.getElementById("interactive-stepper").querySelectorAll("bl-stepper-item").forEach((e,t)=>{t===2?e.variant="active":t<2?e.variant="success":e.variant="default"})}}>Go to Step 3</bl-button>
|
|
95
|
+
|
|
96
|
+
<bl-button variant="secondary" size="small" @click=${()=>{document.getElementById("interactive-stepper").querySelectorAll("bl-stepper-item").forEach((e,t)=>{t===3?e.variant="active":t<3?e.variant="success":e.variant="default"})}}>Go to Step 4</bl-button>
|
|
97
|
+
</div>
|
|
98
|
+
</div>
|
|
99
|
+
`};export{y as Default,f as DotType,h as IconType,$ as InteractiveExample,A as ManySteps,x as MinimalSteps,z as NonClickable,g as NumberType,k as VerticalDirection,B as WithDisabledItems,I as WithErrorState,E as WithoutDescriptions,S as default};
|
|
100
|
+
//# sourceMappingURL=bl-stepper.stories.js.map
|