@limetech/lime-elements 37.2.1-next.1 → 37.2.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +21 -0
- package/dist/cjs/limel-breadcrumbs_3.cjs.entry.js +1 -6
- package/dist/cjs/limel-breadcrumbs_3.cjs.entry.js.map +1 -1
- package/dist/collection/components/breadcrumbs/breadcrumbs.js +1 -6
- package/dist/collection/components/breadcrumbs/breadcrumbs.js.map +1 -1
- package/dist/esm/limel-breadcrumbs_3.entry.js +1 -6
- package/dist/esm/limel-breadcrumbs_3.entry.js.map +1 -1
- package/dist/lime-elements/lime-elements.esm.js +1 -1
- package/dist/lime-elements/{p-4e8c35a9.entry.js → p-60deff40.entry.js} +2 -2
- package/dist/lime-elements/p-60deff40.entry.js.map +1 -0
- package/dist/types/components/breadcrumbs/breadcrumbs.d.ts +0 -3
- package/package.json +4 -4
- package/dist/lime-elements/p-4e8c35a9.entry.js.map +0 -1
|
@@ -93,12 +93,7 @@ export class Breadcrumbs {
|
|
|
93
93
|
makeEnterClickable(this.host);
|
|
94
94
|
}
|
|
95
95
|
disconnectedCallback() {
|
|
96
|
-
this.
|
|
97
|
-
}
|
|
98
|
-
removeEnterClickable() {
|
|
99
|
-
var _a;
|
|
100
|
-
const element = (_a = this.button) !== null && _a !== void 0 ? _a : this.anchor;
|
|
101
|
-
removeEnterClickable(element);
|
|
96
|
+
removeEnterClickable(this.host);
|
|
102
97
|
}
|
|
103
98
|
static get is() { return "limel-breadcrumbs"; }
|
|
104
99
|
static get encapsulation() { return "shadow"; }
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"breadcrumbs.js","sourceRoot":"","sources":["../../../src/components/breadcrumbs/breadcrumbs.tsx"],"names":[],"mappings":"AAAA,OAAO,EACH,SAAS,EACT,OAAO,EACP,CAAC,EACD,KAAK,EAEL,IAAI,GACP,MAAM,eAAe,CAAC;AAEvB,OAAO,EACH,kBAAkB,EAClB,oBAAoB,GACvB,MAAM,iCAAiC,CAAC;AACzC,OAAO,EAAE,kBAAkB,EAAE,MAAM,0BAA0B,CAAC;AAC9D,OAAO,EAAE,YAAY,EAAE,WAAW,EAAE,MAAM,wBAAwB,CAAC;AAEnE;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AAOH,MAAM,OAAO,WAAW;;
|
|
1
|
+
{"version":3,"file":"breadcrumbs.js","sourceRoot":"","sources":["../../../src/components/breadcrumbs/breadcrumbs.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n Component,\n Element,\n h,\n Event,\n EventEmitter,\n Prop,\n} from '@stencil/core';\nimport { BreadcrumbsItem } from './breadcrumbs.types';\nimport {\n makeEnterClickable,\n removeEnterClickable,\n} from '../../util/make-enter-clickable';\nimport { createRandomString } from '../../util/random-string';\nimport { getIconColor, getIconName } from '../icon/get-icon-props';\n\n/**\n * A Breadcrumb consists of a list of distinct \"places\" that a user has gone through,\n * before ending up where they are right now, in a website or an application.\n *\n * These \"places\" can be for example _pages_ of a website, which are hierarchically\n * laid out before the current page that the user is looking at.\n * They could also be _steps_ which the user has gone through, which perhaps have no\n * hierarchical relation with each other, but has eventually led the user \"here\".\n *\n * :::note\n * - Where the user currently is, is always the last step of the breadcrumb.\n * - A breadcrumbs never shows where users can go after this place.\n * It only illustrates where user has been before ending up here.\n * If the path that a user can take is not changing and if next steps are clear,\n * you can use the [Progress flow component](#/component/limel-progress-flow) instead.\n * :::\n *\n * Breadcrumbs are often placed horizontally before the main content of the current screen.\n *\n * @exampleComponent limel-example-breadcrumbs-links\n * @exampleComponent limel-example-breadcrumbs-buttons\n * @exampleComponent limel-example-breadcrumbs-icons\n * @exampleComponent limel-example-breadcrumbs-divider\n * @exampleComponent limel-example-breadcrumbs-icon-color\n * @exampleComponent limel-example-breadcrumbs-styling\n */\n\n@Component({\n tag: 'limel-breadcrumbs',\n shadow: true,\n styleUrl: 'breadcrumbs.scss',\n})\nexport class Breadcrumbs {\n /**\n * List of items in the breadcrumbs,\n * each representing a step or a page.\n */\n @Prop()\n public items: BreadcrumbsItem[];\n\n /**\n * The visual divider that separates items.\n * It must be a single character such as `-` or `,`.\n */\n @Prop()\n public divider: string = '›';\n\n /**\n * Fired when clicking on buttons (not links!)\n * inside the breadcrumbs.\n */\n @Event()\n public select: EventEmitter<BreadcrumbsItem>;\n\n @Element()\n private host: HTMLLimelBreadcrumbsElement;\n\n public render() {\n return (\n <ol\n role=\"navigation\"\n aria-label=\"Breadcrumb\"\n style={{ '--limel-breadcrumbs-divider': `'${this.divider}'` }}\n >\n {this.renderSteps()}\n {this.renderLastStep()}\n </ol>\n );\n }\n\n public componentWillLoad() {\n makeEnterClickable(this.host);\n }\n\n public disconnectedCallback() {\n removeEnterClickable(this.host);\n }\n\n private renderSteps = () => {\n const allStepsWithoutLast = this.items.slice(0, -1);\n\n if (this.areItemsLinks(this.items)) {\n return allStepsWithoutLast.map(this.renderAsLink);\n }\n\n return allStepsWithoutLast.map(this.renderAsButton);\n };\n\n private renderAsButton = (item: BreadcrumbsItem) => {\n const tooltipId = createRandomString();\n\n return [\n <button\n role=\"listitem\"\n id={tooltipId}\n class=\"step\"\n onClick={this.handleClick(item)}\n >\n {this.renderIcon(item)}\n {this.renderLabel(item)}\n </button>,\n this.renderTooltip(item, tooltipId),\n ];\n };\n\n private renderAsLink = (item: BreadcrumbsItem) => {\n const tooltipId = createRandomString();\n\n return [\n <a\n role=\"listitem\"\n id={createRandomString()}\n class=\"step\"\n href={item.link.href}\n title={item.link.title}\n >\n {this.renderIcon(item)}\n {this.renderLabel(item)}\n </a>,\n this.renderTooltip(item, tooltipId),\n ];\n };\n\n private renderLastStep = () => {\n const lastItem = this.items.slice(-1);\n\n return (\n <li\n class=\"last step\"\n tabindex=\"-1\"\n aria-current={this.areItemsLinks(this.items) ? 'page' : 'step'}\n >\n {this.renderIcon(lastItem[0])}\n <span class=\"text\">{lastItem[0].text}</span>\n </li>\n );\n };\n\n private renderIcon = (item: BreadcrumbsItem) => {\n const name = getIconName(item.icon);\n const color = getIconColor(item.icon);\n\n if (!name) {\n return;\n }\n\n return (\n <limel-icon\n style={{\n color: `${color}`,\n }}\n name={name}\n />\n );\n };\n\n private renderLabel = (item: BreadcrumbsItem) => {\n if (item.type === 'icon-only') {\n return;\n }\n\n return <span class=\"text\">{item.text}</span>;\n };\n\n private renderTooltip = (item: BreadcrumbsItem, tooltipId: string) => {\n if (item.type === 'icon-only') {\n return <limel-tooltip elementId={tooltipId} label={item.text} />;\n }\n };\n\n private areItemsLinks = (items: BreadcrumbsItem[]) => {\n return items.some((item) => 'link' in item);\n };\n\n private handleClick = (item: BreadcrumbsItem) => (event: MouseEvent) => {\n event.stopPropagation();\n this.select.emit(item);\n };\n}\n"]}
|
|
@@ -86,12 +86,7 @@ const Breadcrumbs = class {
|
|
|
86
86
|
makeEnterClickable(this.host);
|
|
87
87
|
}
|
|
88
88
|
disconnectedCallback() {
|
|
89
|
-
this.
|
|
90
|
-
}
|
|
91
|
-
removeEnterClickable() {
|
|
92
|
-
var _a;
|
|
93
|
-
const element = (_a = this.button) !== null && _a !== void 0 ? _a : this.anchor;
|
|
94
|
-
removeEnterClickable(element);
|
|
89
|
+
removeEnterClickable(this.host);
|
|
95
90
|
}
|
|
96
91
|
get host() { return getElement(this); }
|
|
97
92
|
};
|