├── .github ├── FUNDING.yml ├── ISSUE_TEMPLATE │ ├── bug_report.md │ └── feature_request.md └── workflows │ └── codeql-analysis.yml ├── .gitignore ├── .npmignore ├── CODE_OF_CONDUCT.md ├── CONTRIBUTING.md ├── LICENSE ├── components ├── accordion │ ├── index.d.ts │ ├── index.ts │ ├── kor-accordion.d.ts │ └── kor-accordion.ts ├── app-bar │ ├── index.d.ts │ ├── index.ts │ ├── kor-app-bar.d.ts │ └── kor-app-bar.ts ├── avatar │ ├── index.d.ts │ ├── index.ts │ ├── kor-avatar.d.ts │ └── kor-avatar.ts ├── badge │ ├── index.d.ts │ ├── index.ts │ ├── kor-badge.d.ts │ └── kor-badge.ts ├── breadcrumbs │ ├── index.d.ts │ ├── index.ts │ ├── kor-breadcrumb-item.d.ts │ ├── kor-breadcrumb-item.ts │ ├── kor-breadcrumbs.d.ts │ └── kor-breadcrumbs.ts ├── button │ ├── index.d.ts │ ├── index.ts │ ├── kor-button.d.ts │ └── kor-button.ts ├── card │ ├── index.d.ts │ ├── index.ts │ ├── kor-card.d.ts │ └── kor-card.ts ├── checkbox │ ├── index.d.ts │ ├── index.ts │ ├── kor-checkbox.d.ts │ └── kor-checkbox.ts ├── divider │ ├── index.d.ts │ ├── index.ts │ ├── kor-divider.d.ts │ └── kor-divider.ts ├── drawer │ ├── index.d.ts │ ├── index.ts │ ├── kor-drawer.d.ts │ └── kor-drawer.ts ├── empty-state │ ├── index.d.ts │ ├── index.ts │ ├── kor-empty-state.d.ts │ └── kor-empty-state.ts ├── grid │ ├── index.d.ts │ ├── index.ts │ ├── kor-grid.d.ts │ └── kor-grid.ts ├── icon │ ├── index.d.ts │ ├── index.ts │ ├── kor-icon.d.ts │ └── kor-icon.ts ├── image │ ├── index.ts │ └── kor-image.ts ├── input │ ├── index.d.ts │ ├── index.ts │ ├── kor-input.d.ts │ └── kor-input.ts ├── menu-item │ ├── index.d.ts │ ├── index.ts │ ├── kor-menu-item.d.ts │ └── kor-menu-item.ts ├── modal │ ├── index.d.ts │ ├── index.ts │ ├── kor-modal.d.ts │ └── kor-modal.ts ├── nav-bar │ ├── index.d.ts │ ├── index.ts │ ├── kor-nav-bar.d.ts │ └── kor-nav-bar.ts ├── notifications │ ├── index.d.ts │ ├── index.ts │ ├── kor-notification-item.d.ts │ ├── kor-notification-item.ts │ ├── kor-notifications.d.ts │ └── kor-notifications.ts ├── page │ ├── index.d.ts │ ├── index.ts │ ├── kor-page.d.ts │ └── kor-page.ts ├── pane │ ├── index.d.ts │ ├── index.ts │ ├── kor-pane.d.ts │ └── kor-pane.ts ├── popover │ ├── index.d.ts │ ├── index.ts │ ├── kor-popover.d.ts │ └── kor-popover.ts ├── progress-bar │ ├── index.d.ts │ ├── index.ts │ ├── kor-progress-bar.d.ts │ └── kor-progress-bar.ts ├── radio-button │ ├── index.d.ts │ ├── index.ts │ ├── kor-radio-button.d.ts │ └── kor-radio-button.ts ├── slider │ ├── index.d.ts │ ├── index.ts │ ├── kor-slider.d.ts │ └── kor-slider.ts ├── spinner │ ├── index.d.ts │ ├── index.ts │ ├── kor-spinner.d.ts │ └── kor-spinner.ts ├── stepper │ ├── index.d.ts │ ├── index.ts │ ├── kor-stepper-item.d.ts │ ├── kor-stepper-item.ts │ ├── kor-stepper.d.ts │ └── kor-stepper.ts ├── swipe-actions │ ├── index.ts │ ├── kor-swipe-action.ts │ └── kor-swipe-actions.ts ├── switch │ ├── index.d.ts │ ├── index.ts │ ├── kor-switch-item.d.ts │ ├── kor-switch-item.ts │ ├── kor-switch.d.ts │ └── kor-switch.ts ├── table │ ├── index.d.ts │ ├── index.ts │ ├── kor-table-cell.d.ts │ ├── kor-table-cell.ts │ ├── kor-table-row.d.ts │ ├── kor-table-row.ts │ ├── kor-table.d.ts │ └── kor-table.ts ├── tabs │ ├── index.d.ts │ ├── index.ts │ ├── kor-tab-item.d.ts │ ├── kor-tab-item.ts │ ├── kor-tabs.d.ts │ └── kor-tabs.ts ├── tag │ ├── index.d.ts │ ├── index.ts │ ├── kor-tag.d.ts │ └── kor-tag.ts ├── text │ ├── index.d.ts │ ├── index.ts │ ├── kor-text.d.ts │ └── kor-text.ts ├── textarea │ ├── index.ts │ └── kor-textarea.ts ├── toggle │ ├── index.d.ts │ ├── index.ts │ ├── kor-toggle.d.ts │ └── kor-toggle.ts ├── tool │ ├── index.d.ts │ ├── index.ts │ ├── kor-tool.d.ts │ └── kor-tool.ts └── tooltip │ ├── index.d.ts │ ├── index.ts │ ├── kor-tooltip.d.ts │ └── kor-tooltip.ts ├── fonts ├── md-icons.ttf ├── open-sans-bold.woff ├── open-sans-bold.woff2 ├── open-sans-regular.woff ├── open-sans-regular.woff2 ├── open-sans-semibold.woff └── open-sans-semibold.woff2 ├── index.d.ts ├── index.html ├── index.ts ├── kor-styles.css ├── lerna-debug.log ├── lerna.json ├── package-lock.json ├── package.json ├── readme.md ├── shared-styles.d.ts ├── shared-styles.ts ├── tsconfig.json └── webpack.dev.config.js /.github/FUNDING.yml: -------------------------------------------------------------------------------- 1 | # These are supported funding model platforms 2 | 3 | github: # Replace with up to 4 GitHub Sponsors-enabled usernames e.g., [user1, user2] 4 | patreon: # 5 | open_collective: # Replace with a single Open Collective username 6 | ko_fi: kor_ui # Replace with a single Ko-fi username 7 | tidelift: # Replace with a single Tidelift platform-name/package-name e.g., npm/babel 8 | community_bridge: # Replace with a single Community Bridge project-name e.g., cloud-foundry 9 | liberapay: # Replace with a single Liberapay username 10 | issuehunt: # Replace with a single IssueHunt username 11 | otechie: # Replace with a single Otechie username 12 | custom: # Replace with up to 4 custom sponsorship URLs e.g., ['link1', 'link2'] 13 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/bug_report.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: Bug report 3 | about: Create a report to help us improve 4 | title: '' 5 | labels: '' 6 | assignees: '' 7 | 8 | --- 9 | 10 | **Describe the bug** 11 | A clear and concise description of what the bug is. 12 | 13 | **To Reproduce** 14 | Steps to reproduce the behavior: 15 | 1. Go to '...' 16 | 2. Click on '....' 17 | 3. Scroll down to '....' 18 | 4. See error 19 | 20 | **Expected behavior** 21 | A clear and concise description of what you expected to happen. 22 | 23 | **Screenshots** 24 | If applicable, add screenshots to help explain your problem. 25 | 26 | **Desktop (please complete the following information):** 27 | - OS: [e.g. iOS] 28 | - Browser [e.g. chrome, safari] 29 | - Version [e.g. 22] 30 | 31 | **Smartphone (please complete the following information):** 32 | - Device: [e.g. iPhone6] 33 | - OS: [e.g. iOS8.1] 34 | - Browser [e.g. stock browser, safari] 35 | - Version [e.g. 22] 36 | 37 | **Additional context** 38 | Add any other context about the problem here. 39 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/feature_request.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: Feature request 3 | about: Suggest an idea for this project 4 | title: '' 5 | labels: '' 6 | assignees: '' 7 | 8 | --- 9 | 10 | **Is your feature request related to a problem? Please describe.** 11 | A clear and concise description of what the problem is. Ex. I'm always frustrated when [...] 12 | 13 | **Describe the solution you'd like** 14 | A clear and concise description of what you want to happen. 15 | 16 | **Describe alternatives you've considered** 17 | A clear and concise description of any alternative solutions or features you've considered. 18 | 19 | **Additional context** 20 | Add any other context or screenshots about the feature request here. 21 | -------------------------------------------------------------------------------- /.github/workflows/codeql-analysis.yml: -------------------------------------------------------------------------------- 1 | # For most projects, this workflow file will not need changing; you simply need 2 | # to commit it to your repository. 3 | # 4 | # You may wish to alter this file to override the set of languages analyzed, 5 | # or to provide custom queries or build logic. 6 | # 7 | # ******** NOTE ******** 8 | # We have attempted to detect the languages in your repository. Please check 9 | # the `language` matrix defined below to confirm you have the correct set of 10 | # supported CodeQL languages. 11 | # 12 | name: "CodeQL" 13 | 14 | on: 15 | push: 16 | branches: [ develop ] 17 | pull_request: 18 | # The branches below must be a subset of the branches above 19 | branches: [ develop ] 20 | schedule: 21 | - cron: '30 9 * * 1' 22 | 23 | jobs: 24 | analyze: 25 | name: Analyze 26 | runs-on: ubuntu-latest 27 | permissions: 28 | actions: read 29 | contents: read 30 | security-events: write 31 | 32 | strategy: 33 | fail-fast: false 34 | matrix: 35 | language: [ 'javascript' ] 36 | # CodeQL supports [ 'cpp', 'csharp', 'go', 'java', 'javascript', 'python' ] 37 | # Learn more: 38 | # https://docs.github.com/en/free-pro-team@latest/github/finding-security-vulnerabilities-and-errors-in-your-code/configuring-code-scanning#changing-the-languages-that-are-analyzed 39 | 40 | steps: 41 | - name: Checkout repository 42 | uses: actions/checkout@v2 43 | 44 | # Initializes the CodeQL tools for scanning. 45 | - name: Initialize CodeQL 46 | uses: github/codeql-action/init@v1 47 | with: 48 | languages: ${{ matrix.language }} 49 | # If you wish to specify custom queries, you can do so here or in a config file. 50 | # By default, queries listed here will override any specified in a config file. 51 | # Prefix the list here with "+" to use these queries and those in the config file. 52 | # queries: ./path/to/local/query, your-org/your-repo/queries@main 53 | 54 | # Autobuild attempts to build any compiled languages (C/C++, C#, or Java). 55 | # If this step fails, then you should remove it and run the build manually (see below) 56 | - name: Autobuild 57 | uses: github/codeql-action/autobuild@v1 58 | 59 | # ℹ️ Command-line programs to run using the OS shell. 60 | # 📚 https://git.io/JvXDl 61 | 62 | # ✏️ If the Autobuild fails above, remove it and uncomment the following three lines 63 | # and modify them (or add more) to build your code if your project 64 | # uses a compiled language 65 | 66 | #- run: | 67 | # make bootstrap 68 | # make release 69 | 70 | - name: Perform CodeQL Analysis 71 | uses: github/codeql-action/analyze@v1 72 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | *.d.ts 3 | components/*/*.d.ts 4 | components/*/index.js 5 | index.js 6 | custom-elements.json 7 | .DS_Store -------------------------------------------------------------------------------- /.npmignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | tsconfig.json 3 | webpack.dev.config.js 4 | .vscode 5 | .github 6 | *.ts 7 | !*.d.ts 8 | components/*/*.ts 9 | !components/*/*.d.ts 10 | lerna.json -------------------------------------------------------------------------------- /CODE_OF_CONDUCT.md: -------------------------------------------------------------------------------- 1 | # Contributor Covenant Code of Conduct 2 | 3 | ## Our Pledge 4 | 5 | We as members, contributors, and leaders pledge to make participation in our 6 | community a harassment-free experience for everyone, regardless of age, body 7 | size, visible or invisible disability, ethnicity, sex characteristics, gender 8 | identity and expression, level of experience, education, socio-economic status, 9 | nationality, personal appearance, race, religion, or sexual identity 10 | and orientation. 11 | 12 | We pledge to act and interact in ways that contribute to an open, welcoming, 13 | diverse, inclusive, and healthy community. 14 | 15 | ## Our Standards 16 | 17 | Examples of behavior that contributes to a positive environment for our 18 | community include: 19 | 20 | * Demonstrating empathy and kindness toward other people 21 | * Being respectful of differing opinions, viewpoints, and experiences 22 | * Giving and gracefully accepting constructive feedback 23 | * Accepting responsibility and apologizing to those affected by our mistakes, 24 | and learning from the experience 25 | * Focusing on what is best not just for us as individuals, but for the 26 | overall community 27 | 28 | Examples of unacceptable behavior include: 29 | 30 | * The use of sexualized language or imagery, and sexual attention or 31 | advances of any kind 32 | * Trolling, insulting or derogatory comments, and personal or political attacks 33 | * Public or private harassment 34 | * Publishing others' private information, such as a physical or email 35 | address, without their explicit permission 36 | * Other conduct which could reasonably be considered inappropriate in a 37 | professional setting 38 | 39 | ## Enforcement Responsibilities 40 | 41 | Community leaders are responsible for clarifying and enforcing our standards of 42 | acceptable behavior and will take appropriate and fair corrective action in 43 | response to any behavior that they deem inappropriate, threatening, offensive, 44 | or harmful. 45 | 46 | Community leaders have the right and responsibility to remove, edit, or reject 47 | comments, commits, code, wiki edits, issues, and other contributions that are 48 | not aligned to this Code of Conduct, and will communicate reasons for moderation 49 | decisions when appropriate. 50 | 51 | ## Scope 52 | 53 | This Code of Conduct applies within all community spaces, and also applies when 54 | an individual is officially representing the community in public spaces. 55 | Examples of representing our community include using an official e-mail address, 56 | posting via an official social media account, or acting as an appointed 57 | representative at an online or offline event. 58 | 59 | ## Enforcement 60 | 61 | Instances of abusive, harassing, or otherwise unacceptable behavior may be 62 | reported to the community leaders responsible for enforcement at 63 | eduferferr@gmail.com. 64 | All complaints will be reviewed and investigated promptly and fairly. 65 | 66 | All community leaders are obligated to respect the privacy and security of the 67 | reporter of any incident. 68 | 69 | ## Enforcement Guidelines 70 | 71 | Community leaders will follow these Community Impact Guidelines in determining 72 | the consequences for any action they deem in violation of this Code of Conduct: 73 | 74 | ### 1. Correction 75 | 76 | **Community Impact**: Use of inappropriate language or other behavior deemed 77 | unprofessional or unwelcome in the community. 78 | 79 | **Consequence**: A private, written warning from community leaders, providing 80 | clarity around the nature of the violation and an explanation of why the 81 | behavior was inappropriate. A public apology may be requested. 82 | 83 | ### 2. Warning 84 | 85 | **Community Impact**: A violation through a single incident or series 86 | of actions. 87 | 88 | **Consequence**: A warning with consequences for continued behavior. No 89 | interaction with the people involved, including unsolicited interaction with 90 | those enforcing the Code of Conduct, for a specified period of time. This 91 | includes avoiding interactions in community spaces as well as external channels 92 | like social media. Violating these terms may lead to a temporary or 93 | permanent ban. 94 | 95 | ### 3. Temporary Ban 96 | 97 | **Community Impact**: A serious violation of community standards, including 98 | sustained inappropriate behavior. 99 | 100 | **Consequence**: A temporary ban from any sort of interaction or public 101 | communication with the community for a specified period of time. No public or 102 | private interaction with the people involved, including unsolicited interaction 103 | with those enforcing the Code of Conduct, is allowed during this period. 104 | Violating these terms may lead to a permanent ban. 105 | 106 | ### 4. Permanent Ban 107 | 108 | **Community Impact**: Demonstrating a pattern of violation of community 109 | standards, including sustained inappropriate behavior, harassment of an 110 | individual, or aggression toward or disparagement of classes of individuals. 111 | 112 | **Consequence**: A permanent ban from any sort of public interaction within 113 | the community. 114 | 115 | ## Attribution 116 | 117 | This Code of Conduct is adapted from the [Contributor Covenant][homepage], 118 | version 2.0, available at 119 | https://www.contributor-covenant.org/version/2/0/code_of_conduct.html. 120 | 121 | Community Impact Guidelines were inspired by [Mozilla's code of conduct 122 | enforcement ladder](https://github.com/mozilla/diversity). 123 | 124 | [homepage]: https://www.contributor-covenant.org 125 | 126 | For answers to common questions about this code of conduct, see the FAQ at 127 | https://www.contributor-covenant.org/faq. Translations are available at 128 | https://www.contributor-covenant.org/translations. 129 | -------------------------------------------------------------------------------- /CONTRIBUTING.md: -------------------------------------------------------------------------------- 1 | # Contributing to Kor UI 2 | 3 | Community members are welcome to contribute with Kor UI by creating pull requests to the develop branch. Contributors should adhere to the following guidelines: 4 | 5 | 1. Create an issue on the [Kor UI](https://github.com/kor-ui/kor) project with a clear description of the bug or feature request. 6 | 2. Fork the project. 7 | 3. Commit the changes and raise a pull request (reference the issue number on the issue title or body) 8 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2019 EFF 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /components/accordion/index.d.ts: -------------------------------------------------------------------------------- 1 | export { korAccordion } from './kor-accordion'; 2 | -------------------------------------------------------------------------------- /components/accordion/index.ts: -------------------------------------------------------------------------------- 1 | export { korAccordion } from './kor-accordion'; 2 | -------------------------------------------------------------------------------- /components/accordion/kor-accordion.d.ts: -------------------------------------------------------------------------------- 1 | import { LitElement } from 'lit'; 2 | import '../icon'; 3 | import '../card'; 4 | /** 5 | * @prop {String} label - Defines the text label. 6 | * @prop {String} icon - If set, defines the icon shown before the label. 7 | * @prop {Boolean} expanded - If set to true, expands the accordion to display its content. 8 | * @prop {Boolean} disabled - If set to true, disables mouse clicks and the style gets updated. 9 | * 10 | * @slot - Displayed inside the accordion when it is expanded. 11 | * @slot header - If used, the header slot replaces the default text label and expand arrow with custom content. 12 | * @slot functions - Displayed close to the 'expand' arrow. 13 | * @slot footer - Displayed below the content when it is expanded. 14 | * 15 | * @cssprop --body-gap - Defines the gap between elements in the body slot. 16 | * @cssprop --header-gap - Defines the gap between elements in the header slot. 17 | * @cssprop --functions-gap - Defines the gap between elements in the functions slot. 18 | * @cssprop --footer-gap - Defines the gap between elements in the footer slot. 19 | */ 20 | export declare class korAccordion extends LitElement { 21 | label: string; 22 | icon: string | undefined; 23 | expanded: boolean | undefined; 24 | disabled: boolean | undefined; 25 | emptyHeader: boolean; 26 | emptyFunctions: boolean; 27 | emptyBody: boolean; 28 | emptyFooter: boolean; 29 | static get styles(): import("lit").CSSResultGroup[]; 30 | render(): import("lit-html").TemplateResult<1>; 31 | attributeChangedCallback(name: string, oldval: string, newval: string): void; 32 | connectedCallback(): void; 33 | handleCollapse(e: any): void; 34 | } 35 | -------------------------------------------------------------------------------- /components/accordion/kor-accordion.ts: -------------------------------------------------------------------------------- 1 | import { LitElement, css, html } from 'lit'; 2 | import { property, state } from 'lit/decorators'; 3 | import { sharedStyles } from '../../shared-styles'; 4 | import '../icon'; 5 | import '../card'; 6 | 7 | /** 8 | * @prop {String} label - Defines the text label. 9 | * @prop {String} icon - If set, defines the icon shown before the label. 10 | * @prop {Boolean} expanded - If set to true, expands the accordion to display its content. 11 | * @prop {Boolean} disabled - If set to true, disables mouse clicks and the style gets updated. 12 | * 13 | * @slot - Displayed inside the accordion when it is expanded. 14 | * @slot header - If used, the header slot replaces the default text label and expand arrow with custom content. 15 | * @slot functions - Displayed close to the 'expand' arrow. 16 | * @slot footer - Displayed below the content when it is expanded. 17 | * 18 | * @cssprop --body-gap - Defines the gap between elements in the body slot. 19 | * @cssprop --header-gap - Defines the gap between elements in the header slot. 20 | * @cssprop --functions-gap - Defines the gap between elements in the functions slot. 21 | * @cssprop --footer-gap - Defines the gap between elements in the footer slot. 22 | */ 23 | 24 | export class korAccordion extends LitElement { 25 | @property({ type: String, reflect: true }) label = 'Label'; 26 | @property({ type: String, reflect: true }) icon: string | undefined; 27 | @property({ type: Boolean, reflect: true }) expanded: boolean | undefined; 28 | @property({ type: Boolean, reflect: true }) disabled: boolean | undefined; 29 | 30 | // readonly properties 31 | @state() emptyHeader = true; 32 | @state() emptyFunctions = true; 33 | @state() emptyBody = true; 34 | @state() emptyFooter = true; 35 | 36 | static get styles() { 37 | return [ 38 | sharedStyles, 39 | css` 40 | :host { 41 | /* css properties */ 42 | --body-gap: var(--spacing-m); 43 | --header-gap: var(--spacing-m); 44 | --functions-gap: var(--spacing-m); 45 | --footer-gap: var(--spacing-m); 46 | } 47 | :host(:not([expanded])) kor-card { 48 | cursor: pointer; 49 | } 50 | kor-card { 51 | padding: var(--spacing-s) var(--spacing-l); 52 | --body-gap: inherit; 53 | --header-gap: inherit; 54 | --functions-gap: inherit; 55 | --footer-gap: inherit; 56 | } 57 | slot:not([name]) { 58 | transition: var(--transition-1); 59 | display: inherit; 60 | flex-direction: inherit; 61 | gap: inherit; 62 | } 63 | slot[name='footer'] { 64 | justify-content: flex-end; 65 | } 66 | /* expanded */ 67 | :host([expanded]) slot:not([name]) { 68 | margin-top: var(--spacing-l); 69 | } 70 | :host(:not([expanded])) slot:not([name]) { 71 | max-height: 0px; 72 | opacity: 0; 73 | overflow: hidden; 74 | } 75 | :host([expanded]) .expand { 76 | transform: rotate(180deg); 77 | } 78 | .header { 79 | overflow: hidden; 80 | cursor: pointer; 81 | display: flex; 82 | flex: 1; 83 | } 84 | .icon { 85 | margin-right: var(--spacing-s); 86 | } 87 | slot[name='header'] p { 88 | font: var(--header-1); 89 | color: var(--text-1); 90 | overflow: hidden; 91 | text-overflow: ellipsis; 92 | white-space: nowrap; 93 | margin: unset; 94 | flex: 1; 95 | } 96 | /* disabled */ 97 | :host([disabled]) .header { 98 | opacity: 0.2; 99 | } 100 | :host([disabled]) kor-card { 101 | pointer-events: none; 102 | } 103 | `, 104 | ]; 105 | } 106 | 107 | render() { 108 | return html` 109 | 112 | 117 |
118 | ${this.icon 119 | ? html` ` 120 | : ''} 121 |

${this.label}

122 | 127 |
128 | 129 | 130 | 131 | ${this.expanded 132 | ? html` 133 | 139 | ` 140 | : ''} 141 | 142 | `; 143 | } 144 | 145 | attributeChangedCallback(name: string, oldval: string, newval: string) { 146 | super.attributeChangedCallback(name, oldval, newval); 147 | this.dispatchEvent(new Event(`${name}-changed`)); 148 | } 149 | 150 | connectedCallback() { 151 | super.connectedCallback(); 152 | // remove card padding 153 | setTimeout(() => { 154 | const topNode: HTMLElement | null | undefined = this.shadowRoot 155 | ?.querySelector('kor-card') 156 | ?.shadowRoot?.querySelector('.top'); 157 | if (topNode) { 158 | topNode.style.padding = '0'; 159 | } 160 | }, 0); 161 | } 162 | 163 | handleCollapse(e: any) { 164 | if (this.expanded) { 165 | this.expanded = false; 166 | e.stopPropagation(); 167 | } 168 | } 169 | } 170 | 171 | if (!window.customElements.get('kor-accordion')) { 172 | window.customElements.define('kor-accordion', korAccordion); 173 | } 174 | -------------------------------------------------------------------------------- /components/app-bar/index.d.ts: -------------------------------------------------------------------------------- 1 | export { korAppBar } from './kor-app-bar'; 2 | -------------------------------------------------------------------------------- /components/app-bar/index.ts: -------------------------------------------------------------------------------- 1 | export { korAppBar } from './kor-app-bar'; 2 | -------------------------------------------------------------------------------- /components/app-bar/kor-app-bar.d.ts: -------------------------------------------------------------------------------- 1 | import { LitElement } from 'lit'; 2 | /** 3 | * @prop {String} label - If set, defines the text label shown on the left side (if mobile is unset). 4 | * @prop {String} logo - If set, defines the logo shown on the left side. 5 | * @prop {Boolean} mobile - If set, toggles the mobile variation. 6 | * 7 | * @slot - The central content area. Used for hosting components such as Tabs. 8 | * @slot functions - Displayed on the right side (if mobile is unset). Used for hosting components such as Icon and Avatar. 9 | * @slot left - Displayed on the left side (if mobile is set to true). Used for hosting components such as Icon. 10 | * @slot right - Displayed on the right side (if mobile is set to true). Used for hosting components such as Icon. 11 | * 12 | * @fires logo-clicked - Fired when clicking on the logo. 13 | * 14 | * @cssprop --functions-gap - Defines the gap between elements in the functions slot. 15 | */ 16 | export declare class korAppBar extends LitElement { 17 | label: string | undefined; 18 | logo: string | undefined; 19 | mobile: boolean | undefined; 20 | static get styles(): import("lit").CSSResultGroup[]; 21 | render(): import("lit-html").TemplateResult<1>; 22 | attributeChangedCallback(name: string, oldval: string, newval: string): void; 23 | handleLogoClick(): void; 24 | } 25 | -------------------------------------------------------------------------------- /components/app-bar/kor-app-bar.ts: -------------------------------------------------------------------------------- 1 | import { LitElement, css, html } from 'lit'; 2 | import { property } from 'lit/decorators'; 3 | import { sharedStyles } from '../../shared-styles'; 4 | 5 | /** 6 | * @prop {String} label - If set, defines the text label shown on the left side (if mobile is unset). 7 | * @prop {String} logo - If set, defines the logo shown on the left side. 8 | * @prop {Boolean} mobile - If set, toggles the mobile variation. 9 | * 10 | * @slot - The central content area. Used for hosting components such as Tabs. 11 | * @slot functions - Displayed on the right side (if mobile is unset). Used for hosting components such as Icon and Avatar. 12 | * @slot left - Displayed on the left side (if mobile is set to true). Used for hosting components such as Icon. 13 | * @slot right - Displayed on the right side (if mobile is set to true). Used for hosting components such as Icon. 14 | * 15 | * @fires logo-clicked - Fired when clicking on the logo. 16 | * 17 | * @cssprop --functions-gap - Defines the gap between elements in the functions slot. 18 | */ 19 | 20 | export class korAppBar extends LitElement { 21 | @property({ type: String, reflect: true }) label: string | undefined; 22 | @property({ type: String, reflect: true }) logo: string | undefined; 23 | @property({ type: Boolean, reflect: true }) mobile: boolean | undefined; 24 | 25 | static get styles() { 26 | return [ 27 | sharedStyles, 28 | css` 29 | :host { 30 | z-index: 3; 31 | height: calc(24px + var(--spacing-l) * 2); 32 | padding: 0 var(--spacing-l); 33 | display: flex; 34 | align-items: center; 35 | overflow: hidden; 36 | background-color: rgb(var(--base-0)); 37 | box-shadow: var(--shadow-1); 38 | transition: var(--transition-1); 39 | gap: calc(var(--spacing-l) * 2); 40 | /* css properties */ 41 | --functions-gap: var(--spacing-m); 42 | } 43 | .logo { 44 | height: 24px; 45 | } 46 | .label { 47 | font: var(--header-1); 48 | color: var(--text-1); 49 | max-width: 320px; 50 | white-space: nowrap; 51 | overflow: hidden; 52 | text-overflow: ellipsis; 53 | } 54 | /* mobile */ 55 | :host[mobile] { 56 | gap: var(--spacing-l); 57 | } 58 | :host([mobile]) .label { 59 | flex: 1; 60 | max-width: unset; 61 | text-align: center; 62 | } 63 | /* slots */ 64 | slot { 65 | display: flex; 66 | align-items: center; 67 | } 68 | slot:not([name]) { 69 | flex: 1; 70 | } 71 | slot[name='functions'] { 72 | gap: var(--functions-gap); 73 | } 74 | ::slotted(kor-tabs) { 75 | border-bottom: unset; 76 | } 77 | slot[name='right'], 78 | slot[name='left'] { 79 | min-width: 24px; 80 | } 81 | slot[name='right'] { 82 | margin-left: auto; 83 | } 84 | `, 85 | ]; 86 | } 87 | 88 | render() { 89 | return html` 90 | ${!this.mobile 91 | ? html` 92 | ${this.logo 93 | ? html` 94 | 99 | ` 100 | : ''} 101 | ${this.label ? html`
${this.label}
` : ''} 102 | 103 | 104 | ` 105 | : html` 106 | 107 | ${this.label ? html`
${this.label}
` : ''} 108 | 109 | `} 110 | `; 111 | } 112 | 113 | attributeChangedCallback(name: string, oldval: string, newval: string) { 114 | super.attributeChangedCallback(name, oldval, newval); 115 | this.dispatchEvent(new Event(`${name}-changed`)); 116 | } 117 | 118 | handleLogoClick() { 119 | this.dispatchEvent(new Event('logo-clicked')); 120 | } 121 | } 122 | 123 | if (!window.customElements.get('kor-app-bar')) { 124 | window.customElements.define('kor-app-bar', korAppBar); 125 | } 126 | -------------------------------------------------------------------------------- /components/avatar/index.d.ts: -------------------------------------------------------------------------------- 1 | export { korAvatar } from './kor-avatar'; 2 | -------------------------------------------------------------------------------- /components/avatar/index.ts: -------------------------------------------------------------------------------- 1 | export { korAvatar } from './kor-avatar'; 2 | -------------------------------------------------------------------------------- /components/avatar/kor-avatar.d.ts: -------------------------------------------------------------------------------- 1 | import { LitElement } from 'lit'; 2 | import '../icon'; 3 | import '../text'; 4 | /** 5 | * @prop {String} label - If set, defines the text label shown next to the icon/image. If the label is set and an image is not defined, the initials will be shown as a placeholder. 6 | * @prop {String} info - If set, defines the information text shown below the label. 7 | * @prop {String} image - If set, replaces the placeholder image with a custom image. 8 | * @prop {Boolean} condensed - If set, the image is shown in a smaller size. 9 | */ 10 | export declare class korAvatar extends LitElement { 11 | label: string | undefined; 12 | info: string | undefined; 13 | image: string | undefined; 14 | condensed: boolean | undefined; 15 | static get styles(): import("lit").CSSResultGroup[]; 16 | render(): import("lit-html").TemplateResult<1>; 17 | attributeChangedCallback(name: string, oldval: string, newval: string): void; 18 | getInitials(label: string): string; 19 | } 20 | -------------------------------------------------------------------------------- /components/avatar/kor-avatar.ts: -------------------------------------------------------------------------------- 1 | import { LitElement, css, html } from 'lit'; 2 | import { property } from 'lit/decorators'; 3 | import { sharedStyles } from '../../shared-styles'; 4 | import '../icon'; 5 | import '../text'; 6 | 7 | /** 8 | * @prop {String} label - If set, defines the text label shown next to the icon/image. If the label is set and an image is not defined, the initials will be shown as a placeholder. 9 | * @prop {String} info - If set, defines the information text shown below the label. 10 | * @prop {String} image - If set, replaces the placeholder image with a custom image. 11 | * @prop {Boolean} condensed - If set, the image is shown in a smaller size. 12 | */ 13 | 14 | export class korAvatar extends LitElement { 15 | @property({ type: String, reflect: true }) label: string | undefined; 16 | @property({ type: String, reflect: true }) info: string | undefined; 17 | @property({ type: String, reflect: true }) image: string | undefined; 18 | @property({ type: Boolean, reflect: true }) condensed: boolean | undefined; 19 | 20 | static get styles() { 21 | return [ 22 | sharedStyles, 23 | css` 24 | :host, 25 | .image { 26 | display: flex; 27 | align-items: center; 28 | } 29 | .text { 30 | display: flex; 31 | flex-direction: column; 32 | justify-content: center; 33 | flex: 1; 34 | margin-left: var(--spacing-s); 35 | overflow: hidden; 36 | } 37 | .label, 38 | .info { 39 | overflow: hidden; 40 | text-overflow: ellipsis; 41 | white-space: nowrap; 42 | } 43 | .label { 44 | font-weight: bold; 45 | } 46 | .image { 47 | overflow: hidden; 48 | justify-content: center; 49 | font: var(--header-2); 50 | color: var(--text-1); 51 | height: 32px; 52 | width: 32px; 53 | border-radius: 50%; 54 | background: rgba(var(--neutral-1), 0.1); 55 | } 56 | .image > img { 57 | width: 100%; 58 | height: 100%; 59 | object-fit: cover; 60 | } 61 | :host-context(kor-app-bar) { 62 | max-width: 288px; 63 | } 64 | /* condensed */ 65 | :host([condensed]) .image { 66 | height: 24px; 67 | width: 24px; 68 | } 69 | `, 70 | ]; 71 | } 72 | 73 | render() { 74 | return html` 75 | 76 |
77 | ${this.image 78 | ? html` ` 79 | : html` 80 | ${this.label 81 | ? html` ${this.getInitials(this.label)} ` 82 | : html` `} 83 | `} 84 |
85 | 86 | ${this.label || this.info 87 | ? html` 88 |
89 | ${this.label 90 | ? html`${this.label}` 93 | : ''} 94 | ${this.info 95 | ? html`${this.info}` 101 | : ''} 102 |
103 | ` 104 | : ''} 105 | `; 106 | } 107 | 108 | attributeChangedCallback(name: string, oldval: string, newval: string) { 109 | super.attributeChangedCallback(name, oldval, newval); 110 | this.dispatchEvent(new Event(`${name}-changed`)); 111 | } 112 | 113 | getInitials(label: string) { 114 | const initials = label.match(/\b\w/g) || []; 115 | return (initials.shift() || '') + (initials.pop() || '').toUpperCase(); 116 | } 117 | } 118 | 119 | if (!window.customElements.get('kor-avatar')) { 120 | window.customElements.define('kor-avatar', korAvatar); 121 | } 122 | -------------------------------------------------------------------------------- /components/badge/index.d.ts: -------------------------------------------------------------------------------- 1 | export { korBadge } from './kor-badge'; 2 | -------------------------------------------------------------------------------- /components/badge/index.ts: -------------------------------------------------------------------------------- 1 | export { korBadge } from './kor-badge'; 2 | -------------------------------------------------------------------------------- /components/badge/kor-badge.d.ts: -------------------------------------------------------------------------------- 1 | import { LitElement } from 'lit'; 2 | import '../icon'; 3 | import '../text'; 4 | /** 5 | * @prop {Number} label - If set, degines the number shown inside the badge. Numbers bigger than 3 digits are shown as 999+. 6 | * @prop {'error'|'warning'|'success'|undefined} status - If set, a status icon is shown inside the badge. Accepted values are `error`, `warning`, `success`. 7 | */ 8 | export declare class korBadge extends LitElement { 9 | label: number | undefined; 10 | status: 'error' | 'warning' | 'success' | undefined; 11 | static get styles(): import("lit").CSSResultGroup[]; 12 | render(): import("lit-html").TemplateResult<1>; 13 | attributeChangedCallback(name: string, oldval: string, newval: string): void; 14 | getStatusIcon(): string | undefined; 15 | } 16 | -------------------------------------------------------------------------------- /components/badge/kor-badge.ts: -------------------------------------------------------------------------------- 1 | import { LitElement, css, html } from 'lit'; 2 | import { property } from 'lit/decorators'; 3 | import { sharedStyles } from '../../shared-styles'; 4 | import '../icon'; 5 | import '../text'; 6 | 7 | /** 8 | * @prop {Number} label - If set, degines the number shown inside the badge. Numbers bigger than 3 digits are shown as 999+. 9 | * @prop {'error'|'warning'|'success'|undefined} status - If set, a status icon is shown inside the badge. Accepted values are `error`, `warning`, `success`. 10 | */ 11 | 12 | export class korBadge extends LitElement { 13 | @property({ type: Number, reflect: true }) label: number | undefined; 14 | @property({ type: String, reflect: true }) status: 15 | | 'error' 16 | | 'warning' 17 | | 'success' 18 | | undefined; 19 | 20 | static get styles() { 21 | return [ 22 | sharedStyles, 23 | css` 24 | :host { 25 | display: flex; 26 | justify-content: center; 27 | box-sizing: border-box; 28 | width: max-content; 29 | min-width: 16px; 30 | padding: 0 4px; 31 | border-radius: 8px; 32 | background: rgb(var(--functional-blue)); 33 | } 34 | :host(:not([label])) { 35 | padding: 4px; 36 | min-width: unset; 37 | } 38 | kor-text { 39 | color: white; 40 | font-weight: bold; 41 | } 42 | /* status */ 43 | :host([status]) { 44 | background: transparent; 45 | padding: 0px; 46 | } 47 | .status-icon[icon='cancel'] { 48 | color: rgb(var(--functional-red)); 49 | } 50 | .status-icon[icon='error'] { 51 | color: rgb(var(--functional-yellow)); 52 | } 53 | .status-icon[icon='check_circle'] { 54 | color: rgb(var(--functional-green)); 55 | } 56 | `, 57 | ]; 58 | } 59 | 60 | render() { 61 | return html` 62 | ${!this.status 63 | ? html` 64 | ${this.label 65 | ? html` 66 | 67 | ${this.label > 999 ? html` 999+ ` : html` ${this.label} `} 68 | 69 | ` 70 | : ''} 71 | ` 72 | : html` 73 | 74 | ${this.status 75 | ? html` 76 | 81 | ` 82 | : ''} 83 | `} 84 | `; 85 | } 86 | 87 | attributeChangedCallback(name: string, oldval: string, newval: string) { 88 | super.attributeChangedCallback(name, oldval, newval); 89 | this.dispatchEvent(new Event(`${name}-changed`)); 90 | } 91 | 92 | getStatusIcon(): string | undefined { 93 | let icon; 94 | switch (this.status) { 95 | case 'error': 96 | icon = 'cancel'; 97 | break; 98 | case 'warning': 99 | icon = 'error'; 100 | break; 101 | case 'success': 102 | icon = 'check_circle'; 103 | break; 104 | } 105 | return icon; 106 | } 107 | } 108 | 109 | if (!window.customElements.get('kor-badge')) { 110 | window.customElements.define('kor-badge', korBadge); 111 | } 112 | -------------------------------------------------------------------------------- /components/breadcrumbs/index.d.ts: -------------------------------------------------------------------------------- 1 | export { korBreadcrumbItem } from './kor-breadcrumb-item'; 2 | export { korBreadcrumbs } from './kor-breadcrumbs'; 3 | -------------------------------------------------------------------------------- /components/breadcrumbs/index.ts: -------------------------------------------------------------------------------- 1 | export { korBreadcrumbItem } from './kor-breadcrumb-item'; 2 | export { korBreadcrumbs } from './kor-breadcrumbs'; 3 | -------------------------------------------------------------------------------- /components/breadcrumbs/kor-breadcrumb-item.d.ts: -------------------------------------------------------------------------------- 1 | import { LitElement } from 'lit'; 2 | import '../icon'; 3 | import '../text'; 4 | /** 5 | * @prop {String} label - Defines the text label. 6 | * @prop {Boolean} active - Defines whether the item is currently active or not. 7 | */ 8 | export declare class korBreadcrumbItem extends LitElement { 9 | label: string; 10 | active: boolean | undefined; 11 | static get styles(): import("lit").CSSResultGroup[]; 12 | render(): import("lit-html").TemplateResult<1>; 13 | attributeChangedCallback(name: string, oldval: string, newval: string): void; 14 | firstItem(): boolean; 15 | } 16 | -------------------------------------------------------------------------------- /components/breadcrumbs/kor-breadcrumb-item.ts: -------------------------------------------------------------------------------- 1 | import { LitElement, css, html } from 'lit'; 2 | import { property } from 'lit/decorators'; 3 | import { sharedStyles } from '../../shared-styles'; 4 | import '../icon'; 5 | import '../text'; 6 | 7 | /** 8 | * @prop {String} label - Defines the text label. 9 | * @prop {Boolean} active - Defines whether the item is currently active or not. 10 | */ 11 | 12 | export class korBreadcrumbItem extends LitElement { 13 | @property({ type: String, reflect: true }) label = 'Label'; 14 | @property({ type: Boolean, reflect: true }) active: boolean | undefined; 15 | 16 | static get styles() { 17 | return [ 18 | sharedStyles, 19 | css` 20 | :host { 21 | display: flex; 22 | align-items: center; 23 | } 24 | kor-icon { 25 | pointer-events: none; 26 | margin: 0 var(--spacing-xs); 27 | } 28 | kor-text { 29 | color: var(--text-2); 30 | cursor: pointer; 31 | font-weight: bold; 32 | } 33 | :host([active]) kor-text { 34 | color: var(--text-1); 35 | } 36 | /* hover inputs */ 37 | @media (hover: hover) { 38 | kor-text:hover:not(:active) { 39 | color: var(--text-1); 40 | } 41 | } 42 | `, 43 | ]; 44 | } 45 | 46 | render() { 47 | return html` 48 | ${!this.firstItem() 49 | ? html` 50 | 54 | ` 55 | : ''} 56 | ${this.label} 57 | `; 58 | } 59 | 60 | attributeChangedCallback(name: string, oldval: string, newval: string) { 61 | super.attributeChangedCallback(name, oldval, newval); 62 | this.dispatchEvent(new Event(`${name}-changed`)); 63 | } 64 | 65 | firstItem(): boolean { 66 | let firstItem: boolean, children: any; 67 | children = Array.prototype.slice.call(this.parentElement?.children); 68 | firstItem = children.indexOf(this) == 0; 69 | return firstItem; 70 | } 71 | } 72 | 73 | if (!window.customElements.get('kor-breadcrumb-item')) { 74 | window.customElements.define('kor-breadcrumb-item', korBreadcrumbItem); 75 | } 76 | -------------------------------------------------------------------------------- /components/breadcrumbs/kor-breadcrumbs.d.ts: -------------------------------------------------------------------------------- 1 | import { LitElement } from 'lit'; 2 | /** 3 | * @slot - The default slot. Takes `kor-breadcrumb-item`s as children. 4 | */ 5 | export declare class korBreadcrumbs extends LitElement { 6 | static get styles(): import("lit").CSSResultGroup[]; 7 | render(): import("lit-html").TemplateResult<1>; 8 | } 9 | -------------------------------------------------------------------------------- /components/breadcrumbs/kor-breadcrumbs.ts: -------------------------------------------------------------------------------- 1 | import { LitElement, css, html } from 'lit'; 2 | import { sharedStyles } from '../../shared-styles'; 3 | 4 | /** 5 | * @slot - The default slot. Takes `kor-breadcrumb-item`s as children. 6 | */ 7 | 8 | export class korBreadcrumbs extends LitElement { 9 | static get styles() { 10 | return [ 11 | sharedStyles, 12 | css` 13 | :host { 14 | display: flex; 15 | width: 100%; 16 | height: max-content; 17 | } 18 | `, 19 | ]; 20 | } 21 | 22 | render() { 23 | return html` `; 24 | } 25 | } 26 | 27 | if (!window.customElements.get('kor-breadcrumbs')) { 28 | window.customElements.define('kor-breadcrumbs', korBreadcrumbs); 29 | } 30 | -------------------------------------------------------------------------------- /components/button/index.d.ts: -------------------------------------------------------------------------------- 1 | export { korButton } from './kor-button'; 2 | -------------------------------------------------------------------------------- /components/button/index.ts: -------------------------------------------------------------------------------- 1 | export { korButton } from './kor-button'; 2 | -------------------------------------------------------------------------------- /components/button/kor-button.d.ts: -------------------------------------------------------------------------------- 1 | import { LitElement } from 'lit'; 2 | import '../icon'; 3 | /** 4 | * @prop {String} label - Defines the text label. 5 | * @prop {String} icon - If set, replaces the text label with a custom icon. 6 | * @prop {'primary'|'secondary'|'tertiary'} color - Defines the color. The possible values are `primary`, `secondary` and `tertiary` 7 | * @prop {Boolean} disabled - If set to true, disables mouse clicks and the style gets updated. 8 | */ 9 | export declare class korButton extends LitElement { 10 | label: string | undefined; 11 | icon: string | undefined; 12 | color: 'primary' | 'secondary' | 'tertiary'; 13 | disabled: boolean | undefined; 14 | static get styles(): import("lit").CSSResultGroup[]; 15 | render(): import("lit-html").TemplateResult<1>; 16 | attributeChangedCallback(name: string, oldval: string, newval: string): void; 17 | } 18 | -------------------------------------------------------------------------------- /components/button/kor-button.ts: -------------------------------------------------------------------------------- 1 | import { LitElement, css, html } from 'lit'; 2 | import { property } from 'lit/decorators'; 3 | import { sharedStyles } from '../../shared-styles'; 4 | import '../icon'; 5 | 6 | /** 7 | * @prop {String} label - Defines the text label. 8 | * @prop {String} icon - If set, replaces the text label with a custom icon. 9 | * @prop {'primary'|'secondary'|'tertiary'} color - Defines the color. The possible values are `primary`, `secondary` and `tertiary` 10 | * @prop {Boolean} disabled - If set to true, disables mouse clicks and the style gets updated. 11 | */ 12 | 13 | export class korButton extends LitElement { 14 | @property({ type: String, reflect: true }) label: string | undefined; 15 | @property({ type: String, reflect: true }) icon: string | undefined; 16 | @property({ type: String, reflect: true }) color: 17 | | 'primary' 18 | | 'secondary' 19 | | 'tertiary' = 'primary'; 20 | @property({ type: Boolean, reflect: true }) disabled: boolean | undefined; 21 | 22 | static get styles() { 23 | return [ 24 | sharedStyles, 25 | css` 26 | :host { 27 | font: var(--header-2); 28 | color: var(--text-1); 29 | display: flex; 30 | gap: var(--spacing-xs); 31 | height: max-content; 32 | width: max-content; 33 | border-radius: var(--border-radius); 34 | cursor: pointer; 35 | transition: var(--transition-1); 36 | justify-content: center; 37 | user-select: none; 38 | white-space: nowrap; 39 | overflow: hidden; 40 | text-overflow: ellipsis; 41 | } 42 | :host([label]) { 43 | min-width: calc(24px + var(--spacing-l) * 2); 44 | max-width: 160px; 45 | padding: var(--spacing-xs) var(--spacing-m); 46 | } 47 | :host([color='tertiary'][label]) { 48 | padding: 3px 11px; 49 | } 50 | :host(:not([label])) { 51 | padding: var(--spacing-xs); 52 | } 53 | :host([color='tertiary']:not([label])) { 54 | padding: 3px; 55 | } 56 | /* idle */ 57 | :host([color='primary']) { 58 | background-color: rgb(var(--accent-1)); 59 | } 60 | :host([color='secondary']) { 61 | background-color: rgba(var(--neutral-1), 0.1); 62 | } 63 | :host([color='tertiary']) { 64 | border-width: 1px; 65 | border-style: solid; 66 | border-color: rgba(var(--neutral-1), 0.25); 67 | } 68 | /* disabled */ 69 | :host([disabled]) { 70 | pointer-events: none; 71 | opacity: 0.2; 72 | } 73 | /* text and icon colors */ 74 | kor-icon { 75 | color: unset; 76 | } 77 | :host([color='primary']) { 78 | color: rgba(255, 255, 255, 0.9); 79 | } 80 | /* hover inputs */ 81 | @media (hover: hover) { 82 | :host([color='primary']:not(:active):hover) { 83 | background-color: rgb(var(--accent-1b)); 84 | } 85 | :host([color='secondary']:not(:active):hover) { 86 | background-color: rgba(var(--neutral-1), 0.15); 87 | } 88 | :host([color='tertiary']:not(:active):hover) { 89 | border-color: rgba(var(--neutral-1), 0.3); 90 | background-color: rgba(var(--neutral-1), 0.05); 91 | } 92 | } 93 | `, 94 | ]; 95 | } 96 | 97 | render() { 98 | return html` 99 | 100 | ${this.icon ? html` ` : ''} 101 | 102 | ${this.label ? html` ${this.label} ` : ''} 103 | `; 104 | } 105 | 106 | attributeChangedCallback(name: string, oldval: string, newval: string) { 107 | super.attributeChangedCallback(name, oldval, newval); 108 | this.dispatchEvent(new Event(`${name}-changed`)); 109 | } 110 | } 111 | 112 | if (!window.customElements.get('kor-button')) { 113 | window.customElements.define('kor-button', korButton); 114 | } 115 | -------------------------------------------------------------------------------- /components/card/index.d.ts: -------------------------------------------------------------------------------- 1 | export { korCard } from './kor-card'; 2 | -------------------------------------------------------------------------------- /components/card/index.ts: -------------------------------------------------------------------------------- 1 | export { korCard } from './kor-card'; 2 | -------------------------------------------------------------------------------- /components/card/kor-card.d.ts: -------------------------------------------------------------------------------- 1 | import { LitElement } from 'lit'; 2 | import '../icon'; 3 | /** 4 | * @prop {String} label - If set, defines the text label. 5 | * @prop {String} icon - If set, defines the icon shown close to the label. 6 | * @prop {String} image - If set, defines the image shown on top of the card. 7 | * @prop {'row'|'column'} flexDirection - Defines the direction in which the slotted content flows (e.g. top to bottom or left to right). Possible values are `column` and `row`. 8 | * @prop {Boolean} flat - If set, background, shadows and external padding are not shown. 9 | * 10 | * @slot - Displayed inside the content area. 11 | * @slot header - Shown on top of the card, below the label (if any is set). 12 | * @slot functions - Shown on the right side of the label or header slot. 13 | * @slot footer - Shown below the content area. 14 | * 15 | * @cssprop --body-gap - Defines the gap between elements in the body slot. 16 | * @cssprop --header-gap - Defines the gap between elements in the header slot. 17 | * @cssprop --functions-gap - Defines the gap between elements in the functions slot. 18 | * @cssprop --footer-gap - Defines the gap between elements in the footer slot. 19 | */ 20 | export declare class korCard extends LitElement { 21 | label: string | undefined; 22 | icon: string | undefined; 23 | image: string | undefined; 24 | flexDirection: 'column' | 'row'; 25 | flat: boolean | undefined; 26 | emptyHeader: boolean; 27 | emptyFunctions: boolean; 28 | emptyFooter: boolean; 29 | static get styles(): import("lit").CSSResultGroup[]; 30 | render(): import("lit-html").TemplateResult<1>; 31 | attributeChangedCallback(name: string, oldval: string, newval: string): void; 32 | } 33 | -------------------------------------------------------------------------------- /components/checkbox/index.d.ts: -------------------------------------------------------------------------------- 1 | export { korCheckbox } from './kor-checkbox'; 2 | -------------------------------------------------------------------------------- /components/checkbox/index.ts: -------------------------------------------------------------------------------- 1 | export { korCheckbox } from './kor-checkbox'; 2 | -------------------------------------------------------------------------------- /components/checkbox/kor-checkbox.d.ts: -------------------------------------------------------------------------------- 1 | import { LitElement } from 'lit'; 2 | import '../icon'; 3 | import '../text'; 4 | /** 5 | * @prop {String} label - If set, defines the text label. 6 | * @prop {Boolean} active - If set to true, a highlight style gets applied. 7 | * @prop {Boolean} disabled - If set to true, disables mouse clicks and the style gets updated. 8 | */ 9 | export declare class korCheckbox extends LitElement { 10 | label: string | undefined; 11 | active: boolean | undefined; 12 | disabled: boolean | undefined; 13 | static get styles(): import("lit").CSSResultGroup[]; 14 | render(): import("lit-html").TemplateResult<1>; 15 | attributeChangedCallback(name: string, oldval: string, newval: string): void; 16 | connectedCallback(): void; 17 | handleChange(): void; 18 | } 19 | -------------------------------------------------------------------------------- /components/checkbox/kor-checkbox.ts: -------------------------------------------------------------------------------- 1 | import { LitElement, css, html } from 'lit'; 2 | import { property } from 'lit/decorators'; 3 | import { sharedStyles } from '../../shared-styles'; 4 | import '../icon'; 5 | import '../text'; 6 | 7 | /** 8 | * @prop {String} label - If set, defines the text label. 9 | * @prop {Boolean} active - If set to true, a highlight style gets applied. 10 | * @prop {Boolean} disabled - If set to true, disables mouse clicks and the style gets updated. 11 | */ 12 | 13 | export class korCheckbox extends LitElement { 14 | @property({ type: String, reflect: true }) label: string | undefined; 15 | @property({ type: Boolean, reflect: true }) active: boolean | undefined; 16 | @property({ type: Boolean, reflect: true }) disabled: boolean | undefined; 17 | 18 | static get styles() { 19 | return [ 20 | sharedStyles, 21 | css` 22 | :host { 23 | display: flex; 24 | cursor: pointer; 25 | } 26 | input { 27 | display: none; 28 | } 29 | /* box */ 30 | .box { 31 | display: flex; 32 | align-items: center; 33 | justify-content: center; 34 | width: 16px; 35 | height: 16px; 36 | margin: 4px; 37 | border-radius: 2px; 38 | box-sizing: border-box; 39 | border: 2px solid rgba(var(--neutral-1), 0.25); 40 | transition: var(--transition-1); 41 | } 42 | :host([active]) .box { 43 | border-color: transparent; 44 | background: rgb(var(--accent-1)); 45 | } 46 | /* label */ 47 | kor-text { 48 | flex: 1; 49 | margin-left: var(--spacing-s); 50 | white-space: nowrap; 51 | overflow: hidden; 52 | text-overflow: ellipsis; 53 | pointer-events: none; 54 | } 55 | /* disabled */ 56 | :host([disabled]) { 57 | pointer-events: none; 58 | opacity: 0.2; 59 | } 60 | /* hover inputs */ 61 | @media (hover: hover) { 62 | :host(:hover:not([active]):not(:active)) .box { 63 | border-color: rgba(var(--neutral-1), 0.3); 64 | } 65 | } 66 | `, 67 | ]; 68 | } 69 | 70 | render() { 71 | return html` 72 | 80 |
81 | ${this.active 82 | ? html` ` 83 | : ''} 84 |
85 | ${this.label ? html` ${this.label} ` : ''} 86 | `; 87 | } 88 | 89 | attributeChangedCallback(name: string, oldval: string, newval: string) { 90 | super.attributeChangedCallback(name, oldval, newval); 91 | this.dispatchEvent(new Event(`${name}-changed`)); 92 | } 93 | 94 | connectedCallback() { 95 | super.connectedCallback(); 96 | this.addEventListener('click', () => { 97 | this.active = !this.active; 98 | }); 99 | } 100 | 101 | handleChange() { 102 | this.dispatchEvent( 103 | new CustomEvent('change', { 104 | bubbles: true, 105 | composed: true, 106 | }) 107 | ); 108 | } 109 | } 110 | 111 | if (!window.customElements.get('kor-checkbox')) { 112 | window.customElements.define('kor-checkbox', korCheckbox); 113 | } 114 | -------------------------------------------------------------------------------- /components/divider/index.d.ts: -------------------------------------------------------------------------------- 1 | export { korDivider } from './kor-divider'; 2 | -------------------------------------------------------------------------------- /components/divider/index.ts: -------------------------------------------------------------------------------- 1 | export { korDivider } from './kor-divider'; 2 | -------------------------------------------------------------------------------- /components/divider/kor-divider.d.ts: -------------------------------------------------------------------------------- 1 | import { LitElement } from 'lit'; 2 | /** 3 | * @prop {'s'|'m'|'l'} spacing - Defines the space around the divider. Possible values are `s`, `m` and `l`. 4 | * @prop {'horizontal'|'vertical'} orientation - Defines the orientation of the divider. Possible values are `vertical` and `horizontal`. 5 | */ 6 | export declare class korDivider extends LitElement { 7 | spacing: 's' | 'm' | 'l'; 8 | orientation: 'horizontal' | 'vertical'; 9 | static get styles(): import("lit").CSSResultGroup[]; 10 | render(): import("lit-html").TemplateResult<1>; 11 | attributeChangedCallback(name: string, oldval: string, newval: string): void; 12 | } 13 | -------------------------------------------------------------------------------- /components/divider/kor-divider.ts: -------------------------------------------------------------------------------- 1 | import { LitElement, css, html } from 'lit'; 2 | import { property } from 'lit/decorators'; 3 | import { sharedStyles } from '../../shared-styles'; 4 | 5 | /** 6 | * @prop {'s'|'m'|'l'} spacing - Defines the space around the divider. Possible values are `s`, `m` and `l`. 7 | * @prop {'horizontal'|'vertical'} orientation - Defines the orientation of the divider. Possible values are `vertical` and `horizontal`. 8 | */ 9 | 10 | export class korDivider extends LitElement { 11 | @property({ type: String, reflect: true }) spacing: 's' | 'm' | 'l' = 'm'; 12 | @property({ type: String, reflect: true }) orientation: 13 | | 'horizontal' 14 | | 'vertical' = 'horizontal'; 15 | 16 | static get styles() { 17 | return [ 18 | sharedStyles, 19 | css` 20 | :host([orientation='horizontal']) { 21 | width: 100%; 22 | } 23 | :host([orientation='vertical']) { 24 | height: 100%; 25 | } 26 | .line { 27 | background: rgba(var(--neutral-1), 0.25); 28 | } 29 | :host([orientation='horizontal']) .line { 30 | height: 1px; 31 | width: 100%; 32 | } 33 | :host([orientation='vertical']) .line { 34 | width: 1px; 35 | height: 100%; 36 | } 37 | /* spacing */ 38 | :host([spacing='s'][orientation='horizontal']) { 39 | padding: var(--spacing-s) 0; 40 | } 41 | :host([spacing='m'][orientation='horizontal']) { 42 | padding: var(--spacing-l) 0; 43 | } 44 | :host([spacing='l'][orientation='horizontal']) { 45 | padding: calc(var(--spacing-l) * 2) 0; 46 | } 47 | :host([spacing='s'][orientation='vertical']) { 48 | padding: 0 var(--spacing-s); 49 | } 50 | :host([spacing='m'][orientation='vertical']) { 51 | padding: 0 var(--spacing-l); 52 | } 53 | :host([spacing='l'][orientation='vertical']) { 54 | padding: 0 calc(var(--spacing-s) * 2); 55 | } 56 | `, 57 | ]; 58 | } 59 | 60 | render() { 61 | return html`
`; 62 | } 63 | 64 | attributeChangedCallback(name: string, oldval: string, newval: string) { 65 | super.attributeChangedCallback(name, oldval, newval); 66 | this.dispatchEvent(new Event(`${name}-changed`)); 67 | } 68 | } 69 | 70 | if (!window.customElements.get('kor-divider')) { 71 | window.customElements.define('kor-divider', korDivider); 72 | } 73 | -------------------------------------------------------------------------------- /components/drawer/index.d.ts: -------------------------------------------------------------------------------- 1 | export { korDrawer } from './kor-drawer'; 2 | -------------------------------------------------------------------------------- /components/drawer/index.ts: -------------------------------------------------------------------------------- 1 | export { korDrawer } from './kor-drawer'; 2 | -------------------------------------------------------------------------------- /components/drawer/kor-drawer.d.ts: -------------------------------------------------------------------------------- 1 | import { LitElement } from 'lit'; 2 | import '../card'; 3 | import '../icon'; 4 | /** 5 | * @prop {String} label - If set, defines the text label. 6 | * @prop {String} icon - If set, defines the icon shown close to the label. 7 | * @prop {'left'|'right'|'top'|'bottom'} position - Defines the position of the component in the screen. Possible values are `left`, `right`, `top` and `bottom`. 8 | * @prop {'row'|'column'} flexDirection - Defines the direction in which the slotted content flows (e.g. top to bottom or left to right). Possible values are `column` and `row`. 9 | * @prop {String} height - Defines the height of the container (not the overlay). 10 | * @prop {String} width - Defines the width of the container (not the overlay). 11 | * @prop {Boolean} visible - If set to true, displays the component on top of the screen. 12 | * @prop {Boolean} sticky - If set to true, clicking on the background will not hide the component. The close icon will also not be displayed. 13 | * 14 | * @slot - Displayed inside the content area. 15 | * @slot header - If used, the header slot is shown on top of the component, below the label (if any is set). 16 | * @slot functions - Shown on the right side of the label or header slot. 17 | * @slot footer - Shown below the content area. 18 | * 19 | * @cssprop --body-gap - Defines the gap between elements in the body slot. 20 | * @cssprop --header-gap - Defines the gap between elements in the header slot. 21 | * @cssprop --functions-gap - Defines the gap between elements in the functions slot. 22 | * @cssprop --footer-gap - Defines the gap between elements in the footer slot. 23 | */ 24 | export declare class korDrawer extends LitElement { 25 | label: string | undefined; 26 | icon: string | undefined; 27 | position: 'left' | 'right' | 'top' | 'bottom'; 28 | height: string; 29 | width: string; 30 | flexDirection: 'row' | 'column'; 31 | visible: boolean | undefined; 32 | sticky: boolean | undefined; 33 | emptyHeader: boolean; 34 | emptyFunctions: boolean; 35 | emptyFooter: boolean; 36 | static get styles(): import("lit").CSSResultGroup[]; 37 | render(): import("lit-html").TemplateResult<1>; 38 | attributeChangedCallback(name: string, oldval: string, newval: string): void; 39 | getCardSize(): any; 40 | } 41 | -------------------------------------------------------------------------------- /components/empty-state/index.d.ts: -------------------------------------------------------------------------------- 1 | export { korEmptyState } from './kor-empty-state'; 2 | -------------------------------------------------------------------------------- /components/empty-state/index.ts: -------------------------------------------------------------------------------- 1 | export { korEmptyState } from './kor-empty-state'; 2 | -------------------------------------------------------------------------------- /components/empty-state/kor-empty-state.d.ts: -------------------------------------------------------------------------------- 1 | import { LitElement } from 'lit'; 2 | import '../icon'; 3 | import '../text'; 4 | /** 5 | * @prop {String} label - If set, defines the text label shown under the icon. 6 | * @prop {String} icon - If set, defines the icon shown above the label. 7 | * 8 | * @slot footer - Displayed below the label. 9 | * 10 | * @cssprop --footer-gap - Defines the gap between elements in the footer slot. 11 | */ 12 | export declare class korEmptyState extends LitElement { 13 | label: string | undefined; 14 | icon: string | undefined; 15 | static get styles(): import("lit").CSSResultGroup[]; 16 | render(): import("lit-html").TemplateResult<1>; 17 | attributeChangedCallback(name: string, oldval: string, newval: string): void; 18 | } 19 | -------------------------------------------------------------------------------- /components/empty-state/kor-empty-state.ts: -------------------------------------------------------------------------------- 1 | import { LitElement, css, html } from 'lit'; 2 | import { property } from 'lit/decorators'; 3 | import { sharedStyles } from '../../shared-styles'; 4 | import '../icon'; 5 | import '../text'; 6 | 7 | /** 8 | * @prop {String} label - If set, defines the text label shown under the icon. 9 | * @prop {String} icon - If set, defines the icon shown above the label. 10 | * 11 | * @slot footer - Displayed below the label. 12 | * 13 | * @cssprop --footer-gap - Defines the gap between elements in the footer slot. 14 | */ 15 | 16 | export class korEmptyState extends LitElement { 17 | @property({ type: String, reflect: true }) label: string | undefined; 18 | @property({ type: String, reflect: true }) icon: string | undefined; 19 | 20 | static get styles() { 21 | return [ 22 | sharedStyles, 23 | css` 24 | :host { 25 | height: 100%; 26 | width: 100%; 27 | display: flex; 28 | flex-direction: column; 29 | align-items: center; 30 | justify-content: center; 31 | /* css properties */ 32 | --footer-gap: var(--spacing-m); 33 | } 34 | slot[name='footer'] { 35 | display: flex; 36 | margin-top: var(--spacing-l); 37 | gap: var(--footer-gap); 38 | } 39 | kor-icon + kor-text { 40 | margin-top: var(--spacing-s); 41 | } 42 | kor-text { 43 | text-align: center; 44 | } 45 | `, 46 | ]; 47 | } 48 | 49 | render() { 50 | return html` 51 | ${this.icon 52 | ? html` 53 | 58 | ` 59 | : ''} 60 | ${this.label 61 | ? html` ${this.label} ` 62 | : ''} 63 | 64 | `; 65 | } 66 | 67 | attributeChangedCallback(name: string, oldval: string, newval: string) { 68 | super.attributeChangedCallback(name, oldval, newval); 69 | this.dispatchEvent(new Event(`${name}-changed`)); 70 | } 71 | } 72 | 73 | if (!window.customElements.get('kor-empty-state')) { 74 | window.customElements.define('kor-empty-state', korEmptyState); 75 | } 76 | -------------------------------------------------------------------------------- /components/grid/index.d.ts: -------------------------------------------------------------------------------- 1 | export { korGrid } from './kor-grid'; 2 | -------------------------------------------------------------------------------- /components/grid/index.ts: -------------------------------------------------------------------------------- 1 | export { korGrid } from './kor-grid'; 2 | -------------------------------------------------------------------------------- /components/grid/kor-grid.d.ts: -------------------------------------------------------------------------------- 1 | import { LitElement } from 'lit'; 2 | /** 3 | * @prop {Number} columns - Defines how many columns the grid has. 4 | * @prop {Number} rows - If set, defines how many rows the grid has. If left undefined, the rows will be automatically populated according to the columns wrapping. 5 | * @prop {'s'|'m'|'l'} spacing - Defines the gap between the elements in the grid. Possible values are `s`(8px), `m`(12px) and `l`(16px). 6 | * 7 | * @slot - The slot where the content is rendered. 8 | */ 9 | export declare class korGrid extends LitElement { 10 | columns: number; 11 | rows: Number | undefined; 12 | spacing: 's' | 'm' | 'l'; 13 | static get styles(): import("lit").CSSResultGroup[]; 14 | render(): import("lit-html").TemplateResult<1>; 15 | attributeChangedCallback(name: string, oldval: string, newval: string): void; 16 | } 17 | -------------------------------------------------------------------------------- /components/icon/index.d.ts: -------------------------------------------------------------------------------- 1 | export { korIcon } from './kor-icon'; 2 | -------------------------------------------------------------------------------- /components/icon/index.ts: -------------------------------------------------------------------------------- 1 | export { korIcon } from './kor-icon'; 2 | -------------------------------------------------------------------------------- /components/icon/kor-icon.d.ts: -------------------------------------------------------------------------------- 1 | import { LitElement } from 'lit'; 2 | /** 3 | * @prop {String} icon - Defines the icon shown. Takes any string from the Material Design Library or custom url('') pointing to local or remote images or vectors. 4 | * @prop {'s'|'m'|'l'|'xl'} size - If set, defines the size of the icon. Possible values are `xl`(48px) `l`(32px), `m`(24px) and `s`(16px), but css font-size can be used to set custom sizes. 5 | * @prop {String} color - If set, replaces the text label with a custom icon. 6 | * @prop {Boolean} button - If set to true, updates hover, click effects and cursors. 7 | * @prop {Boolean} disabled - If set to true, disables mouse clicks and the style gets updated. 8 | */ 9 | export declare class korIcon extends LitElement { 10 | icon: string | undefined; 11 | color: string | undefined; 12 | size: 's' | 'm' | 'l' | 'xl'; 13 | button: boolean | undefined; 14 | disabled: boolean | undefined; 15 | static get styles(): import("lit").CSSResultGroup[]; 16 | render(): import("lit-html").TemplateResult<1>; 17 | attributeChangedCallback(name: string, oldval: string, newval: string): void; 18 | private setBackgroundImage; 19 | } 20 | -------------------------------------------------------------------------------- /components/icon/kor-icon.ts: -------------------------------------------------------------------------------- 1 | import { LitElement, css, html } from 'lit'; 2 | import { property } from 'lit/decorators'; 3 | import { sharedStyles } from '../../shared-styles'; 4 | 5 | /** 6 | * @prop {String} icon - Defines the icon shown. Takes any string from the Material Design Library or custom url('') pointing to local or remote images or vectors. 7 | * @prop {'s'|'m'|'l'|'xl'} size - If set, defines the size of the icon. Possible values are `xl`(48px) `l`(32px), `m`(24px) and `s`(16px), but css font-size can be used to set custom sizes. 8 | * @prop {String} color - If set, replaces the text label with a custom icon. 9 | * @prop {Boolean} button - If set to true, updates hover, click effects and cursors. 10 | * @prop {Boolean} disabled - If set to true, disables mouse clicks and the style gets updated. 11 | */ 12 | 13 | export class korIcon extends LitElement { 14 | @property({ type: String, reflect: true }) icon: string | undefined; 15 | @property({ type: String, reflect: true }) color: string | undefined; 16 | @property({ type: String, reflect: true }) size: 's' | 'm' | 'l' | 'xl' = 'm'; 17 | @property({ type: Boolean, reflect: true }) button: boolean | undefined; 18 | @property({ type: Boolean, reflect: true }) disabled: boolean | undefined; 19 | 20 | static get styles() { 21 | return [ 22 | sharedStyles, 23 | css` 24 | :host { 25 | font-family: 'md-icons'; 26 | line-height: 1; 27 | -webkit-font-smoothing: auto; 28 | text-rendering: optimizeLegibility; 29 | -moz-osx-font-smoothing: grayscale; 30 | font-feature-settings: 'liga'; 31 | opacity: 0.9; 32 | color: var(--text-1); 33 | transition: var(--transition-1); 34 | height: max-content; 35 | width: max-content; 36 | min-height: max-content; 37 | min-width: max-content; 38 | overflow: hidden; 39 | background-repeat: no-repeat; 40 | background-position: center; 41 | background-size: contain; 42 | } 43 | :host([button]) { 44 | opacity: 0.6; 45 | cursor: pointer; 46 | } 47 | :host([disabled]) { 48 | pointer-events: none; 49 | opacity: 0.2; 50 | } 51 | /* size */ 52 | :host([size='xl']) { 53 | height: 48px; 54 | width: 48px; 55 | font-size: 48px; 56 | } 57 | :host([size='l']) { 58 | height: 32px; 59 | width: 32px; 60 | font-size: 32px; 61 | } 62 | :host([size='m']) { 63 | height: 24px; 64 | width: 24px; 65 | font-size: 24px; 66 | } 67 | :host([size='s']) { 68 | height: 16px; 69 | width: 16px; 70 | font-size: 16px; 71 | } 72 | /* hover inputs */ 73 | @media (hover: hover) { 74 | :host([button]:hover:not(:active)) { 75 | opacity: 0.9; 76 | } 77 | } 78 | `, 79 | ]; 80 | } 81 | 82 | render() { 83 | return html` ${this.icon?.indexOf('url') ? html` ${this.icon} ` : ''}`; 84 | } 85 | 86 | attributeChangedCallback(name: string, oldval: string, newval: string) { 87 | super.attributeChangedCallback(name, oldval, newval); 88 | this.dispatchEvent(new Event(`${name}-changed`)); 89 | if (name == 'color' && this.color) { 90 | this.style.color = this.color; 91 | } else if (name == 'icon' && newval.indexOf('url') > -1) { 92 | this.setBackgroundImage(newval); 93 | } 94 | } 95 | 96 | private setBackgroundImage(val: string): void { 97 | this.style.backgroundImage = val; 98 | } 99 | } 100 | 101 | if (!window.customElements.get('kor-icon')) { 102 | window.customElements.define('kor-icon', korIcon); 103 | } 104 | -------------------------------------------------------------------------------- /components/image/index.ts: -------------------------------------------------------------------------------- 1 | export { korImage } from './kor-image'; 2 | -------------------------------------------------------------------------------- /components/image/kor-image.ts: -------------------------------------------------------------------------------- 1 | import { LitElement, css, html } from 'lit'; 2 | import { property } from 'lit/decorators'; 3 | import { sharedStyles } from '../../shared-styles'; 4 | import '../text'; 5 | 6 | /** 7 | * @prop {String} src - Defines the source image to be displayed. Must be a url (web or relative path). 8 | * @prop {String} alt - Defines the text shown in case the image cannot be loaded. 9 | * @prop {String} width - Defines the width of the image. Can take a numeric or percentual value. 10 | * @prop {String} height - Defines the height of the image. Can take a numeric or percentual value. 11 | * @prop {'fill'|'contain'|'cover'|'none'|'scale-down'} fit - Defines how the image fits to the component. Possible values are `fill`, `contain`, `cover`, `none` and `scale-down`. 12 | * @prop {String} legend - Defines the legend text. 13 | * @prop {'inner-top'|'inner-bottom'} legendPosition - Defines the position of the legend. Possible values are `inner-top` and `inner-bottom`. If left unset, the legend is displayed underneath the image 14 | * @slot top - The container for components overlayed at the top corner of the image. 15 | * @slot bottom - The container for components overlayed at the bottom corner of the image. 16 | */ 17 | 18 | export class korImage extends LitElement { 19 | @property({ type: String, reflect: true }) src: string | undefined; 20 | @property({ type: String, reflect: true }) alt: string | undefined; 21 | @property({ type: String, reflect: true }) height: string | undefined; 22 | @property({ type: String, reflect: true }) width = '100%'; 23 | @property({ type: String, reflect: true }) fit: 24 | | 'fill' 25 | | 'contain' 26 | | 'cover' 27 | | 'none' 28 | | 'scale-down' = 'contain'; 29 | @property({ type: String, reflect: true }) legend: string | undefined; 30 | @property({ type: String, reflect: true, attribute: 'legend-position' }) 31 | legendPosition: string | undefined; 32 | 33 | static get styles() { 34 | return [ 35 | sharedStyles, 36 | css` 37 | :host { 38 | position: relative; 39 | max-width: max-content; 40 | display: flex; 41 | flex-direction: column; 42 | font: var(--body-2); 43 | color: var(--text-1); 44 | } 45 | /* legend */ 46 | kor-text { 47 | width: 100%; 48 | color: unset; 49 | font: unset; 50 | overflow: hidden; 51 | text-overflow: ellipsis; 52 | white-space: nowrap; 53 | } 54 | :host(:not([legend-position])) kor-text { 55 | margin-top: var(--spacing-s); 56 | } 57 | :host([legend-position^='inner-']) kor-text { 58 | position: absolute; 59 | padding: var(--spacing-s); 60 | box-sizing: border-box; 61 | } 62 | :host([legend-position='inner-top']) kor-text { 63 | top: 0; 64 | background-image: linear-gradient( 65 | rgba(0, 0, 0, 0.8), 66 | rgba(0, 0, 0, 0.6), 67 | rgba(0, 0, 0, 0) 68 | ); 69 | } 70 | :host([legend-position='inner-bottom']) kor-text { 71 | bottom: 0; 72 | background-image: linear-gradient( 73 | rgba(0, 0, 0, 0), 74 | rgba(0, 0, 0, 0.6), 75 | rgba(0, 0, 0, 0.8) 76 | ); 77 | } 78 | /* slots */ 79 | slot { 80 | display: flex; 81 | justify-content: flex-end; 82 | gap: var(--spacing-s); 83 | position: absolute; 84 | padding: var(--spacing-xs); 85 | box-sizing: border-box; 86 | width: 100%; 87 | overflow: hidden; 88 | } 89 | slot[name='top'] { 90 | top: 0; 91 | } 92 | :host([legend][legend-position='inner-top']) slot[name='top'] { 93 | top: 24px; 94 | } 95 | slot[name='bottom'] { 96 | bottom: 0; 97 | } 98 | :host([legend]:not([legend-position])) slot[name='bottom'], 99 | :host([legend][legend-position='inner-bottom']) slot[name='bottom'] { 100 | bottom: 24px; 101 | } 102 | `, 103 | ]; 104 | } 105 | 106 | render() { 107 | return html` 108 | ${this.alt} 115 | ${this.legend ? html` ${this.legend} ` : ''} 116 | 117 | 118 | `; 119 | } 120 | 121 | attributeChangedCallback(name: string, oldval: string, newval: string) { 122 | super.attributeChangedCallback(name, oldval, newval); 123 | this.dispatchEvent(new Event(`${name}-changed`)); 124 | } 125 | } 126 | 127 | if (!window.customElements.get('kor-image')) { 128 | window.customElements.define('kor-image', korImage); 129 | } 130 | -------------------------------------------------------------------------------- /components/input/index.d.ts: -------------------------------------------------------------------------------- 1 | export { korInput } from './kor-input'; 2 | -------------------------------------------------------------------------------- /components/input/index.ts: -------------------------------------------------------------------------------- 1 | export { korInput } from './kor-input'; 2 | -------------------------------------------------------------------------------- /components/input/kor-input.d.ts: -------------------------------------------------------------------------------- 1 | import { LitElement } from 'lit'; 2 | import '../card'; 3 | import '../icon'; 4 | /** 5 | * @prop {String} label - If set, defines the text label shown on top. 6 | * @prop {String} icon - If set, defines the icon shown before the label/value. 7 | * @prop {String} value - If set, defines the value of the input. Changes upon user interaction. 8 | * @prop {'text'|'number'|'select'|'name'} type - Defines the type. Possible values are `text`, `number`, `select` and `date`. 9 | * @prop {String} name - Sets the name of the input. Corresponds to the native input's 'name' attribute. 10 | * @prop {String} status - If set, Displays a status icon on the right side of the input. 11 | * @prop {String} pattern - (If type="number" only) If set, defines a custom input pattern (see full documentation). 12 | * @prop {String} min - (If type="number" only) If set, defines the minimum value accepted. 13 | * @prop {String} max - (If type="number" only) If set, defines the maximum value accepted. 14 | * @prop {Number} step - (If type="number" only) Defines the steps to skip when the user presses the left or right arrows. 15 | * @prop {Boolean} condensed - If set to true, reduces the height of the input. The label is only shown if the value is undefined. 16 | * @prop {Boolean} active - If set to true, highlights the label and underline. 17 | * @prop {Boolean} disabled - If set to true, disables mouse clicks and the style gets updated. 18 | * @prop {Boolean} readonly - If set to true, disables the input without reducing the opacity. 19 | * @prop {Boolean} noClear - If set to true, the clear icon and functionality will not be available. 20 | * @prop {Boolean} autofocus - If set to true, the component gets focused as soon as the page loads. 21 | * 22 | * @slot - Displayed inside the content area. 23 | * @slot functions - Displayed on the right side. 24 | */ 25 | export declare class korInput extends LitElement { 26 | label: string | undefined; 27 | icon: string | undefined; 28 | value: string | undefined; 29 | name: string | undefined; 30 | type: 'text' | 'number' | 'select' | 'date'; 31 | status: string | undefined; 32 | condensed: boolean | undefined; 33 | active: boolean | undefined; 34 | disabled: boolean | undefined; 35 | readonly: boolean | undefined; 36 | noClear: boolean | undefined; 37 | autofocus: boolean; 38 | pattern: string | undefined; 39 | min: string | undefined; 40 | max: string | undefined; 41 | step: number; 42 | static get styles(): import("lit").CSSResultGroup[]; 43 | render(): import("lit-html").TemplateResult<1>; 44 | constructor(); 45 | handleChange(e: any): void; 46 | handleClear(): void; 47 | handleBlur(e: any): void; 48 | handleIncrement(dir: string): void; 49 | handleItems(e: any): void; 50 | attributeChangedCallback(name: string, oldval: string, newval: string): void; 51 | handleMenu(): void; 52 | closeSelectMenu(e: Event): void; 53 | validateMinMax(val: number): void; 54 | getStatusIcon(): string | undefined; 55 | getMenuStyles(): { 56 | top: string; 57 | left: string; 58 | width: string; 59 | }; 60 | } 61 | -------------------------------------------------------------------------------- /components/menu-item/index.d.ts: -------------------------------------------------------------------------------- 1 | export { korMenuItem } from './kor-menu-item'; 2 | -------------------------------------------------------------------------------- /components/menu-item/index.ts: -------------------------------------------------------------------------------- 1 | export { korMenuItem } from './kor-menu-item'; 2 | -------------------------------------------------------------------------------- /components/menu-item/kor-menu-item.d.ts: -------------------------------------------------------------------------------- 1 | import { LitElement } from 'lit'; 2 | import '../icon'; 3 | import '../text'; 4 | /** 5 | * @prop {String} label - Defines the text label. 6 | * @prop {String} icon - If set, defines the icon shown before the label. 7 | * @prop {Boolean} active - If set to true, a highlight style gets applied. 8 | * @prop {Boolean} toggle - If set to true, clicking on the component will toggle the active property between true and false. 9 | * @prop {Boolean} disabled - If set to true, disables mouse clicks and the style gets updated. 10 | * 11 | * @slot - Displayed inside the content area. 12 | * @slot functions - Shown on the right side. 13 | */ 14 | export declare class korMenuItem extends LitElement { 15 | label: string; 16 | icon: string | undefined; 17 | active: boolean | undefined; 18 | toggle: boolean; 19 | disabled: boolean | undefined; 20 | static get styles(): import("lit").CSSResultGroup[]; 21 | render(): import("lit-html").TemplateResult<1>; 22 | attributeChangedCallback(name: string, oldval: string, newval: string): void; 23 | } 24 | -------------------------------------------------------------------------------- /components/menu-item/kor-menu-item.ts: -------------------------------------------------------------------------------- 1 | import { LitElement, css, html } from 'lit'; 2 | import { property } from 'lit/decorators'; 3 | import { sharedStyles } from '../../shared-styles'; 4 | import '../icon'; 5 | import '../text'; 6 | 7 | /** 8 | * @prop {String} label - Defines the text label. 9 | * @prop {String} icon - If set, defines the icon shown before the label. 10 | * @prop {Boolean} active - If set to true, a highlight style gets applied. 11 | * @prop {Boolean} toggle - If set to true, clicking on the component will toggle the active property between true and false. 12 | * @prop {Boolean} disabled - If set to true, disables mouse clicks and the style gets updated. 13 | * 14 | * @slot - Displayed inside the content area. 15 | * @slot functions - Shown on the right side. 16 | */ 17 | 18 | export class korMenuItem extends LitElement { 19 | @property({ type: String, reflect: true }) label = 'Label'; 20 | @property({ type: String, reflect: true }) icon: string | undefined; 21 | @property({ type: Boolean, reflect: true }) active: boolean | undefined; 22 | @property({ type: Boolean, reflect: true }) toggle = true; 23 | @property({ type: Boolean, reflect: true }) disabled: boolean | undefined; 24 | 25 | static get styles() { 26 | return [ 27 | sharedStyles, 28 | css` 29 | :host { 30 | padding: var(--spacing-s) 0; 31 | border-radius: var(--border-radius); 32 | display: flex; 33 | cursor: pointer; 34 | transition: var(--transition-1); 35 | overflow: visible; 36 | } 37 | kor-icon { 38 | margin-right: var(--spacing-s); 39 | } 40 | .label { 41 | flex: 1; 42 | } 43 | /* label */ 44 | kor-text { 45 | flex: 1; 46 | white-space: nowrap; 47 | overflow: hidden; 48 | text-overflow: ellipsis; 49 | pointer-events: none; 50 | } 51 | slot[name='functions']::slotted(*) { 52 | margin-left: var(--spacing-s); 53 | } 54 | :host([active]) { 55 | padding: var(--spacing-s); 56 | margin-left: calc(var(--spacing-s) * -1); 57 | margin-right: calc(var(--spacing-s) * -1); 58 | background: rgba(var(--neutral-1), 0.1); 59 | } 60 | /* disabled */ 61 | :host([disabled]) { 62 | opacity: 0.2; 63 | pointer-events: none; 64 | } 65 | /* hover inputs */ 66 | @media (hover: hover) { 67 | :host(:not([active]):hover) { 68 | padding: var(--spacing-s); 69 | margin-left: calc(var(--spacing-s) * -1); 70 | margin-right: calc(var(--spacing-s) * -1); 71 | background: rgba(var(--neutral-1), 0.05); 72 | } 73 | } 74 | `, 75 | ]; 76 | } 77 | 78 | render() { 79 | return html` 80 | ${this.icon ? html` ` : ''} 81 | ${this.label ? html` ${this.label} ` : ''} 82 | 83 | 84 | `; 85 | } 86 | 87 | attributeChangedCallback(name: string, oldval: string, newval: string) { 88 | super.attributeChangedCallback(name, oldval, newval); 89 | this.dispatchEvent(new Event(`${name}-changed`)); 90 | // add toggle click listener 91 | if (name == 'toggle' && this.toggle) { 92 | this.addEventListener('click', () => { 93 | this.active = !this.active; 94 | }); 95 | } 96 | } 97 | } 98 | 99 | if (!window.customElements.get('kor-menu-item')) { 100 | window.customElements.define('kor-menu-item', korMenuItem); 101 | } 102 | -------------------------------------------------------------------------------- /components/modal/index.d.ts: -------------------------------------------------------------------------------- 1 | export { korModal } from './kor-modal'; 2 | -------------------------------------------------------------------------------- /components/modal/index.ts: -------------------------------------------------------------------------------- 1 | export { korModal } from './kor-modal'; 2 | -------------------------------------------------------------------------------- /components/modal/kor-modal.d.ts: -------------------------------------------------------------------------------- 1 | import { LitElement } from 'lit'; 2 | import '../card'; 3 | import '../icon'; 4 | /** 5 | * @prop {String} label - If set, defines the text label. 6 | * @prop {String} icon - If set, defines the icon shown close to the label. 7 | * @prop {'row'|'column'} flexDirection - Defines the direction in which the slotted content flows (e.g. top to bottom or left to right). Possible values are `column` and `row`. 8 | * @prop {String} height - Defines the height of the container (not the overlay). 9 | * @prop {String} width - Defines the width of the container (not the overlay). 10 | * @prop {Boolean} visible - If set to true, displays the component on top of the screen. 11 | * @prop {Boolean} sticky - If set to true, clicking on the background will not hide the component. The close icon will also not be displayed. 12 | * 13 | * @slot - Displayed inside the content area. 14 | * @slot header - If used, the header slot is shown on top of the component, below the label (if any is set). 15 | * @slot functions - Displayed on the right side of the label or header slot. 16 | * @slot footer - Displayed below the content area. 17 | * 18 | * @cssprop --body-gap - Defines the gap between elements in the body slot. 19 | * @cssprop --header-gap - Defines the gap between elements in the header slot. 20 | * @cssprop --functions-gap - Defines the gap between elements in the functions slot. 21 | * @cssprop --footer-gap - Defines the gap between elements in the footer slot. 22 | */ 23 | export declare class korModal extends LitElement { 24 | label: string | undefined; 25 | icon: string | undefined; 26 | height: string; 27 | width: string; 28 | flexDirection: 'row' | 'column'; 29 | visible: boolean | undefined; 30 | sticky: boolean | undefined; 31 | emptyHeader: boolean; 32 | emptyFunctions: boolean; 33 | emptyFooter: boolean; 34 | static get styles(): import("lit").CSSResultGroup[]; 35 | render(): import("lit-html").TemplateResult<1>; 36 | attributeChangedCallback(name: string, oldval: string, newval: string): void; 37 | } 38 | -------------------------------------------------------------------------------- /components/modal/kor-modal.ts: -------------------------------------------------------------------------------- 1 | import { LitElement, css, html } from 'lit'; 2 | import { property, state } from 'lit/decorators'; 3 | import { sharedStyles } from '../../shared-styles'; 4 | import '../card'; 5 | import '../icon'; 6 | 7 | /** 8 | * @prop {String} label - If set, defines the text label. 9 | * @prop {String} icon - If set, defines the icon shown close to the label. 10 | * @prop {'row'|'column'} flexDirection - Defines the direction in which the slotted content flows (e.g. top to bottom or left to right). Possible values are `column` and `row`. 11 | * @prop {String} height - Defines the height of the container (not the overlay). 12 | * @prop {String} width - Defines the width of the container (not the overlay). 13 | * @prop {Boolean} visible - If set to true, displays the component on top of the screen. 14 | * @prop {Boolean} sticky - If set to true, clicking on the background will not hide the component. The close icon will also not be displayed. 15 | * 16 | * @slot - Displayed inside the content area. 17 | * @slot header - If used, the header slot is shown on top of the component, below the label (if any is set). 18 | * @slot functions - Displayed on the right side of the label or header slot. 19 | * @slot footer - Displayed below the content area. 20 | * 21 | * @cssprop --body-gap - Defines the gap between elements in the body slot. 22 | * @cssprop --header-gap - Defines the gap between elements in the header slot. 23 | * @cssprop --functions-gap - Defines the gap between elements in the functions slot. 24 | * @cssprop --footer-gap - Defines the gap between elements in the footer slot. 25 | */ 26 | 27 | export class korModal extends LitElement { 28 | @property({ type: String, reflect: true }) label: string | undefined; 29 | @property({ type: String, reflect: true }) icon: string | undefined; 30 | @property({ type: String, reflect: true }) height = '400px'; 31 | @property({ type: String, reflect: true }) width = '600px'; 32 | @property({ type: String, reflect: true, attribute: 'flex-direction' }) 33 | flexDirection: 'row' | 'column' = 'column'; 34 | @property({ type: Boolean, reflect: true }) visible: boolean | undefined; 35 | @property({ type: Boolean, reflect: true }) sticky: boolean | undefined; 36 | 37 | // readonly properties 38 | @state() emptyHeader = true; 39 | @state() emptyFunctions = true; 40 | @state() emptyFooter = true; 41 | 42 | static get styles() { 43 | return [ 44 | sharedStyles, 45 | css` 46 | :host { 47 | transition: var(--transition-1), 0s top, 0s left; 48 | position: fixed; 49 | opacity: 1; 50 | z-index: 5; 51 | top: 0px; 52 | left: 0px; 53 | width: 100%; 54 | height: 100%; 55 | background: rgba(0, 0, 0, 0.4); 56 | display: flex; 57 | align-items: center; 58 | justify-content: center; 59 | /* css properties */ 60 | --body-gap: var(--spacing-m); 61 | --header-gap: var(--spacing-m); 62 | --functions-gap: var(--spacing-m); 63 | --footer-gap: var(--spacing-m); 64 | } 65 | :host(:not([visible])) { 66 | opacity: 0; 67 | pointer-events: none; 68 | } 69 | :host(:not([visible])) kor-card { 70 | margin-bottom: -40px; 71 | } 72 | kor-card { 73 | background-color: rgb(var(--base-3)); 74 | box-shadow: var(--shadow-1); 75 | transition: 0.2s all ease-out, 0s top, 0s left; 76 | --body-gap: inherit; 77 | --header-gap: inherit; 78 | --functions-gap: inherit; 79 | --footer-gap: inherit; 80 | } 81 | `, 82 | ]; 83 | } 84 | 85 | render() { 86 | return html` 87 | 95 | 101 | 102 | ${!this.sticky 103 | ? html` 104 | 109 | ` 110 | : ''} 111 | 112 | 113 | 119 | 120 | `; 121 | } 122 | 123 | attributeChangedCallback(name: string, oldval: string, newval: string) { 124 | super.attributeChangedCallback(name, oldval, newval); 125 | this.dispatchEvent(new Event(`${name}-changed`)); 126 | if (name === 'visible' && this.visible) { 127 | this.addEventListener('click', () => 128 | !this.sticky ? (this.visible = false) : '' 129 | ); 130 | } 131 | } 132 | } 133 | 134 | if (!window.customElements.get('kor-modal')) { 135 | window.customElements.define('kor-modal', korModal); 136 | } 137 | -------------------------------------------------------------------------------- /components/nav-bar/index.d.ts: -------------------------------------------------------------------------------- 1 | export { korNavbar } from './kor-nav-bar'; 2 | -------------------------------------------------------------------------------- /components/nav-bar/index.ts: -------------------------------------------------------------------------------- 1 | export { korNavbar } from './kor-nav-bar'; 2 | -------------------------------------------------------------------------------- /components/nav-bar/kor-nav-bar.d.ts: -------------------------------------------------------------------------------- 1 | import { LitElement } from 'lit'; 2 | import '../app-bar'; 3 | /** 4 | * @slot - The main content area. 5 | * @slot functions - Shown on the right side. 6 | */ 7 | export declare class korNavbar extends LitElement { 8 | static get styles(): import("lit").CSSResultGroup[]; 9 | render(): import("lit-html").TemplateResult<1>; 10 | } 11 | -------------------------------------------------------------------------------- /components/nav-bar/kor-nav-bar.ts: -------------------------------------------------------------------------------- 1 | import { LitElement, css, html } from 'lit'; 2 | import { sharedStyles } from '../../shared-styles'; 3 | import '../app-bar'; 4 | 5 | /** 6 | * @slot - The main content area. 7 | * @slot functions - Shown on the right side. 8 | */ 9 | 10 | export class korNavbar extends LitElement { 11 | static get styles() { 12 | return [ 13 | sharedStyles, 14 | css` 15 | :host { 16 | z-index: 2; 17 | } 18 | kor-app-bar { 19 | background-color: rgb(var(--base-2)); 20 | } 21 | `, 22 | ]; 23 | } 24 | 25 | render() { 26 | return html` 27 | 28 | 29 | 30 | 31 | `; 32 | } 33 | } 34 | 35 | if (!window.customElements.get('kor-nav-bar')) { 36 | window.customElements.define('kor-nav-bar', korNavbar); 37 | } 38 | -------------------------------------------------------------------------------- /components/notifications/index.d.ts: -------------------------------------------------------------------------------- 1 | export { korNotificationItem } from './kor-notification-item'; 2 | export { korNotifications } from './kor-notifications'; 3 | -------------------------------------------------------------------------------- /components/notifications/index.ts: -------------------------------------------------------------------------------- 1 | export { korNotificationItem } from './kor-notification-item'; 2 | export { korNotifications } from './kor-notifications'; 3 | -------------------------------------------------------------------------------- /components/notifications/kor-notification-item.d.ts: -------------------------------------------------------------------------------- 1 | import { LitElement } from 'lit'; 2 | import '../card'; 3 | import '../icon'; 4 | /** 5 | * @prop {String} label - If set, defines the text label. 6 | * @prop {String} icon - If set, defines the icon shown close to the label. 7 | * @prop {'row'|'column'} flexDirection - Defines the direction in which the slotted content flows (e.g. top to bottom or left to right). Possible values are `column` and `row`. 8 | * @prop {Boolean} visible - If set to true, displays the component on top of the screen. 9 | * @prop {Boolean} sticky - If set to true, the close icon will not be displayed. 10 | * 11 | * @slot - Displayed inside the content area. 12 | * @slot header - If used, the header slot is shown on top of the component, below the label (if any is set). 13 | * @slot functions - Displayed on the right side of the label or header slot. 14 | * @slot footer - Displayed below the content area. 15 | * 16 | * @cssprop --body-gap - Defines the gap between elements in the body slot. 17 | * @cssprop --header-gap - Defines the gap between elements in the header slot. 18 | * @cssprop --functions-gap - Defines the gap between elements in the functions slot. 19 | * @cssprop --footer-gap - Defines the gap between elements in the footer slot. 20 | */ 21 | export declare class korNotificationItem extends LitElement { 22 | label: string | undefined; 23 | icon: string | undefined; 24 | flexDirection: 'row' | 'column'; 25 | visible: boolean | undefined; 26 | sticky: boolean | undefined; 27 | emptyHeader: boolean; 28 | emptyFunctions: boolean; 29 | emptyFooter: boolean; 30 | static get styles(): import("lit").CSSResultGroup[]; 31 | render(): import("lit-html").TemplateResult<1>; 32 | attributeChangedCallback(name: string, oldval: string, newval: string): void; 33 | } 34 | -------------------------------------------------------------------------------- /components/notifications/kor-notification-item.ts: -------------------------------------------------------------------------------- 1 | import { LitElement, css, html } from 'lit'; 2 | import { property, state } from 'lit/decorators'; 3 | import { sharedStyles } from '../../shared-styles'; 4 | import '../card'; 5 | import '../icon'; 6 | 7 | /** 8 | * @prop {String} label - If set, defines the text label. 9 | * @prop {String} icon - If set, defines the icon shown close to the label. 10 | * @prop {'row'|'column'} flexDirection - Defines the direction in which the slotted content flows (e.g. top to bottom or left to right). Possible values are `column` and `row`. 11 | * @prop {Boolean} visible - If set to true, displays the component on top of the screen. 12 | * @prop {Boolean} sticky - If set to true, the close icon will not be displayed. 13 | * 14 | * @slot - Displayed inside the content area. 15 | * @slot header - If used, the header slot is shown on top of the component, below the label (if any is set). 16 | * @slot functions - Displayed on the right side of the label or header slot. 17 | * @slot footer - Displayed below the content area. 18 | * 19 | * @cssprop --body-gap - Defines the gap between elements in the body slot. 20 | * @cssprop --header-gap - Defines the gap between elements in the header slot. 21 | * @cssprop --functions-gap - Defines the gap between elements in the functions slot. 22 | * @cssprop --footer-gap - Defines the gap between elements in the footer slot. 23 | */ 24 | 25 | export class korNotificationItem extends LitElement { 26 | @property({ type: String, reflect: true }) label: string | undefined; 27 | @property({ type: String, reflect: true }) icon: string | undefined; 28 | @property({ type: String, reflect: true, attribute: 'flex-direction' }) 29 | flexDirection: 'row' | 'column' = 'column'; 30 | @property({ type: Boolean, reflect: true }) visible: boolean | undefined; 31 | @property({ type: Boolean, reflect: true }) sticky: boolean | undefined; 32 | 33 | // readonly properties 34 | @state() emptyHeader = true; 35 | @state() emptyFunctions = true; 36 | @state() emptyFooter = true; 37 | 38 | static get styles() { 39 | return [ 40 | sharedStyles, 41 | css` 42 | :host { 43 | transition: var(--transition-1); 44 | opacity: 1; 45 | /* css properties */ 46 | --body-gap: var(--spacing-m); 47 | --header-gap: var(--spacing-m); 48 | --functions-gap: var(--spacing-m); 49 | --footer-gap: var(--spacing-m); 50 | } 51 | :host(:not([visible])) { 52 | opacity: 0; 53 | pointer-events: none; 54 | max-height: 0px; 55 | overflow: hidden; 56 | margin-top: 0; 57 | margin-bottom: 0; 58 | } 59 | kor-card { 60 | background: rgb(var(--base-4)); 61 | --body-gap: inherit; 62 | --header-gap: inherit; 63 | --functions-gap: inherit; 64 | --footer-gap: inherit; 65 | } 66 | :host(:not([visible]):host-context([position$='right'])) { 67 | margin-left: 8px; 68 | margin-right: -8px; 69 | } 70 | :host(:not([visible]):host-context([position$='left'])) { 71 | margin-left: -8px; 72 | margin-right: 8px; 73 | } 74 | `, 75 | ]; 76 | } 77 | 78 | render() { 79 | return html` 80 | 86 | 92 | 93 | ${!this.sticky 94 | ? html` 95 | 100 | ` 101 | : ''} 102 | 103 | 104 | 110 | 111 | `; 112 | } 113 | 114 | attributeChangedCallback(name: string, oldval: string, newval: string) { 115 | super.attributeChangedCallback(name, oldval, newval); 116 | this.dispatchEvent(new Event(`${name}-changed`)); 117 | } 118 | } 119 | 120 | if (!window.customElements.get('kor-notification-item')) { 121 | window.customElements.define('kor-notification-item', korNotificationItem); 122 | } 123 | -------------------------------------------------------------------------------- /components/notifications/kor-notifications.d.ts: -------------------------------------------------------------------------------- 1 | import { LitElement } from 'lit'; 2 | /** 3 | * @prop {'top-left'|'top-right'|'bottom-left'|'bottom-right'} position - Defines the corner where the notification is located. Possible values are `top-left`, `top-right`, `bottom-left` and `bottom-right`. 4 | * 5 | * @slot - Hosts kor-notification-items. 6 | * 7 | * @cssprop --body-gap - Defines the gap between elements in the body slot. 8 | */ 9 | export declare class korNotifications extends LitElement { 10 | position: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right'; 11 | static get styles(): import("lit").CSSResultGroup[]; 12 | render(): import("lit-html").TemplateResult<1>; 13 | attributeChangedCallback(name: string, oldval: string, newval: string): void; 14 | } 15 | -------------------------------------------------------------------------------- /components/notifications/kor-notifications.ts: -------------------------------------------------------------------------------- 1 | import { LitElement, css, html } from 'lit'; 2 | import { property } from 'lit/decorators'; 3 | import { sharedStyles } from '../../shared-styles'; 4 | 5 | /** 6 | * @prop {'top-left'|'top-right'|'bottom-left'|'bottom-right'} position - Defines the corner where the notification is located. Possible values are `top-left`, `top-right`, `bottom-left` and `bottom-right`. 7 | * 8 | * @slot - Hosts kor-notification-items. 9 | * 10 | * @cssprop --body-gap - Defines the gap between elements in the body slot. 11 | */ 12 | 13 | export class korNotifications extends LitElement { 14 | @property({ type: String, reflect: true }) position: 15 | | 'top-left' 16 | | 'top-right' 17 | | 'bottom-left' 18 | | 'bottom-right' = 'top-right'; 19 | 20 | static get styles() { 21 | return [ 22 | sharedStyles, 23 | css` 24 | :host { 25 | position: fixed; 26 | display: flex; 27 | flex-direction: column; 28 | max-height: 100%; 29 | box-sizing: border-box; 30 | padding: var(--spacing-l); 31 | margin: 0; 32 | width: 320px; 33 | z-index: 6; 34 | pointer-events: none; 35 | /* css properties */ 36 | --body-gap: var(--spacing-m); 37 | } 38 | slot:not([name]) { 39 | gap: var(--body-gap); 40 | display: flex; 41 | flex-direction: column; 42 | } 43 | ::slotted(*) { 44 | pointer-events: all; 45 | } 46 | :host([position^='top']) { 47 | top: 0px; 48 | } 49 | :host([position^='bottom']) { 50 | flex-flow: column-reverse; 51 | bottom: 0px; 52 | } 53 | :host([position$='left']) { 54 | left: 0px; 55 | } 56 | :host([position$='right']) { 57 | right: 0px; 58 | } 59 | `, 60 | ]; 61 | } 62 | 63 | render() { 64 | return html``; 65 | } 66 | 67 | attributeChangedCallback(name: string, oldval: string, newval: string) { 68 | super.attributeChangedCallback(name, oldval, newval); 69 | this.dispatchEvent(new Event(`${name}-changed`)); 70 | } 71 | } 72 | 73 | if (!window.customElements.get('kor-notifications')) { 74 | window.customElements.define('kor-notifications', korNotifications); 75 | } 76 | -------------------------------------------------------------------------------- /components/page/index.d.ts: -------------------------------------------------------------------------------- 1 | export { korPage } from './kor-page'; 2 | -------------------------------------------------------------------------------- /components/page/index.ts: -------------------------------------------------------------------------------- 1 | export { korPage } from './kor-page'; 2 | -------------------------------------------------------------------------------- /components/page/kor-page.d.ts: -------------------------------------------------------------------------------- 1 | import { LitElement } from 'lit'; 2 | /** 3 | * @prop {'dark'|'light'|undefined} theme - Defines the color theme of the page. Possible values are `dark` and `light`. 4 | * @prop {String} padding - Defines the padding style of the default slot. 5 | * @prop {'row'|'column'} flexDirection - Defines the direction in which the slotted content flows (e.g. top to bottom or left to right). Possible values are `column` and `row`. 6 | * @prop {Boolean} flat - If set to true, the page background will be flat, without the need to use card as containers for the content. 7 | * @prop {Boolean} scrollable - If set to true, the page content will scroll if there is an overflow of content. 8 | * 9 | * @slot - The main content area. 10 | * @slot top - Shown on the top. Hosts components such as kor-app-bar and kor-nav-bar. 11 | * @slot bottom - Shown on the bottom. Hosts components such as kor-nav-bar. 12 | * @slot left - Shown on the left side. Hosts components such as kor-pane. 13 | * @slot right - Shown on the right side. Hosts components such as kor-pane. 14 | */ 15 | export declare class korPage extends LitElement { 16 | theme: 'dark' | 'light' | undefined; 17 | padding: string; 18 | flexDirection: 'row' | 'column'; 19 | flat: boolean | undefined; 20 | scrollable: boolean | undefined; 21 | static get styles(): import("lit").CSSResultGroup[]; 22 | render(): import("lit-html").TemplateResult<1>; 23 | attributeChangedCallback(name: string, oldval: string, newval: string): void; 24 | } 25 | -------------------------------------------------------------------------------- /components/page/kor-page.ts: -------------------------------------------------------------------------------- 1 | import { LitElement, css, html } from 'lit'; 2 | import { property } from 'lit/decorators'; 3 | import { sharedStyles } from '../../shared-styles'; 4 | 5 | /** 6 | * @prop {'dark'|'light'|undefined} theme - Defines the color theme of the page. Possible values are `dark` and `light`. 7 | * @prop {String} padding - Defines the padding style of the default slot. 8 | * @prop {'row'|'column'} flexDirection - Defines the direction in which the slotted content flows (e.g. top to bottom or left to right). Possible values are `column` and `row`. 9 | * @prop {Boolean} flat - If set to true, the page background will be flat, without the need to use card as containers for the content. 10 | * @prop {Boolean} scrollable - If set to true, the page content will scroll if there is an overflow of content. 11 | * 12 | * @slot - The main content area. 13 | * @slot top - Shown on the top. Hosts components such as kor-app-bar and kor-nav-bar. 14 | * @slot bottom - Shown on the bottom. Hosts components such as kor-nav-bar. 15 | * @slot left - Shown on the left side. Hosts components such as kor-pane. 16 | * @slot right - Shown on the right side. Hosts components such as kor-pane. 17 | */ 18 | 19 | export class korPage extends LitElement { 20 | @property({ type: String, reflect: true }) theme: 21 | | 'dark' 22 | | 'light' 23 | | undefined; 24 | @property({ type: String, reflect: true }) padding = 'var(--spacing-l)'; 25 | @property({ type: String, reflect: true, attribute: 'flex-direction' }) 26 | flexDirection: 'row' | 'column' = 'row'; 27 | @property({ type: Boolean, reflect: true }) flat: boolean | undefined; 28 | @property({ type: Boolean, reflect: true }) scrollable: boolean | undefined; 29 | 30 | static get styles() { 31 | return [ 32 | sharedStyles, 33 | css` 34 | :host { 35 | height: 100%; 36 | width: 100%; 37 | box-sizing: border-box; 38 | display: flex; 39 | flex-direction: column; 40 | background-color: rgb(var(--base-1)); 41 | } 42 | :host([flat]) { 43 | background-color: rgb(var(--base-3)); 44 | } 45 | .center-wrapper, 46 | slot { 47 | display: flex; 48 | } 49 | .center-wrapper, 50 | slot:not([name]) { 51 | flex: 1; 52 | overflow: hidden; 53 | } 54 | :host([scrollable]) slot:not([name]) { 55 | overflow: auto; 56 | } 57 | slot[name='top'], 58 | slot[name='bottom'], 59 | :host([flex-direction='column']) slot:not([name]) { 60 | flex-direction: column; 61 | } 62 | `, 63 | ]; 64 | } 65 | 66 | render() { 67 | // @ts-ignore 68 | return html` 69 | 70 |
71 | 72 | 73 | 74 |
75 | 76 | `; 77 | } 78 | 79 | attributeChangedCallback(name: string, oldval: string, newval: string) { 80 | super.attributeChangedCallback(name, oldval, newval); 81 | this.dispatchEvent(new Event(`${name}-changed`)); 82 | } 83 | } 84 | 85 | if (!window.customElements.get('kor-page')) { 86 | window.customElements.define('kor-page', korPage); 87 | } 88 | -------------------------------------------------------------------------------- /components/pane/index.d.ts: -------------------------------------------------------------------------------- 1 | export { korPane } from './kor-pane'; 2 | -------------------------------------------------------------------------------- /components/pane/index.ts: -------------------------------------------------------------------------------- 1 | export { korPane } from './kor-pane'; 2 | -------------------------------------------------------------------------------- /components/pane/kor-pane.d.ts: -------------------------------------------------------------------------------- 1 | import { LitElement } from 'lit'; 2 | import '../card'; 3 | /** 4 | * @prop {String} label - If set, defines the text label. 5 | * @prop {String} icon - If set, defines the icon shown close to the label. 6 | * @prop {'row'|'column'} flexDirection - Defines the direction in which the slotted content flows (e.g. top to bottom or left to right). Possible values are `column` and `row`. 7 | * @prop {'s'|'m'|'l'} size - Defines the size (width) of the component. Possible values are `s`(80px), `m`(120px) and `l`(320px). 8 | * 9 | * @slot - Displayed inside the content area. 10 | * @slot header - If used, the header slot is shown on top of the component, below the label (if any is set). 11 | * @slot functions - Displayed on the right side of the label or header slot. 12 | * @slot footer - Displayed below the content area. 13 | * 14 | * @cssprop --body-gap - Defines the gap between elements in the body slot. 15 | * @cssprop --header-gap - Defines the gap between elements in the header slot. 16 | * @cssprop --functions-gap - Defines the gap between elements in the functions slot. 17 | * @cssprop --footer-gap - Defines the gap between elements in the footer slot. 18 | */ 19 | export declare class korPane extends LitElement { 20 | label: string | undefined; 21 | icon: string | undefined; 22 | flexDirection: 'row' | 'column'; 23 | size: 's' | 'm' | 'l'; 24 | emptyHeader: boolean; 25 | emptyFunctions: boolean; 26 | emptyFooter: boolean; 27 | static get styles(): import("lit").CSSResultGroup[]; 28 | render(): import("lit-html").TemplateResult<1>; 29 | attributeChangedCallback(name: string, oldval: string, newval: string): void; 30 | } 31 | -------------------------------------------------------------------------------- /components/pane/kor-pane.ts: -------------------------------------------------------------------------------- 1 | import { LitElement, css, html } from 'lit'; 2 | import { property, state } from 'lit/decorators'; 3 | import { sharedStyles } from '../../shared-styles'; 4 | import '../card'; 5 | 6 | /** 7 | * @prop {String} label - If set, defines the text label. 8 | * @prop {String} icon - If set, defines the icon shown close to the label. 9 | * @prop {'row'|'column'} flexDirection - Defines the direction in which the slotted content flows (e.g. top to bottom or left to right). Possible values are `column` and `row`. 10 | * @prop {'s'|'m'|'l'} size - Defines the size (width) of the component. Possible values are `s`(80px), `m`(120px) and `l`(320px). 11 | * 12 | * @slot - Displayed inside the content area. 13 | * @slot header - If used, the header slot is shown on top of the component, below the label (if any is set). 14 | * @slot functions - Displayed on the right side of the label or header slot. 15 | * @slot footer - Displayed below the content area. 16 | * 17 | * @cssprop --body-gap - Defines the gap between elements in the body slot. 18 | * @cssprop --header-gap - Defines the gap between elements in the header slot. 19 | * @cssprop --functions-gap - Defines the gap between elements in the functions slot. 20 | * @cssprop --footer-gap - Defines the gap between elements in the footer slot. 21 | */ 22 | 23 | export class korPane extends LitElement { 24 | @property({ type: String, reflect: true }) label: string | undefined; 25 | @property({ type: String, reflect: true }) icon: string | undefined; 26 | @property({ type: String, reflect: true, attribute: 'flex-direction' }) 27 | flexDirection: 'row' | 'column' = 'column'; 28 | @property({ type: String, reflect: true }) size: 's' | 'm' | 'l' = 'l'; 29 | 30 | // readonly properties 31 | @state() emptyHeader = true; 32 | @state() emptyFunctions = true; 33 | @state() emptyFooter = true; 34 | 35 | static get styles() { 36 | return [ 37 | sharedStyles, 38 | css` 39 | :host { 40 | background-color: rgb(var(--base-2)); 41 | display: flex; 42 | box-shadow: var(--shadow-1); 43 | transition: 0.1s width ease-out; 44 | /* css properties */ 45 | --body-gap: var(--spacing-m); 46 | --header-gap: var(--spacing-m); 47 | --functions-gap: var(--spacing-m); 48 | --footer-gap: var(--spacing-m); 49 | } 50 | :host([size='l']) { 51 | width: 320px; 52 | } 53 | :host([size='m']) { 54 | width: 120px; 55 | } 56 | :host([size='s']) { 57 | width: 80px; 58 | } 59 | kor-card { 60 | background-color: transparent; 61 | box-shadow: none; 62 | --body-gap: inherit; 63 | --header-gap: inherit; 64 | --functions-gap: inherit; 65 | --footer-gap: inherit; 66 | } 67 | `, 68 | ]; 69 | } 70 | 71 | render() { 72 | return html` 73 | 78 | 79 | 85 | 91 | 97 | 98 | `; 99 | } 100 | 101 | attributeChangedCallback(name: string, oldval: string, newval: string) { 102 | super.attributeChangedCallback(name, oldval, newval); 103 | this.dispatchEvent(new Event(`${name}-changed`)); 104 | } 105 | } 106 | 107 | if (!window.customElements.get('kor-pane')) { 108 | window.customElements.define('kor-pane', korPane); 109 | } 110 | -------------------------------------------------------------------------------- /components/popover/index.d.ts: -------------------------------------------------------------------------------- 1 | export { korPopover } from './kor-popover'; 2 | -------------------------------------------------------------------------------- /components/popover/index.ts: -------------------------------------------------------------------------------- 1 | export { korPopover } from './kor-popover'; 2 | -------------------------------------------------------------------------------- /components/popover/kor-popover.d.ts: -------------------------------------------------------------------------------- 1 | import { LitElement } from 'lit'; 2 | import '../card'; 3 | /** 4 | * @prop {String} label - If set, defines the text label. 5 | * @prop {String} icon - If set, defines the icon shown close to the label. 6 | * @prop {'left'|'right'|'top'|'bottom'} position - Defines the position of the component in the screen. Possible values are `left`, `right`, `top` and `bottom`. 7 | * @prop {'row'|'column'} flexDirection - Defines the direction in which the slotted content flows (e.g. top to bottom or left to right). Possible values are `column` and `row`. 8 | * @prop {String} target - Defines the DOM element to which the click event will be attached. It behaves identically to querySelector, which means tag names, IDs, classes and similar can be used (e.g. #myEl, .myEl, kor-input[type='number']). Please ensure the selector is unique. 9 | * @prop {Boolean} visible - If set to true, displays the component on top of the screen. 10 | * @prop {Boolean} sticky - If set to true, clicking on the page will not hide the component. 11 | * 12 | * @slot - Displayed inside the content area. 13 | * @slot header - If used, the header slot is shown on top of the component, below the label (if any is set). 14 | * @slot functions - Displayed on the right side of the label or header slot. 15 | * @slot footer - Displayed below the content area. 16 | * 17 | * @cssprop --body-gap - Defines the gap between elements in the body slot. 18 | * @cssprop --header-gap - Defines the gap between elements in the header slot. 19 | * @cssprop --functions-gap - Defines the gap between elements in the functions slot. 20 | * @cssprop --footer-gap - Defines the gap between elements in the footer slot. 21 | */ 22 | export declare class korPopover extends LitElement { 23 | label: string | undefined; 24 | icon: string | undefined; 25 | flexDirection: 'row' | 'column'; 26 | position: 'left' | 'right' | 'top' | 'bottom'; 27 | target: string | HTMLElement | undefined; 28 | visible: boolean | undefined; 29 | sticky: boolean | undefined; 30 | emptyHeader: boolean; 31 | emptyFunctions: boolean; 32 | emptyFooter: boolean; 33 | static get styles(): import("lit").CSSResultGroup[]; 34 | render(): import("lit-html").TemplateResult<1>; 35 | attributeChangedCallback(name: string, oldval: string, newval: string): void; 36 | targetObserver(): void; 37 | visibleObserver(): void; 38 | handlePosition(tar: Element | null | undefined): void; 39 | addDocListener(tar: Element): void; 40 | } 41 | -------------------------------------------------------------------------------- /components/progress-bar/index.d.ts: -------------------------------------------------------------------------------- 1 | export { korProgressBar } from './kor-progress-bar'; 2 | -------------------------------------------------------------------------------- /components/progress-bar/index.ts: -------------------------------------------------------------------------------- 1 | export { korProgressBar } from './kor-progress-bar'; 2 | -------------------------------------------------------------------------------- /components/progress-bar/kor-progress-bar.d.ts: -------------------------------------------------------------------------------- 1 | import { LitElement } from 'lit'; 2 | import '../icon'; 3 | import '../text'; 4 | /** 5 | * @prop {String} label - If set, defines the text label shown above the bar. 6 | * @prop {String} info - If set, defines the info text shown below of the bar. 7 | * @prop {'success'|'warning'|'error'|undefined} status - If set, shows a status icon besides the information text. Possible values are `success`, `warning` and `error`. 8 | * @prop {String} color - If set, defines the color of the bar. 9 | * @prop {'s'|'m'|'l'} size - (Only if radial is true) Defines the size of the bar. Possible values are `s`, `m` and `l`. 10 | * @prop {Number} value - Defines the value of the bar. Must be a number from 0 to 100. 11 | * @prop {Boolean} radial - If set to true, the bar will become a circle instead of a linear bar. 12 | * @prop {Boolean} showProgress - If set to true, the value (in %) will be visible. 13 | */ 14 | export declare class korProgressBar extends LitElement { 15 | label: string | undefined; 16 | info: string | undefined; 17 | status: 'success' | 'warning' | 'error' | undefined; 18 | color: string | undefined; 19 | size: 's' | 'm' | 'l'; 20 | value: number | undefined; 21 | radial: boolean | undefined; 22 | showProgress: boolean | undefined; 23 | static get styles(): import("lit").CSSResultGroup[]; 24 | render(): import("lit-html").TemplateResult<1>; 25 | attributeChangedCallback(name: string, oldval: string, newval: string): void; 26 | getStatusIcon(): string | undefined; 27 | getSize(): number; 28 | } 29 | -------------------------------------------------------------------------------- /components/radio-button/index.d.ts: -------------------------------------------------------------------------------- 1 | export { korRadioButton } from './kor-radio-button'; 2 | -------------------------------------------------------------------------------- /components/radio-button/index.ts: -------------------------------------------------------------------------------- 1 | export { korRadioButton } from './kor-radio-button'; 2 | -------------------------------------------------------------------------------- /components/radio-button/kor-radio-button.d.ts: -------------------------------------------------------------------------------- 1 | import { LitElement } from 'lit'; 2 | import '../text'; 3 | /** 4 | * @prop {String} label - If set, defines the text label. 5 | * @prop {Boolean} active - If set to true, a highlight style gets applied. Only one item can be active at a time. 6 | * @prop {Boolean} disabled - If set to true, disables mouse clicks and the style gets updated. 7 | */ 8 | export declare class korRadioButton extends LitElement { 9 | label: string | undefined; 10 | active: boolean | undefined; 11 | disabled: boolean | undefined; 12 | static get styles(): import("lit").CSSResultGroup[]; 13 | render(): import("lit-html").TemplateResult<1>; 14 | attributeChangedCallback(name: string, oldval: string, newval: string): void; 15 | connectedCallback(): void; 16 | handleChange(): void; 17 | handleActive(): void; 18 | } 19 | -------------------------------------------------------------------------------- /components/radio-button/kor-radio-button.ts: -------------------------------------------------------------------------------- 1 | import { LitElement, css, html } from 'lit'; 2 | import { property } from 'lit/decorators'; 3 | import { sharedStyles } from '../../shared-styles'; 4 | import '../text'; 5 | 6 | /** 7 | * @prop {String} label - If set, defines the text label. 8 | * @prop {Boolean} active - If set to true, a highlight style gets applied. Only one item can be active at a time. 9 | * @prop {Boolean} disabled - If set to true, disables mouse clicks and the style gets updated. 10 | */ 11 | 12 | export class korRadioButton extends LitElement { 13 | @property({ type: String, reflect: true }) label: string | undefined; 14 | @property({ type: Boolean, reflect: true }) active: boolean | undefined; 15 | @property({ type: Boolean, reflect: true }) disabled: boolean | undefined; 16 | 17 | static get styles() { 18 | return [ 19 | sharedStyles, 20 | css` 21 | :host { 22 | display: flex; 23 | cursor: pointer; 24 | } 25 | input { 26 | display: none; 27 | } 28 | /* box */ 29 | .circle { 30 | transition: var(--transition-1); 31 | display: flex; 32 | align-items: center; 33 | justify-content: center; 34 | width: 16px; 35 | height: 16px; 36 | margin: 4px; 37 | border-radius: 50%; 38 | box-sizing: border-box; 39 | border: 2px solid rgba(var(--neutral-1), 0.25); 40 | } 41 | :host([active]) .circle { 42 | border-color: transparent; 43 | border: 5px solid rgb(var(--accent-1)); 44 | } 45 | /* label */ 46 | kor-text { 47 | flex: 1; 48 | margin-left: var(--spacing-s); 49 | white-space: nowrap; 50 | overflow: hidden; 51 | text-overflow: ellipsis; 52 | pointer-events: none; 53 | } 54 | /* disabled */ 55 | :host([disabled]) { 56 | pointer-events: none; 57 | opacity: 0.2; 58 | } 59 | /* hover inputs */ 60 | @media (hover: hover) { 61 | :host(:hover:not([active])) .circle { 62 | border-color: rgba(var(--neutral-1), 0.3); 63 | } 64 | } 65 | `, 66 | ]; 67 | } 68 | 69 | render() { 70 | return html` 71 | 78 |
79 | ${this.label ? html` ${this.label} ` : ''} 80 | `; 81 | } 82 | 83 | attributeChangedCallback(name: string, oldval: string, newval: string) { 84 | super.attributeChangedCallback(name, oldval, newval); 85 | this.dispatchEvent(new Event(`${name}-changed`)); 86 | } 87 | 88 | connectedCallback() { 89 | super.connectedCallback(); 90 | this.addEventListener('click', () => this.handleActive()); 91 | } 92 | 93 | handleChange() { 94 | this.dispatchEvent( 95 | new CustomEvent('change', { 96 | bubbles: true, 97 | composed: true, 98 | }) 99 | ); 100 | } 101 | 102 | handleActive() { 103 | let siblings: NodeList | undefined = this.parentElement?.childNodes; 104 | siblings?.forEach((el: any) => { 105 | el.active = false; 106 | }); 107 | (this).active = true; 108 | } 109 | } 110 | 111 | if (!window.customElements.get('kor-radio-button')) { 112 | window.customElements.define('kor-radio-button', korRadioButton); 113 | } 114 | -------------------------------------------------------------------------------- /components/slider/index.d.ts: -------------------------------------------------------------------------------- 1 | export { korSlider } from './kor-slider'; 2 | -------------------------------------------------------------------------------- /components/slider/index.ts: -------------------------------------------------------------------------------- 1 | export { korSlider } from './kor-slider'; 2 | -------------------------------------------------------------------------------- /components/slider/kor-slider.d.ts: -------------------------------------------------------------------------------- 1 | import { LitElement } from 'lit'; 2 | import '../text'; 3 | /** 4 | * @prop {String} label - If set, defines the text label shown on top. 5 | * @prop {Number} value - Defines the current value. Must be a value between min and max. 6 | * @prop {Number} min - Defines the minimum value accepted. 7 | * @prop {Number} max - Defines the maximum value accepted. 8 | * @prop {Number} step - Defines the steps to skip when the user drags the thumb. 9 | * @prop {Boolean} input - If set to true, allows the user to input a value using the keyboard. 10 | */ 11 | export declare class korSlider extends LitElement { 12 | label: string | undefined; 13 | value: number; 14 | min: number; 15 | max: number; 16 | step: number; 17 | input: boolean | undefined; 18 | static get styles(): import("lit").CSSResultGroup[]; 19 | render(): import("lit-html").TemplateResult<1>; 20 | attributeChangedCallback(name: string, oldval: string, newval: string): void; 21 | firstUpdated(): void; 22 | private handleInput; 23 | private handleThumbPosition; 24 | private handleThumbDrag; 25 | } 26 | -------------------------------------------------------------------------------- /components/spinner/index.d.ts: -------------------------------------------------------------------------------- 1 | export { korSpinner } from './kor-spinner'; 2 | -------------------------------------------------------------------------------- /components/spinner/index.ts: -------------------------------------------------------------------------------- 1 | export { korSpinner } from './kor-spinner'; 2 | -------------------------------------------------------------------------------- /components/spinner/kor-spinner.d.ts: -------------------------------------------------------------------------------- 1 | import { LitElement } from 'lit'; 2 | import '../text'; 3 | /** 4 | * @prop {String} label - If set, defines the text label. 5 | * @prop {'s'|'m'|'l'} size - Defines the size of the component. Possible values are `s`(24px), `m`(32px) and `l`(40px). 6 | */ 7 | export declare class korSpinner extends LitElement { 8 | size: 's' | 'm' | 'l'; 9 | label: string | undefined; 10 | static get styles(): import("lit").CSSResultGroup[]; 11 | render(): import("lit-html").TemplateResult<1>; 12 | attributeChangedCallback(name: string, oldval: string, newval: string): void; 13 | getSize(): number; 14 | } 15 | -------------------------------------------------------------------------------- /components/spinner/kor-spinner.ts: -------------------------------------------------------------------------------- 1 | import { LitElement, css, html } from 'lit'; 2 | import { property } from 'lit/decorators'; 3 | import { sharedStyles } from '../../shared-styles'; 4 | import '../text'; 5 | 6 | /** 7 | * @prop {String} label - If set, defines the text label. 8 | * @prop {'s'|'m'|'l'} size - Defines the size of the component. Possible values are `s`(24px), `m`(32px) and `l`(40px). 9 | */ 10 | 11 | export class korSpinner extends LitElement { 12 | @property({ type: String, reflect: true }) size: 's' | 'm' | 'l' = 'm'; 13 | @property({ type: String, reflect: true }) label: string | undefined; 14 | 15 | static get styles() { 16 | return [ 17 | sharedStyles, 18 | css` 19 | :host { 20 | width: 100%; 21 | height: 100%; 22 | overflow: hidden; 23 | display: flex; 24 | flex-direction: column; 25 | align-items: center; 26 | justify-content: center; 27 | } 28 | svg { 29 | animation: 1s linear infinite svg-animation; 30 | } 31 | @keyframes svg-animation { 32 | 0% { 33 | transform: rotateZ(0deg); 34 | } 35 | 100% { 36 | transform: rotateZ(360deg); 37 | } 38 | } 39 | circle { 40 | fill: transparent; 41 | stroke: rgb(var(--accent-1)); 42 | stroke-linecap: round; 43 | stroke-width: 4px; 44 | } 45 | /* label */ 46 | kor-text { 47 | margin-top: var(--spacing-s); 48 | text-align: center; 49 | max-width: 240px; 50 | } 51 | `, 52 | ]; 53 | } 54 | 55 | render() { 56 | return html` 57 | 62 | 68 | 69 | ${this.label ? html` ${this.label} ` : ''} 70 | `; 71 | } 72 | 73 | attributeChangedCallback(name: string, oldval: string, newval: string) { 74 | super.attributeChangedCallback(name, oldval, newval); 75 | this.dispatchEvent(new Event(`${name}-changed`)); 76 | } 77 | 78 | getSize(): number { 79 | let size; 80 | switch (this.size) { 81 | case 's': 82 | size = 24; 83 | break; 84 | case 'm': 85 | size = 32; 86 | break; 87 | case 'l': 88 | size = 40; 89 | break; 90 | } 91 | return size; 92 | } 93 | } 94 | 95 | if (!window.customElements.get('kor-spinner')) { 96 | window.customElements.define('kor-spinner', korSpinner); 97 | } 98 | -------------------------------------------------------------------------------- /components/stepper/index.d.ts: -------------------------------------------------------------------------------- 1 | export { korStepperItem } from './kor-stepper-item'; 2 | export { korStepper } from './kor-stepper'; 3 | -------------------------------------------------------------------------------- /components/stepper/index.ts: -------------------------------------------------------------------------------- 1 | export { korStepperItem } from './kor-stepper-item'; 2 | export { korStepper } from './kor-stepper'; 3 | -------------------------------------------------------------------------------- /components/stepper/kor-stepper-item.d.ts: -------------------------------------------------------------------------------- 1 | import { LitElement } from 'lit'; 2 | import '../icon'; 3 | import '../text'; 4 | /** 5 | * @prop {String} label - If set, defines the text label. 6 | * @prop {String} info - If set, defines the information text shown below the label. 7 | * @prop {String} icon - If set, defines the icon shown instead of the index number. 8 | * @prop {Number} index - Defines the index number shown inside the bubble (if icon is undefined). It is set dinamically by the component. 9 | * @prop {Boolean} active - If set to true, a highlight style gets applied. Only one item can be active at a time. 10 | * @prop {Boolean} disabled - If set to true, disables mouse clicks and the style gets updated. 11 | * @prop {'horizontal'|'vertical'} orientation - Defines the orientation of the component. Possible values are `horizontal` and `vertical`. 12 | */ 13 | export declare class korStepperItem extends LitElement { 14 | label: string | undefined; 15 | info: string | undefined; 16 | icon: string | undefined; 17 | index: number | undefined; 18 | active: boolean | undefined; 19 | disabled: boolean | undefined; 20 | first: boolean | undefined; 21 | last: boolean | undefined; 22 | orientation: 'horizontal' | 'vertical'; 23 | static get styles(): import("lit").CSSResultGroup[]; 24 | render(): import("lit-html").TemplateResult<1>; 25 | attributeChangedCallback(name: string, oldval: string, newval: string): void; 26 | connectedCallback(): void; 27 | getIndex(): void; 28 | } 29 | -------------------------------------------------------------------------------- /components/stepper/kor-stepper.d.ts: -------------------------------------------------------------------------------- 1 | import { LitElement } from 'lit'; 2 | /** 3 | * @prop {'horizontal'|'vertical'} orientation - Defines the orientation of the component. Possible values are `horizontal` and `vertical`. 4 | * 5 | * @slot - Hosts kor-stepper-items. 6 | */ 7 | export declare class korStepper extends LitElement { 8 | orientation: 'horizontal' | 'vertical'; 9 | static get styles(): import("lit").CSSResultGroup[]; 10 | render(): import("lit-html").TemplateResult<1>; 11 | attributeChangedCallback(name: string, oldval: string, newval: string): void; 12 | handleOrientation(): void; 13 | handleItems(): void; 14 | } 15 | -------------------------------------------------------------------------------- /components/stepper/kor-stepper.ts: -------------------------------------------------------------------------------- 1 | import { LitElement, css, html } from 'lit'; 2 | import { property } from 'lit/decorators'; 3 | import { sharedStyles } from '../../shared-styles'; 4 | 5 | /** 6 | * @prop {'horizontal'|'vertical'} orientation - Defines the orientation of the component. Possible values are `horizontal` and `vertical`. 7 | * 8 | * @slot - Hosts kor-stepper-items. 9 | */ 10 | 11 | export class korStepper extends LitElement { 12 | @property({ type: String, reflect: true }) orientation: 13 | | 'horizontal' 14 | | 'vertical' = 'horizontal'; 15 | 16 | static get styles() { 17 | return [ 18 | sharedStyles, 19 | css` 20 | :host { 21 | display: flex; 22 | width: 100%; 23 | height: max-content; 24 | overflow: auto; 25 | } 26 | /* vertical */ 27 | :host([orientation='vertical']) { 28 | flex-direction: column; 29 | } 30 | `, 31 | ]; 32 | } 33 | 34 | render() { 35 | return html` 36 | 42 | `; 43 | } 44 | 45 | attributeChangedCallback(name: string, oldval: string, newval: string) { 46 | super.attributeChangedCallback(name, oldval, newval); 47 | this.dispatchEvent(new Event(`${name}-changed`)); 48 | } 49 | 50 | handleOrientation() { 51 | (>this.childNodes).forEach((el: any) => { 52 | el.orientation = this.orientation; 53 | }); 54 | } 55 | 56 | handleItems() { 57 | let items: any, length: number; 58 | items = Array.prototype.slice.call(this.children); 59 | length = this.children.length; 60 | items.forEach((el: any) => { 61 | el.first = el.index == 1; 62 | el.last = el.index == length; 63 | }); 64 | } 65 | } 66 | 67 | if (!window.customElements.get('kor-stepper')) { 68 | window.customElements.define('kor-stepper', korStepper); 69 | } 70 | -------------------------------------------------------------------------------- /components/swipe-actions/index.ts: -------------------------------------------------------------------------------- 1 | export { korSwipeActions } from './kor-swipe-actions'; 2 | export { korSwipeAction } from './kor-swipe-action'; 3 | -------------------------------------------------------------------------------- /components/swipe-actions/kor-swipe-action.ts: -------------------------------------------------------------------------------- 1 | import { LitElement, css, html } from 'lit'; 2 | import { property } from 'lit/decorators'; 3 | import { sharedStyles } from '../../shared-styles'; 4 | 5 | export class korSwipeAction extends LitElement { 6 | @property({ reflect: true }) icon: string | undefined; 7 | @property({ reflect: true, attribute: 'bg-color' }) bgColor: 8 | | string 9 | | undefined; 10 | 11 | static get styles() { 12 | return [ 13 | sharedStyles, 14 | css` 15 | :host { 16 | height: 100%; 17 | width: 100%; 18 | position: relative; 19 | display: flex; 20 | align-items: center; 21 | background-color: rgba(var(--neutral-1), 0.1); 22 | } 23 | :host([slot='left']) { 24 | justify-content: flex-start; 25 | } 26 | :host([slot='right']) { 27 | justify-content: flex-end; 28 | } 29 | kor-icon { 30 | position: sticky; 31 | } 32 | :host([slot='left']) kor-icon { 33 | left: var(--spacing-l); 34 | } 35 | :host([slot='right']) kor-icon { 36 | right: var(--spacing-l); 37 | } 38 | `, 39 | ]; 40 | } 41 | 42 | render() { 43 | return html` `; 44 | } 45 | 46 | attributeChangedCallback(name: string, oldval: string, newval: string) { 47 | super.attributeChangedCallback(name, oldval, newval); 48 | this.dispatchEvent(new Event(`${name}-changed`)); 49 | if (name === 'bg-color' && newval !== oldval) { 50 | this.style.backgroundColor = newval; 51 | } 52 | } 53 | 54 | connectedCallback() { 55 | super.connectedCallback(); 56 | } 57 | } 58 | 59 | if (!window.customElements.get('kor-swipe-action')) { 60 | window.customElements.define('kor-swipe-action', korSwipeAction); 61 | } 62 | -------------------------------------------------------------------------------- /components/swipe-actions/kor-swipe-actions.ts: -------------------------------------------------------------------------------- 1 | import { LitElement, css, html } from 'lit'; 2 | import { sharedStyles } from '../../shared-styles'; 3 | 4 | /** 5 | * @slot - Contains the visible element to be scrolled left or right 6 | * @slot left - Contains the action shown when the user swipes to the left 7 | * @slot right - Contains the action shown when the user swipes to the right 8 | * @event swipe-right - Fired when the user swipes right more than 1/3 of the element's width 9 | * @event swipe-left - Fired when the user swipes left more than 1/3 of the element's width 10 | */ 11 | 12 | export class korSwipeActions extends LitElement { 13 | static get styles() { 14 | return [ 15 | sharedStyles, 16 | css` 17 | :host { 18 | display: flex; 19 | overflow: auto; 20 | scroll-snap-type: x mandatory; 21 | overflow-x: scroll; 22 | } 23 | slot[name] { 24 | display: flex; 25 | transition: 0.1s opacity ease-out; 26 | } 27 | slot:not([name]) { 28 | min-width: 100%; 29 | display: block; 30 | scroll-snap-align: start; 31 | } 32 | `, 33 | ]; 34 | } 35 | 36 | render() { 37 | return html` 38 | 42 | 43 | 47 | `; 48 | } 49 | 50 | connectedCallback() { 51 | super.connectedCallback(); 52 | this.addEventListener('touchend', this.handleTouchEnd); 53 | this.addEventListener('scroll', this.setSlotOpacity); 54 | } 55 | 56 | setSlotWidth(tar: EventTarget | null): void { 57 | if ((tar).assignedNodes().length > 0) { 58 | (tar).style.minWidth = '100%'; 59 | } else { 60 | (tar).style.minWidth = 'unset'; 61 | } 62 | } 63 | 64 | handleTouchEnd(): void { 65 | const scrollDelta = this.scrollLeft - this.clientWidth; 66 | if (scrollDelta < (this.clientWidth / 3) * -1) { 67 | this.dispatchEvent(new Event('swipe-left')); 68 | } else if (scrollDelta > this.clientWidth / 3) { 69 | this.dispatchEvent(new Event('swipe-right')); 70 | } 71 | } 72 | 73 | setSlotOpacity(): void { 74 | const leftSlot: any = this.shadowRoot?.querySelector('slot[name="left"]'); 75 | const rightSlot: any = this.shadowRoot?.querySelector('slot[name="right"]'); 76 | const scrollDelta = this.scrollLeft - this.clientWidth; 77 | if (leftSlot) { 78 | leftSlot.style.opacity = 79 | ((scrollDelta * -1) / this.clientWidth) * 3 > 1 ? 1 : 0.5; 80 | } 81 | if (rightSlot) { 82 | rightSlot.style.opacity = 83 | ((scrollDelta * 1) / this.clientWidth) * 3 > 1 ? 1 : 0.5; 84 | } 85 | } 86 | 87 | getSlotOpacity(name: string): number { 88 | const modifier = name === 'left' ? -1 : 1; 89 | const opacity = 90 | (((this.scrollLeft - this.clientWidth) * modifier) / this.clientWidth) * 91 | 3; 92 | return opacity > 1 ? 1 : opacity < 0 ? 0 : opacity; 93 | } 94 | } 95 | 96 | if (!window.customElements.get('kor-swipe-actions')) { 97 | window.customElements.define('kor-swipe-actions', korSwipeActions); 98 | } 99 | -------------------------------------------------------------------------------- /components/switch/index.d.ts: -------------------------------------------------------------------------------- 1 | export { korSwitchItem } from './kor-switch-item'; 2 | export { korSwitch } from './kor-switch'; 3 | -------------------------------------------------------------------------------- /components/switch/index.ts: -------------------------------------------------------------------------------- 1 | export { korSwitchItem } from './kor-switch-item'; 2 | export { korSwitch } from './kor-switch'; 3 | -------------------------------------------------------------------------------- /components/switch/kor-switch-item.d.ts: -------------------------------------------------------------------------------- 1 | import { LitElement } from 'lit'; 2 | import '../icon'; 3 | import '../text'; 4 | /** 5 | * @prop {String} label - If set, defines the text label. 6 | * @prop {String} icon - If set, defines the icon shown instead of text label. 7 | * @prop {Boolean} active - If set to true, a highlight style gets applied. Only one item can be active at a time. 8 | * @prop {Boolean} disabled - If set to true, disables mouse clicks and the style gets updated. 9 | */ 10 | export declare class korSwitchItem extends LitElement { 11 | label: string | undefined; 12 | icon: string | undefined; 13 | active: boolean | undefined; 14 | disabled: boolean | undefined; 15 | static get styles(): import("lit").CSSResultGroup[]; 16 | render(): import("lit-html").TemplateResult<1>; 17 | attributeChangedCallback(name: string, oldval: string, newval: string): void; 18 | connectedCallback(): void; 19 | handleActive(): void; 20 | } 21 | -------------------------------------------------------------------------------- /components/switch/kor-switch-item.ts: -------------------------------------------------------------------------------- 1 | import { LitElement, css, html } from 'lit'; 2 | import { property } from 'lit/decorators'; 3 | import { sharedStyles } from '../../shared-styles'; 4 | import '../icon'; 5 | import '../text'; 6 | 7 | /** 8 | * @prop {String} label - If set, defines the text label. 9 | * @prop {String} icon - If set, defines the icon shown instead of text label. 10 | * @prop {Boolean} active - If set to true, a highlight style gets applied. Only one item can be active at a time. 11 | * @prop {Boolean} disabled - If set to true, disables mouse clicks and the style gets updated. 12 | */ 13 | 14 | export class korSwitchItem extends LitElement { 15 | @property({ type: String, reflect: true }) label: string | undefined; 16 | @property({ type: String, reflect: true }) icon: string | undefined; 17 | @property({ type: Boolean, reflect: true }) active: boolean | undefined; 18 | @property({ type: Boolean, reflect: true }) disabled: boolean | undefined; 19 | 20 | static get styles() { 21 | return [ 22 | sharedStyles, 23 | css` 24 | :host { 25 | display: flex; 26 | width: max-content; 27 | min-width: 40px; 28 | max-width: 120px; 29 | padding: var(--spacing-xs) var(--spacing-m); 30 | border-radius: var(--border-radius); 31 | cursor: pointer; 32 | align-items: center; 33 | justify-content: center; 34 | transition: var(--transition-1); 35 | } 36 | .label { 37 | user-select: none; 38 | white-space: nowrap; 39 | overflow: hidden; 40 | text-overflow: ellipsis; 41 | } 42 | .label, 43 | kor-icon { 44 | color: var(--text-2); 45 | } 46 | /* active */ 47 | :host([active]) .label, 48 | :host([active]) kor-icon { 49 | color: var(--text-1); 50 | } 51 | :host([active]) { 52 | background: rgba(var(--neutral-1), 0.1); 53 | } 54 | /* disabled */ 55 | :host([disabled]) { 56 | pointer-events: none; 57 | opacity: 0.2; 58 | } 59 | /* hover inputs */ 60 | @media (hover: hover) { 61 | :host(:not([active]):hover) { 62 | background: rgba(var(--neutral-1), 0.05); 63 | } 64 | :host([active]:hover) { 65 | background: rgba(var(--neutral-1), 0.15); 66 | } 67 | } 68 | `, 69 | ]; 70 | } 71 | 72 | render() { 73 | return html` 74 | ${this.icon ? html` ` : ''} 75 | ${this.label && !this.icon 76 | ? html` ${this.label} ` 77 | : ''} 78 | `; 79 | } 80 | 81 | attributeChangedCallback(name: string, oldval: string, newval: string) { 82 | super.attributeChangedCallback(name, oldval, newval); 83 | this.dispatchEvent(new Event(`${name}-changed`)); 84 | } 85 | 86 | connectedCallback() { 87 | super.connectedCallback(); 88 | this.addEventListener('click', () => this.handleActive()); 89 | } 90 | 91 | handleActive() { 92 | let siblings: any = this.parentElement?.childNodes; 93 | siblings.forEach((el: any) => { 94 | el.active = false; 95 | }); 96 | (this).active = true; 97 | } 98 | } 99 | 100 | if (!window.customElements.get('kor-switch-item')) { 101 | window.customElements.define('kor-switch-item', korSwitchItem); 102 | } 103 | -------------------------------------------------------------------------------- /components/switch/kor-switch.d.ts: -------------------------------------------------------------------------------- 1 | import { LitElement } from 'lit'; 2 | /** 3 | * @slot - Hosts kor-switch-items. 4 | */ 5 | export declare class korSwitch extends LitElement { 6 | static get styles(): import("lit").CSSResultGroup[]; 7 | render(): import("lit-html").TemplateResult<1>; 8 | attributeChangedCallback(name: string, oldval: string, newval: string): void; 9 | } 10 | -------------------------------------------------------------------------------- /components/switch/kor-switch.ts: -------------------------------------------------------------------------------- 1 | import { LitElement, css, html } from 'lit'; 2 | import { sharedStyles } from '../../shared-styles'; 3 | 4 | /** 5 | * @slot - Hosts kor-switch-items. 6 | */ 7 | 8 | export class korSwitch extends LitElement { 9 | static get styles() { 10 | return [ 11 | sharedStyles, 12 | css` 13 | :host { 14 | background-color: rgba(var(--neutral-1), 0.1); 15 | display: flex; 16 | width: max-content; 17 | height: max-content; 18 | border-radius: var(--border-radius); 19 | } 20 | `, 21 | ]; 22 | } 23 | 24 | render() { 25 | return html` `; 26 | } 27 | 28 | attributeChangedCallback(name: string, oldval: string, newval: string) { 29 | super.attributeChangedCallback(name, oldval, newval); 30 | this.dispatchEvent(new Event(`${name}-changed`)); 31 | } 32 | } 33 | 34 | if (!window.customElements.get('kor-switch')) { 35 | window.customElements.define('kor-switch', korSwitch); 36 | } 37 | -------------------------------------------------------------------------------- /components/table/index.d.ts: -------------------------------------------------------------------------------- 1 | import './kor-table-cell'; 2 | import './kor-table-row'; 3 | export { korTable } from './kor-table'; 4 | -------------------------------------------------------------------------------- /components/table/index.ts: -------------------------------------------------------------------------------- 1 | import './kor-table-cell'; 2 | import './kor-table-row'; 3 | export { korTable } from './kor-table'; 4 | -------------------------------------------------------------------------------- /components/table/kor-table-cell.d.ts: -------------------------------------------------------------------------------- 1 | import { LitElement } from 'lit'; 2 | import '../icon'; 3 | import '../text'; 4 | /** 5 | * @prop {String} alignment - Defines the alignment of items inside the cell. Possible values are left, center and right. 6 | * @prop {String} sortDirection - (If head, sortable and sorted are true) Defines the direction of sorting. Possible values are asc and desc. 7 | * @prop {Number} gridCols - Defines how many columns the cell occupies. The sum of all cells in a given row should not surpass the total number of columns in the table (which is 24 by default). 8 | * @prop {Boolean} head - If set to true, the cell will behave like a table head (use if the parent kor-table-row is placed on the header slot of the table). 9 | * @prop {Boolean} sortable - (If head is true) If set to true, upon clicking on the cell it will toggle the sorted property. 10 | * @prop {Boolean} sorted - (If head and sortable are true) If set to true, an arrow will be shown to indicate that the column is sorted. 11 | * 12 | * @slot - Hosts plain text or other elements. 13 | */ 14 | export declare class korTableCell extends LitElement { 15 | gridCols: number | undefined; 16 | alignment: string; 17 | head: boolean | undefined; 18 | sorted: boolean | undefined; 19 | sortable: boolean | undefined; 20 | sortDirection: string | undefined; 21 | static get styles(): import("lit").CSSResultGroup[]; 22 | render(): import("lit-html").TemplateResult<1>; 23 | attributeChangedCallback(name: string, oldval: string, newval: string): void; 24 | handleSort(): void; 25 | } 26 | -------------------------------------------------------------------------------- /components/table/kor-table-cell.ts: -------------------------------------------------------------------------------- 1 | import { LitElement, css, html } from 'lit'; 2 | import { property } from 'lit/decorators'; 3 | import { sharedStyles } from '../../shared-styles'; 4 | import '../icon'; 5 | import '../text'; 6 | 7 | /** 8 | * @prop {String} alignment - Defines the alignment of items inside the cell. Possible values are left, center and right. 9 | * @prop {String} sortDirection - (If head, sortable and sorted are true) Defines the direction of sorting. Possible values are asc and desc. 10 | * @prop {Number} gridCols - Defines how many columns the cell occupies. The sum of all cells in a given row should not surpass the total number of columns in the table (which is 24 by default). 11 | * @prop {Boolean} head - If set to true, the cell will behave like a table head (use if the parent kor-table-row is placed on the header slot of the table). 12 | * @prop {Boolean} sortable - (If head is true) If set to true, upon clicking on the cell it will toggle the sorted property. 13 | * @prop {Boolean} sorted - (If head and sortable are true) If set to true, an arrow will be shown to indicate that the column is sorted. 14 | * 15 | * @slot - Hosts plain text or other elements. 16 | */ 17 | 18 | export class korTableCell extends LitElement { 19 | @property({ type: Number, reflect: true, attribute: 'grid-cols' }) gridCols: 20 | | number 21 | | undefined; 22 | @property({ type: String, reflect: true }) alignment = 'left'; 23 | @property({ type: Boolean, reflect: true }) head: boolean | undefined; 24 | @property({ type: Boolean, reflect: true }) sorted: boolean | undefined; 25 | @property({ type: Boolean, reflect: true }) sortable: boolean | undefined; 26 | @property({ type: String, reflect: true, attribute: 'sort-direction' }) 27 | sortDirection: string | undefined; 28 | 29 | static get styles() { 30 | return [ 31 | sharedStyles, 32 | css` 33 | :host { 34 | display: flex; 35 | align-items: center; 36 | padding: var(--spacing-m) var(--spacing-s); 37 | font: var(--body-1); 38 | overflow: hidden; 39 | cursor: default; 40 | } 41 | kor-text { 42 | overflow: hidden; 43 | text-overflow: ellipsis; 44 | white-space: nowrap; 45 | } 46 | /* condensed */ 47 | :host:host-context(kor-table[condensed]) { 48 | padding: var(--spacing-s); 49 | } 50 | /* head */ 51 | :host([head]) kor-text { 52 | font-weight: bold; 53 | } 54 | /* align */ 55 | :host([alignment='center']) { 56 | justify-content: center; 57 | } 58 | :host([alignment='right']) { 59 | justify-content: flex-end; 60 | } 61 | /* sortable */ 62 | :host([sortable]) { 63 | cursor: pointer; 64 | } 65 | :host([sort-direction='desc']) .sort { 66 | transform: rotate(180deg); 67 | } 68 | .sort { 69 | margin: var(--spacing-xs) 0px var(--spacing-xs) var(--spacing-xs); 70 | color: var(--text-2); 71 | } 72 | `, 73 | ]; 74 | } 75 | 76 | render() { 77 | return html` 78 | 79 | 80 | 81 | ${this.head && this.sorted 82 | ? html` 83 | 84 | ` 85 | : ''} 86 | `; 87 | } 88 | 89 | attributeChangedCallback(name: string, oldval: string, newval: string) { 90 | super.attributeChangedCallback(name, oldval, newval); 91 | this.dispatchEvent(new Event(`${name}-changed`)); 92 | if (name == 'grid-cols') { 93 | this.style.gridColumn = `span ${this.gridCols}`; 94 | } 95 | if (name == 'sortable' && this.sortable) { 96 | if (!this.sortDirection) { 97 | this.sortDirection = 'asc'; 98 | } 99 | this.addEventListener('click', () => { 100 | this.handleSort(); 101 | }); 102 | } 103 | } 104 | 105 | handleSort() { 106 | if (this.sorted) { 107 | // switch direction if already sorted 108 | this.sortDirection = this.sortDirection == 'asc' ? 'desc' : 'asc'; 109 | } else { 110 | // unsort other heads otherwise 111 | let siblings: NodeList | undefined = this.parentElement?.childNodes; 112 | siblings?.forEach((el: any) => { 113 | el.sorted = false; 114 | }); 115 | this.sorted = true; 116 | this.sortDirection = 'asc'; 117 | } 118 | } 119 | } 120 | 121 | if (!window.customElements.get('kor-table-cell')) { 122 | window.customElements.define('kor-table-cell', korTableCell); 123 | } 124 | -------------------------------------------------------------------------------- /components/table/kor-table-row.d.ts: -------------------------------------------------------------------------------- 1 | import { LitElement } from 'lit'; 2 | /** 3 | * @prop {Boolean} active - If set to true, a highlight style gets applied. 4 | * 5 | * @slot - Hosts (kor-table-cells). 6 | */ 7 | export declare class korTableRow extends LitElement { 8 | active: boolean | undefined; 9 | static get styles(): import("lit").CSSResultGroup[]; 10 | render(): import("lit-html").TemplateResult<1>; 11 | attributeChangedCallback(name: string, oldval: string, newval: string): void; 12 | connectedCallback(): void; 13 | handleActive(): void; 14 | handleColumns(): void; 15 | } 16 | -------------------------------------------------------------------------------- /components/table/kor-table-row.ts: -------------------------------------------------------------------------------- 1 | import { LitElement, css, html } from 'lit'; 2 | import { property } from 'lit/decorators'; 3 | import { sharedStyles } from '../../shared-styles'; 4 | 5 | /** 6 | * @prop {Boolean} active - If set to true, a highlight style gets applied. 7 | * 8 | * @slot - Hosts (kor-table-cells). 9 | */ 10 | 11 | export class korTableRow extends LitElement { 12 | @property({ type: Boolean, reflect: true }) active: boolean | undefined; 13 | 14 | static get styles() { 15 | return [ 16 | sharedStyles, 17 | css` 18 | :host { 19 | display: grid; 20 | border-bottom: 1px solid rgba(var(--neutral-1), 0.15); 21 | transition: var(--transition-1); 22 | } 23 | /* header */ 24 | :host([slot='header']) { 25 | border-color: rgba(var(--neutral-1), 0.4); 26 | } 27 | /* active */ 28 | :host([active]) { 29 | background-color: rgba(var(--neutral-1), 0.1); 30 | } 31 | /* hover inputs */ 32 | @media (hover: hover) { 33 | :host(:hover:not([active]):not([slot='header'])) { 34 | background-color: rgba(var(--neutral-1), 0.05); 35 | } 36 | :host(:hover:not([active])):host-context(kor-table[readonly]) { 37 | background-color: transparent; 38 | } 39 | } 40 | `, 41 | ]; 42 | } 43 | 44 | render() { 45 | return html` `; 46 | } 47 | 48 | attributeChangedCallback(name: string, oldval: string, newval: string) { 49 | super.attributeChangedCallback(name, oldval, newval); 50 | this.dispatchEvent(new Event(`${name}-changed`)); 51 | } 52 | 53 | connectedCallback() { 54 | super.connectedCallback(); 55 | this.addEventListener('click', () => this.handleActive()); 56 | this.handleColumns(); 57 | } 58 | 59 | handleActive() { 60 | let table: HTMLElement | null, siblings: NodeList | undefined; 61 | table = this.closest('kor-table'); 62 | if (!(table)?.readonly && this.slot != 'header') { 63 | siblings = this.parentElement?.childNodes; 64 | siblings?.forEach((el: any) => { 65 | (el).active = false; 66 | }); 67 | this.active = true; 68 | } 69 | } 70 | 71 | handleColumns() { 72 | const table: HTMLElement | null = this.closest('kor-table'); 73 | // define columns on load 74 | this.style.gridTemplateColumns = (table).columns; 75 | // listen to column changes 76 | table?.addEventListener('columns-changed', () => { 77 | this.style.gridTemplateColumns = (table).columns; 78 | }); 79 | } 80 | } 81 | 82 | if (!window.customElements.get('kor-table-row')) { 83 | window.customElements.define('kor-table-row', korTableRow); 84 | } 85 | -------------------------------------------------------------------------------- /components/table/kor-table.d.ts: -------------------------------------------------------------------------------- 1 | import { LitElement } from 'lit'; 2 | /** 3 | * @prop {String} columns - Defines the column template. It accepts any value also accepted by the standard css grid-template-columns (e.g. repeat(4, 1fr), 40px 1fr auto). 4 | * @prop {Boolean} readonly - If set to true, disables selection on mouse clicks and the hover effects. 5 | * @prop {Boolean} condensed - If set to true, condensed the height of the rows and cells. 6 | * 7 | * @slot - The container where the table body is rendered (kor-table-rows). 8 | * @slot header - The container for the header (kor-table-row). It does not scroll with the content, but remains sticky on top. 9 | */ 10 | export declare class korTable extends LitElement { 11 | readonly: boolean | undefined; 12 | condensed: boolean | undefined; 13 | columns: string; 14 | static get styles(): import("lit").CSSResultGroup[]; 15 | render(): import("lit-html").TemplateResult<1>; 16 | attributeChangedCallback(name: string, oldval: string, newval: string): void; 17 | } 18 | -------------------------------------------------------------------------------- /components/table/kor-table.ts: -------------------------------------------------------------------------------- 1 | import { LitElement, css, html } from 'lit'; 2 | import { property } from 'lit/decorators'; 3 | import { sharedStyles } from '../../shared-styles'; 4 | 5 | /** 6 | * @prop {String} columns - Defines the column template. It accepts any value also accepted by the standard css grid-template-columns (e.g. repeat(4, 1fr), 40px 1fr auto). 7 | * @prop {Boolean} readonly - If set to true, disables selection on mouse clicks and the hover effects. 8 | * @prop {Boolean} condensed - If set to true, condensed the height of the rows and cells. 9 | * 10 | * @slot - The container where the table body is rendered (kor-table-rows). 11 | * @slot header - The container for the header (kor-table-row). It does not scroll with the content, but remains sticky on top. 12 | */ 13 | 14 | export class korTable extends LitElement { 15 | @property({ type: Boolean, reflect: true }) readonly: boolean | undefined; 16 | @property({ type: Boolean, reflect: true }) condensed: boolean | undefined; 17 | @property({ type: String, reflect: true }) columns = 'repeat(24, 1fr)'; 18 | 19 | static get styles() { 20 | return [ 21 | sharedStyles, 22 | css` 23 | :host { 24 | display: flex; 25 | flex-direction: column; 26 | max-height: 100%; 27 | margin: 0 !important; 28 | } 29 | slot { 30 | display: block; 31 | } 32 | slot:not([name]) { 33 | flex: 1; 34 | overflow: auto; 35 | } 36 | `, 37 | ]; 38 | } 39 | 40 | render() { 41 | return html` 42 | 43 | 44 | `; 45 | } 46 | 47 | attributeChangedCallback(name: string, oldval: string, newval: string) { 48 | super.attributeChangedCallback(name, oldval, newval); 49 | this.dispatchEvent(new Event(`${name}-changed`)); 50 | } 51 | } 52 | 53 | if (!window.customElements.get('kor-table')) { 54 | window.customElements.define('kor-table', korTable); 55 | } 56 | -------------------------------------------------------------------------------- /components/tabs/index.d.ts: -------------------------------------------------------------------------------- 1 | export { korTabItem } from './kor-tab-item'; 2 | export { korTabs } from './kor-tabs'; 3 | -------------------------------------------------------------------------------- /components/tabs/index.ts: -------------------------------------------------------------------------------- 1 | export { korTabItem } from './kor-tab-item'; 2 | export { korTabs } from './kor-tabs'; 3 | -------------------------------------------------------------------------------- /components/tabs/kor-tab-item.d.ts: -------------------------------------------------------------------------------- 1 | import { LitElement } from 'lit'; 2 | import '../icon'; 3 | import '../text'; 4 | /** 5 | * @prop {String} label - If set, defines the text label. 6 | * @prop {String} icon - If set, defines the icon shown above the label (if set). 7 | * @prop {Boolean} active - If set to true, a highlight style gets applied. Only one item can be active at a time. 8 | * @prop {Boolean} disabled - If set to true, disables mouse clicks and the style gets updated. 9 | * @prop {'horizontal'|'vertical'} orientation - Defines the orientation of the component. Possible values are `horizontal` and `vertical`. 10 | * 11 | * @slot - The main content area. If used, replaces the label and icon elements. 12 | */ 13 | export declare class korTabItem extends LitElement { 14 | label: string | undefined; 15 | icon: string | undefined; 16 | active: boolean | undefined; 17 | disabled: boolean | undefined; 18 | orientation: 'horizontal' | 'vertical'; 19 | static get styles(): import("lit").CSSResultGroup[]; 20 | render(): import("lit-html").TemplateResult<1>; 21 | attributeChangedCallback(name: string, oldval: string, newval: string): void; 22 | connectedCallback(): void; 23 | handleActive(): void; 24 | } 25 | -------------------------------------------------------------------------------- /components/tabs/kor-tab-item.ts: -------------------------------------------------------------------------------- 1 | import { LitElement, css, html } from 'lit'; 2 | import { property } from 'lit/decorators'; 3 | import { sharedStyles } from '../../shared-styles'; 4 | import '../icon'; 5 | import '../text'; 6 | 7 | /** 8 | * @prop {String} label - If set, defines the text label. 9 | * @prop {String} icon - If set, defines the icon shown above the label (if set). 10 | * @prop {Boolean} active - If set to true, a highlight style gets applied. Only one item can be active at a time. 11 | * @prop {Boolean} disabled - If set to true, disables mouse clicks and the style gets updated. 12 | * @prop {'horizontal'|'vertical'} orientation - Defines the orientation of the component. Possible values are `horizontal` and `vertical`. 13 | * 14 | * @slot - The main content area. If used, replaces the label and icon elements. 15 | */ 16 | 17 | export class korTabItem extends LitElement { 18 | @property({ type: String, reflect: true }) label: string | undefined; 19 | @property({ type: String, reflect: true }) icon: string | undefined; 20 | @property({ type: Boolean, reflect: true }) active: boolean | undefined; 21 | @property({ type: Boolean, reflect: true }) disabled: boolean | undefined; 22 | @property({ type: String, reflect: true }) orientation: 23 | | 'horizontal' 24 | | 'vertical' = 'horizontal'; 25 | 26 | static get styles() { 27 | return [ 28 | sharedStyles, 29 | css` 30 | :host { 31 | display: flex; 32 | align-items: center; 33 | box-sizing: border-box; 34 | transition: var(--transition-1); 35 | cursor: pointer; 36 | border-color: transparent; 37 | border-style: solid; 38 | color: var(--text-2); 39 | } 40 | .label { 41 | line-height: 24px; 42 | font-weight: bold; 43 | white-space: nowrap; 44 | overflow: hidden; 45 | text-overflow: ellipsis; 46 | } 47 | .label, 48 | kor-icon { 49 | color: unset; 50 | } 51 | /* horizontal */ 52 | :host([orientation='horizontal']) { 53 | flex-direction: column; 54 | justify-content: center; 55 | width: max-content; 56 | min-width: 72px; 57 | max-width: 240px; 58 | height: calc(24px + var(--spacing-l) * 2); 59 | padding: 0px var(--spacing-l); 60 | border-width: 0px 0px 2px 0px; 61 | } 62 | :host([orientation='horizontal']) .label { 63 | text-align: center; 64 | } 65 | /* vertical */ 66 | :host([orientation='vertical']) .label { 67 | text-align: left; 68 | } 69 | :host([orientation='vertical']) { 70 | justify-content: flex-start; 71 | flex-direction: row; 72 | width: 100%; 73 | min-width: unset; 74 | max-width: 100%; 75 | height: max-content; 76 | padding: var(--spacing-s) var(--spacing-s) var(--spacing-s) 77 | calc(var(--spacing-l) - 2px); 78 | border-width: 0px 0px 0px 2px; 79 | } 80 | :host([orientation='vertical']) { 81 | gap: var(--spacing-s); 82 | } 83 | /* active */ 84 | :host([active]) { 85 | border-color: rgb(var(--accent-1)); 86 | } 87 | :host([active]) { 88 | color: var(--text-1); 89 | } 90 | /* disabled */ 91 | :host([disabled]) { 92 | pointer-events: none; 93 | opacity: 0.2; 94 | } 95 | /* hover inputs */ 96 | @media (hover: hover) { 97 | :host(:hover) .label { 98 | color: var(--text-1); 99 | } 100 | } 101 | `, 102 | ]; 103 | } 104 | 105 | render() { 106 | return html` 107 | 108 | ${this.icon ? html` ` : ''} 109 | ${this.label 110 | ? html` ${this.label} ` 111 | : ''} 112 | 113 | `; 114 | } 115 | 116 | attributeChangedCallback(name: string, oldval: string, newval: string) { 117 | super.attributeChangedCallback(name, oldval, newval); 118 | this.dispatchEvent(new Event(`${name}-changed`)); 119 | } 120 | 121 | connectedCallback() { 122 | super.connectedCallback(); 123 | this.addEventListener('click', () => this.handleActive()); 124 | } 125 | 126 | handleActive() { 127 | let siblings: any = 128 | this.closest('kor-tabs')?.querySelectorAll('kor-tab-item'); 129 | siblings.forEach((el: any) => { 130 | el.active = false; 131 | }); 132 | (this).active = true; 133 | } 134 | } 135 | 136 | if (!window.customElements.get('kor-tab-item')) { 137 | window.customElements.define('kor-tab-item', korTabItem); 138 | } 139 | -------------------------------------------------------------------------------- /components/tabs/kor-tabs.d.ts: -------------------------------------------------------------------------------- 1 | import { LitElement } from 'lit'; 2 | /** 3 | * @prop {'horizontal'|'vertical'} orientation - Defines the orientation of the component. Possible values are `horizontal` and `vertical`. 4 | * 5 | * @slot - Hosts kor-tab-items. 6 | */ 7 | export declare class korTabs extends LitElement { 8 | orientation: 'horizontal' | 'vertical'; 9 | static get styles(): import("lit").CSSResultGroup[]; 10 | render(): import("lit-html").TemplateResult<1>; 11 | handleOrientation(): void; 12 | attributeChangedCallback(name: string, oldval: string, newval: string): void; 13 | } 14 | -------------------------------------------------------------------------------- /components/tabs/kor-tabs.ts: -------------------------------------------------------------------------------- 1 | import { LitElement, css, html } from 'lit'; 2 | import { property } from 'lit/decorators'; 3 | import { sharedStyles } from '../../shared-styles'; 4 | 5 | /** 6 | * @prop {'horizontal'|'vertical'} orientation - Defines the orientation of the component. Possible values are `horizontal` and `vertical`. 7 | * 8 | * @slot - Hosts kor-tab-items. 9 | */ 10 | 11 | export class korTabs extends LitElement { 12 | @property({ type: String, reflect: true }) orientation: 13 | | 'horizontal' 14 | | 'vertical' = 'horizontal'; 15 | 16 | static get styles() { 17 | return [ 18 | sharedStyles, 19 | css` 20 | :host { 21 | display: flex; 22 | width: 100%; 23 | height: max-content; 24 | } 25 | :host([slot='header']) { 26 | margin-top: calc(var(--spacing-l) * -1); 27 | } 28 | :host(:not([orientation='vertical'])) { 29 | border-bottom: 1px solid rgba(var(--neutral-1), 0.1); 30 | } 31 | /* vertical */ 32 | :host([orientation='vertical']) { 33 | flex-direction: column; 34 | } 35 | `, 36 | ]; 37 | } 38 | 39 | render() { 40 | return html` 41 | 42 | `; 43 | } 44 | 45 | handleOrientation() { 46 | (>this.childNodes).forEach((el: any) => { 47 | el.orientation = this.orientation; 48 | }); 49 | } 50 | 51 | attributeChangedCallback(name: string, oldval: string, newval: string) { 52 | super.attributeChangedCallback(name, oldval, newval); 53 | this.dispatchEvent(new Event(`${name}-changed`)); 54 | } 55 | } 56 | 57 | if (!window.customElements.get('kor-tabs')) { 58 | window.customElements.define('kor-tabs', korTabs); 59 | } 60 | -------------------------------------------------------------------------------- /components/tag/index.d.ts: -------------------------------------------------------------------------------- 1 | export { korTag } from './kor-tag'; 2 | -------------------------------------------------------------------------------- /components/tag/index.ts: -------------------------------------------------------------------------------- 1 | export { korTag } from './kor-tag'; 2 | -------------------------------------------------------------------------------- /components/tag/kor-tag.d.ts: -------------------------------------------------------------------------------- 1 | import { LitElement } from 'lit'; 2 | import '../icon'; 3 | import '../text'; 4 | /** 5 | * @prop {String} label - If set, defines the text label. 6 | * @prop {String} icon - If set, defines the icon shown besides the label. 7 | * @prop {Boolean} button - If set to true, hover and click effects will be added. 8 | * @prop {Boolean} removable - If set to true, a close icon is displayed. Clicking on it dispatches a remove event. 9 | * 10 | * @fires remove - Dispatched when clicking on the close icon (removable only). 11 | */ 12 | export declare class korTag extends LitElement { 13 | label: string; 14 | icon: string | undefined; 15 | button: boolean | undefined; 16 | removable: boolean | undefined; 17 | static get styles(): import("lit").CSSResultGroup[]; 18 | render(): import("lit-html").TemplateResult<1>; 19 | attributeChangedCallback(name: string, oldval: string, newval: string): void; 20 | handleRemove(): void; 21 | } 22 | -------------------------------------------------------------------------------- /components/tag/kor-tag.ts: -------------------------------------------------------------------------------- 1 | import { LitElement, css, html } from 'lit'; 2 | import { property } from 'lit/decorators'; 3 | import { sharedStyles } from '../../shared-styles'; 4 | import '../icon'; 5 | import '../text'; 6 | 7 | /** 8 | * @prop {String} label - If set, defines the text label. 9 | * @prop {String} icon - If set, defines the icon shown besides the label. 10 | * @prop {Boolean} button - If set to true, hover and click effects will be added. 11 | * @prop {Boolean} removable - If set to true, a close icon is displayed. Clicking on it dispatches a remove event. 12 | * 13 | * @fires remove - Dispatched when clicking on the close icon (removable only). 14 | */ 15 | 16 | export class korTag extends LitElement { 17 | @property({ type: String, reflect: true }) label = 'Label'; 18 | @property({ type: String, reflect: true }) icon: string | undefined; 19 | @property({ type: Boolean, reflect: true }) button: boolean | undefined; 20 | @property({ type: Boolean, reflect: true }) removable: boolean | undefined; 21 | 22 | static get styles() { 23 | return [ 24 | sharedStyles, 25 | css` 26 | :host { 27 | padding: var(--spacing-xs); 28 | display: flex; 29 | height: max-content; 30 | width: max-content; 31 | max-width: 160px; 32 | border-radius: var(--border-radius); 33 | border: 1px solid rgba(var(--neutral-1), 0.25); 34 | transition: var(--transition-1); 35 | } 36 | .label { 37 | margin: 0 var(--spacing-xs); 38 | } 39 | /* button */ 40 | :host([button]) { 41 | cursor: pointer; 42 | } 43 | /* hover inputs */ 44 | @media (hover: hover) { 45 | :host([button]:not(:active):hover) { 46 | border-color: rgba(var(--neutral-1), 0.3); 47 | background-color: rgba(var(--neutral-1), 0.05); 48 | } 49 | } 50 | `, 51 | ]; 52 | } 53 | 54 | render() { 55 | return html` 56 | 57 | ${this.icon ? html` ` : ''} 58 | 59 | ${this.label 60 | ? html` ${this.label} ` 61 | : ''} 62 | 63 | ${this.removable 64 | ? html` 65 | 70 | ` 71 | : ''} 72 | `; 73 | } 74 | 75 | attributeChangedCallback(name: string, oldval: string, newval: string) { 76 | super.attributeChangedCallback(name, oldval, newval); 77 | this.dispatchEvent(new Event(`${name}-changed`)); 78 | } 79 | 80 | handleRemove() { 81 | this.dispatchEvent(new Event('remove')); 82 | } 83 | } 84 | 85 | if (!window.customElements.get('kor-tag')) { 86 | window.customElements.define('kor-tag', korTag); 87 | } 88 | -------------------------------------------------------------------------------- /components/text/index.d.ts: -------------------------------------------------------------------------------- 1 | export { korText } from './kor-text'; 2 | -------------------------------------------------------------------------------- /components/text/index.ts: -------------------------------------------------------------------------------- 1 | export { korText } from './kor-text'; 2 | -------------------------------------------------------------------------------- /components/text/kor-text.d.ts: -------------------------------------------------------------------------------- 1 | import { LitElement } from 'lit'; 2 | /** 3 | * @prop {'header-1'|'header-2'|'body-1'|'body-2'} size - Defines the size, line height, font family and initial color of the text. Possible values are `header-1`, `header-2`, `body-1` and `body-2`, but custom styles can be set through css. 4 | * @prop {String} color - If set, overwrites the initial color of the text. Possible values are var(--text-1) (90% neutral color), var(--text-2) (60% neutral color) and var(--text-3) (20% neutral color), but any custom RGB, RGBA, HEX or color variable can be passed to the property as value as well. 5 | * 6 | * @slot - Container where plain text (and/or other elements) is written. 7 | */ 8 | export declare class korText extends LitElement { 9 | size: string; 10 | color: 'header-1' | 'header-2' | 'body-1' | 'body-2' | string | undefined; 11 | static get styles(): import("lit").CSSResultGroup[]; 12 | render(): import("lit-html").TemplateResult<1>; 13 | attributeChangedCallback(name: string, oldval: string, newval: string): void; 14 | } 15 | -------------------------------------------------------------------------------- /components/text/kor-text.ts: -------------------------------------------------------------------------------- 1 | import { LitElement, css, html } from 'lit'; 2 | import { property } from 'lit/decorators'; 3 | import { sharedStyles } from '../../shared-styles'; 4 | 5 | /** 6 | * @prop {'header-1'|'header-2'|'body-1'|'body-2'} size - Defines the size, line height, font family and initial color of the text. Possible values are `header-1`, `header-2`, `body-1` and `body-2`, but custom styles can be set through css. 7 | * @prop {String} color - If set, overwrites the initial color of the text. Possible values are var(--text-1) (90% neutral color), var(--text-2) (60% neutral color) and var(--text-3) (20% neutral color), but any custom RGB, RGBA, HEX or color variable can be passed to the property as value as well. 8 | * 9 | * @slot - Container where plain text (and/or other elements) is written. 10 | */ 11 | 12 | export class korText extends LitElement { 13 | @property({ type: String, reflect: true }) size = 'body-1'; 14 | @property({ type: String, reflect: true }) color: 15 | | 'header-1' 16 | | 'header-2' 17 | | 'body-1' 18 | | 'body-2' 19 | | string 20 | | undefined; 21 | 22 | static get styles() { 23 | return [ 24 | sharedStyles, 25 | css` 26 | :host { 27 | color: var(--text-1); 28 | transition: var(--transition-1); 29 | } 30 | :host([size='body-1']) { 31 | font: var(--body-1); 32 | } 33 | :host([size='body-2']) { 34 | font: var(--body-2); 35 | } 36 | :host([size='header-1']) { 37 | font: var(--header-1); 38 | } 39 | :host([size='header-2']) { 40 | font: var(--header-2); 41 | } 42 | `, 43 | ]; 44 | } 45 | 46 | render() { 47 | return html``; 48 | } 49 | 50 | attributeChangedCallback(name: string, oldval: string, newval: string) { 51 | super.attributeChangedCallback(name, oldval, newval); 52 | this.dispatchEvent(new Event(`${name}-changed`)); 53 | if (name == 'color' && this.color) { 54 | this.style.color = this.color; 55 | } 56 | } 57 | } 58 | 59 | if (!window.customElements.get('kor-text')) { 60 | window.customElements.define('kor-text', korText); 61 | } 62 | -------------------------------------------------------------------------------- /components/textarea/index.ts: -------------------------------------------------------------------------------- 1 | export { korTextarea } from './kor-textarea'; 2 | -------------------------------------------------------------------------------- /components/toggle/index.d.ts: -------------------------------------------------------------------------------- 1 | export { korToggle } from './kor-toggle'; 2 | -------------------------------------------------------------------------------- /components/toggle/index.ts: -------------------------------------------------------------------------------- 1 | export { korToggle } from './kor-toggle'; 2 | -------------------------------------------------------------------------------- /components/toggle/kor-toggle.d.ts: -------------------------------------------------------------------------------- 1 | import { LitElement } from 'lit'; 2 | import '../text'; 3 | /** 4 | * @prop {String} label - If set, defines the text label. 5 | * @prop {Boolean} active - If set to true, a highlight style gets applied. 6 | * @prop {Boolean} disabled - If set to true, disables mouse clicks and the style gets updated. 7 | */ 8 | export declare class korToggle extends LitElement { 9 | label: string | undefined; 10 | active: boolean | undefined; 11 | disabled: boolean | undefined; 12 | static get styles(): import("lit").CSSResultGroup[]; 13 | render(): import("lit-html").TemplateResult<1>; 14 | attributeChangedCallback(name: string, oldval: string, newval: string): void; 15 | connectedCallback(): void; 16 | handleChange(): void; 17 | } 18 | -------------------------------------------------------------------------------- /components/toggle/kor-toggle.ts: -------------------------------------------------------------------------------- 1 | import { LitElement, css, html } from 'lit'; 2 | import { property } from 'lit/decorators'; 3 | import { sharedStyles } from '../../shared-styles'; 4 | import '../text'; 5 | 6 | /** 7 | * @prop {String} label - If set, defines the text label. 8 | * @prop {Boolean} active - If set to true, a highlight style gets applied. 9 | * @prop {Boolean} disabled - If set to true, disables mouse clicks and the style gets updated. 10 | */ 11 | 12 | export class korToggle extends LitElement { 13 | @property({ type: String, reflect: true }) label: string | undefined; 14 | @property({ type: Boolean, reflect: true }) active: boolean | undefined; 15 | @property({ type: Boolean, reflect: true }) disabled: boolean | undefined; 16 | 17 | static get styles() { 18 | return [ 19 | sharedStyles, 20 | css` 21 | :host { 22 | display: flex; 23 | cursor: pointer; 24 | } 25 | input { 26 | display: none; 27 | } 28 | /* toggle */ 29 | .bg { 30 | width: 32px; 31 | height: 20px; 32 | margin: 2px; 33 | padding: 2px; 34 | border-radius: 12px; 35 | box-sizing: border-box; 36 | border: 2px solid rgba(var(--neutral-1), 0.25); 37 | transition: var(--transition-1); 38 | } 39 | :host([active]) .bg { 40 | border-color: transparent; 41 | background: rgb(var(--accent-1)); 42 | } 43 | .dot { 44 | display: flex; 45 | transition: var(--transition-1); 46 | height: 12px; 47 | width: 12px; 48 | border-radius: 50%; 49 | background: rgba(var(--neutral-1), 0.6); 50 | } 51 | :host([active]) .dot { 52 | transform: translateX(12px); 53 | background: white; 54 | } 55 | /* label */ 56 | kor-text { 57 | flex: 1; 58 | margin-left: var(--spacing-s); 59 | white-space: nowrap; 60 | overflow: hidden; 61 | text-overflow: ellipsis; 62 | pointer-events: none; 63 | } 64 | /* disabled */ 65 | :host([disabled]) { 66 | pointer-events: none; 67 | opacity: 0.2; 68 | } 69 | /* hover inputs */ 70 | @media (hover: hover) { 71 | :host(:hover:not(:active):not([active])) .bg { 72 | border-color: rgba(var(--neutral-1), 0.3); 73 | } 74 | :host(:hover:not(:active):not([active])) .dot { 75 | background: rgba(var(--neutral-1), 0.9); 76 | } 77 | } 78 | `, 79 | ]; 80 | } 81 | 82 | render() { 83 | return html` 84 | 92 |
93 |
94 |
95 | ${this.label ? html` ${this.label} ` : ''} 96 | `; 97 | } 98 | 99 | attributeChangedCallback(name: string, oldval: string, newval: string) { 100 | super.attributeChangedCallback(name, oldval, newval); 101 | this.dispatchEvent(new Event(`${name}-changed`)); 102 | } 103 | 104 | connectedCallback() { 105 | super.connectedCallback(); 106 | this.addEventListener('click', () => { 107 | this.active = !this.active; 108 | }); 109 | } 110 | 111 | handleChange() { 112 | this.dispatchEvent( 113 | new CustomEvent('change', { 114 | bubbles: true, 115 | composed: true, 116 | }) 117 | ); 118 | } 119 | } 120 | 121 | if (!window.customElements.get('kor-toggle')) { 122 | window.customElements.define('kor-toggle', korToggle); 123 | } 124 | -------------------------------------------------------------------------------- /components/tool/index.d.ts: -------------------------------------------------------------------------------- 1 | export { korTool } from './kor-tool'; 2 | -------------------------------------------------------------------------------- /components/tool/index.ts: -------------------------------------------------------------------------------- 1 | export { korTool } from './kor-tool'; 2 | -------------------------------------------------------------------------------- /components/tool/kor-tool.d.ts: -------------------------------------------------------------------------------- 1 | import { LitElement } from 'lit'; 2 | import '../icon'; 3 | import '../text'; 4 | /** 5 | * @prop {String} label - If set, defines the text label. 6 | * @prop {String} icon - If set, defines the icon shown above the text label (if set). 7 | * @prop {'s'|'m'} size - Defines the size of the component. Possible values are `s` and `m`. 8 | * @prop {Boolean} active - If set to true, a highlight style gets applied. 9 | * @prop {Boolean} toggle - If set to true, clicking on the menu item will toggle the active property between true and false. 10 | * @prop {Boolean} disabled - If set to true, disables mouse clicks and the style gets updated. 11 | */ 12 | export declare class korTool extends LitElement { 13 | label: string | undefined; 14 | icon: string | undefined; 15 | size: 's' | 'm'; 16 | toggle: boolean | undefined; 17 | active: boolean | undefined; 18 | disabled: boolean | undefined; 19 | static get styles(): import("lit").CSSResultGroup[]; 20 | render(): import("lit-html").TemplateResult<1>; 21 | attributeChangedCallback(name: string, oldval: string, newval: string): void; 22 | } 23 | -------------------------------------------------------------------------------- /components/tool/kor-tool.ts: -------------------------------------------------------------------------------- 1 | import { LitElement, css, html } from 'lit'; 2 | import { property } from 'lit/decorators'; 3 | import { sharedStyles } from '../../shared-styles'; 4 | import '../icon'; 5 | import '../text'; 6 | 7 | /** 8 | * @prop {String} label - If set, defines the text label. 9 | * @prop {String} icon - If set, defines the icon shown above the text label (if set). 10 | * @prop {'s'|'m'} size - Defines the size of the component. Possible values are `s` and `m`. 11 | * @prop {Boolean} active - If set to true, a highlight style gets applied. 12 | * @prop {Boolean} toggle - If set to true, clicking on the menu item will toggle the active property between true and false. 13 | * @prop {Boolean} disabled - If set to true, disables mouse clicks and the style gets updated. 14 | */ 15 | 16 | export class korTool extends LitElement { 17 | @property({ type: String, reflect: true }) label: string | undefined; 18 | @property({ type: String, reflect: true }) icon: string | undefined; 19 | @property({ type: String, reflect: true }) size: 's' | 'm' = 'm'; 20 | @property({ type: Boolean, reflect: true }) toggle: boolean | undefined; 21 | @property({ type: Boolean, reflect: true }) active: boolean | undefined; 22 | @property({ type: Boolean, reflect: true }) disabled: boolean | undefined; 23 | 24 | static get styles() { 25 | return [ 26 | sharedStyles, 27 | css` 28 | :host { 29 | display: flex; 30 | flex-direction: column; 31 | align-items: center; 32 | justify-content: center; 33 | width: max-content; 34 | padding: var(--spacing-xs); 35 | box-sizing: border-box; 36 | transition: var(--transition-1); 37 | cursor: pointer; 38 | border-radius: var(--border-radius); 39 | } 40 | .label { 41 | display: -webkit-box; 42 | width: 100%; 43 | line-height: 12px; 44 | text-align: center; 45 | overflow: hidden; 46 | text-overflow: ellipsis; 47 | -webkit-line-clamp: 2; 48 | -webkit-box-orient: vertical; 49 | } 50 | /* size */ 51 | :host([size='m']) { 52 | height: 56px; 53 | width: 56px; 54 | } 55 | :host([size='s']) { 56 | height: 32px; 57 | width: 32px; 58 | } 59 | /* active */ 60 | :host([active]) { 61 | background-color: rgba(var(--neutral-1), 0.1); 62 | } 63 | /* disabled */ 64 | :host([disabled]) { 65 | pointer-events: none; 66 | opacity: 0.2; 67 | } 68 | /* hover inputs */ 69 | @media (hover: hover) { 70 | :host(:not(:active):not([active]):hover) { 71 | background-color: rgba(var(--neutral-1), 0.05); 72 | } 73 | } 74 | `, 75 | ]; 76 | } 77 | 78 | render() { 79 | return html` 80 | ${this.icon ? html` ` : ''} 81 | ${this.label && !(this.icon && this.size == 's') 82 | ? html` ${this.label} ` 83 | : ''} 84 | `; 85 | } 86 | 87 | attributeChangedCallback(name: string, oldval: string, newval: string) { 88 | super.attributeChangedCallback(name, oldval, newval); 89 | this.dispatchEvent(new Event(`${name}-changed`)); 90 | // add toggle click listener 91 | if (name == 'toggle' && this.toggle) { 92 | this.addEventListener('click', () => { 93 | this.active = !this.active; 94 | }); 95 | } 96 | } 97 | } 98 | 99 | if (!window.customElements.get('kor-tool')) { 100 | window.customElements.define('kor-tool', korTool); 101 | } 102 | -------------------------------------------------------------------------------- /components/tooltip/index.d.ts: -------------------------------------------------------------------------------- 1 | export { korTooltip } from './kor-tooltip'; 2 | -------------------------------------------------------------------------------- /components/tooltip/index.ts: -------------------------------------------------------------------------------- 1 | export { korTooltip } from './kor-tooltip'; 2 | -------------------------------------------------------------------------------- /components/tooltip/kor-tooltip.d.ts: -------------------------------------------------------------------------------- 1 | import { LitElement } from 'lit'; 2 | import '../popover'; 3 | /** 4 | * @prop {String} label - If set, defines the text label. 5 | * @prop {String} icon - If set, defines the icon shown close to the label. 6 | * @prop {'left'|'right'|'top'|'bottom'} position - Defines the position of the component in the screen. Possible values are `left`, `right`, `top` and `bottom`. 7 | * @prop {'column'|'row'} flexDirection - Defines the direction in which the slotted content flows (e.g. top to bottom or left to right). Possible values are `column` and `row`. 8 | * @prop {String} target - Defines the DOM element to which the mouseover event will be attached. It behaves identically to querySelector, which means tag names, IDs, classes and similar can be used (e.g. #myEl, .myEl, kor-input[type='number']). Please ensure the selector is unique. 9 | * @prop {Boolean} visible - If set to true, displays the component on top of the screen. 10 | * 11 | * @slot - Displayed inside the content area. 12 | * @slot header - If used, the header slot is shown on top of the component, below the label (if any is set). 13 | * @slot functions - Displayed on the right side of the label or header slot. 14 | * @slot footer - Displayed below the content area. 15 | * 16 | * @cssprop --body-gap - Defines the gap between elements in the body slot. 17 | * @cssprop --header-gap - Defines the gap between elements in the header slot. 18 | * @cssprop --functions-gap - Defines the gap between elements in the functions slot. 19 | * @cssprop --footer-gap - Defines the gap between elements in the footer slot. 20 | */ 21 | export declare class korTooltip extends LitElement { 22 | label: string | undefined; 23 | icon: string | undefined; 24 | flexDirection: 'column' | 'row'; 25 | position: 'left' | 'right' | 'top' | 'bottom'; 26 | target: string | undefined; 27 | visible: boolean | undefined; 28 | emptyHeader: boolean; 29 | emptyFunctions: boolean; 30 | emptyFooter: boolean; 31 | static get styles(): import("lit").CSSResultGroup[]; 32 | render(): import("lit-html").TemplateResult<1>; 33 | attributeChangedCallback(name: string, oldval: string, newval: string): void; 34 | targetObserver(): void; 35 | } 36 | -------------------------------------------------------------------------------- /components/tooltip/kor-tooltip.ts: -------------------------------------------------------------------------------- 1 | import { LitElement, css, html } from 'lit'; 2 | import { property, state } from 'lit/decorators'; 3 | import { sharedStyles } from '../../shared-styles'; 4 | import '../popover'; 5 | 6 | /** 7 | * @prop {String} label - If set, defines the text label. 8 | * @prop {String} icon - If set, defines the icon shown close to the label. 9 | * @prop {'left'|'right'|'top'|'bottom'} position - Defines the position of the component in the screen. Possible values are `left`, `right`, `top` and `bottom`. 10 | * @prop {'column'|'row'} flexDirection - Defines the direction in which the slotted content flows (e.g. top to bottom or left to right). Possible values are `column` and `row`. 11 | * @prop {String} target - Defines the DOM element to which the mouseover event will be attached. It behaves identically to querySelector, which means tag names, IDs, classes and similar can be used (e.g. #myEl, .myEl, kor-input[type='number']). Please ensure the selector is unique. 12 | * @prop {Boolean} visible - If set to true, displays the component on top of the screen. 13 | * 14 | * @slot - Displayed inside the content area. 15 | * @slot header - If used, the header slot is shown on top of the component, below the label (if any is set). 16 | * @slot functions - Displayed on the right side of the label or header slot. 17 | * @slot footer - Displayed below the content area. 18 | * 19 | * @cssprop --body-gap - Defines the gap between elements in the body slot. 20 | * @cssprop --header-gap - Defines the gap between elements in the header slot. 21 | * @cssprop --functions-gap - Defines the gap between elements in the functions slot. 22 | * @cssprop --footer-gap - Defines the gap between elements in the footer slot. 23 | */ 24 | 25 | export class korTooltip extends LitElement { 26 | @property({ type: String, reflect: true }) label: string | undefined; 27 | @property({ type: String, reflect: true }) icon: string | undefined; 28 | @property({ type: String, reflect: true, attribute: 'flex-direction' }) 29 | flexDirection: 'column' | 'row' = 'column'; 30 | @property({ type: String, reflect: true }) position: 31 | | 'left' 32 | | 'right' 33 | | 'top' 34 | | 'bottom' = 'bottom'; 35 | @property({ type: String, reflect: true }) target: string | undefined; 36 | @property({ type: Boolean, reflect: true }) visible: boolean | undefined; 37 | 38 | // readonly properties 39 | @state() emptyHeader = true; 40 | @state() emptyFunctions = true; 41 | @state() emptyFooter = true; 42 | 43 | static get styles() { 44 | return [ 45 | sharedStyles, 46 | css` 47 | :host { 48 | position: fixed; 49 | z-index: 4; 50 | /* css properties */ 51 | --body-gap: var(--spacing-m); 52 | --header-gap: var(--spacing-m); 53 | --functions-gap: var(--spacing-m); 54 | --footer-gap: var(--spacing-m); 55 | } 56 | kor-popover { 57 | --body-gap: inherit; 58 | --header-gap: inherit; 59 | --functions-gap: inherit; 60 | --footer-gap: inherit; 61 | } 62 | `, 63 | ]; 64 | } 65 | 66 | render() { 67 | return html` 68 | 76 | 82 | 88 | 89 | 95 | 96 | `; 97 | } 98 | 99 | attributeChangedCallback(name: string, oldval: string, newval: string) { 100 | super.attributeChangedCallback(name, oldval, newval); 101 | this.dispatchEvent(new Event(`${name}-changed`)); 102 | // add listener on target changed 103 | if (name === 'target' && this.target) { 104 | this.targetObserver(); 105 | } 106 | } 107 | 108 | targetObserver() { 109 | let timeout: any; 110 | const tar = 111 | typeof this.target === 'string' 112 | ? document.querySelector(this.target) 113 | : this.target; 114 | if (tar) { 115 | // show on mouse over 116 | tar.addEventListener('mouseover', () => { 117 | timeout = setTimeout(() => (this.visible = true), 500); 118 | }); 119 | // hide on mouse out 120 | tar.addEventListener('mouseout', () => { 121 | this.visible = false; 122 | clearTimeout(timeout); 123 | }); 124 | } 125 | } 126 | } 127 | 128 | if (!window.customElements.get('kor-tooltip')) { 129 | window.customElements.define('kor-tooltip', korTooltip); 130 | } 131 | -------------------------------------------------------------------------------- /fonts/md-icons.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kor-ui/kor/888a8afc845fd26fa6c508a2d52552432f43ba11/fonts/md-icons.ttf -------------------------------------------------------------------------------- /fonts/open-sans-bold.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kor-ui/kor/888a8afc845fd26fa6c508a2d52552432f43ba11/fonts/open-sans-bold.woff -------------------------------------------------------------------------------- /fonts/open-sans-bold.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kor-ui/kor/888a8afc845fd26fa6c508a2d52552432f43ba11/fonts/open-sans-bold.woff2 -------------------------------------------------------------------------------- /fonts/open-sans-regular.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kor-ui/kor/888a8afc845fd26fa6c508a2d52552432f43ba11/fonts/open-sans-regular.woff -------------------------------------------------------------------------------- /fonts/open-sans-regular.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kor-ui/kor/888a8afc845fd26fa6c508a2d52552432f43ba11/fonts/open-sans-regular.woff2 -------------------------------------------------------------------------------- /fonts/open-sans-semibold.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kor-ui/kor/888a8afc845fd26fa6c508a2d52552432f43ba11/fonts/open-sans-semibold.woff -------------------------------------------------------------------------------- /fonts/open-sans-semibold.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kor-ui/kor/888a8afc845fd26fa6c508a2d52552432f43ba11/fonts/open-sans-semibold.woff2 -------------------------------------------------------------------------------- /index.d.ts: -------------------------------------------------------------------------------- 1 | export { korAccordion } from './components/accordion/kor-accordion'; 2 | export { korAppBar } from './components/app-bar/kor-app-bar'; 3 | export { korAvatar } from './components/avatar/kor-avatar'; 4 | export { korBadge } from './components/badge/kor-badge'; 5 | export { korBreadcrumbs } from './components/breadcrumbs/kor-breadcrumbs'; 6 | export { korBreadcrumbItem } from './components/breadcrumbs/kor-breadcrumb-item'; 7 | export { korButton } from './components/button/kor-button'; 8 | export { korCard } from './components/card/kor-card'; 9 | export { korCheckbox } from './components/checkbox/kor-checkbox'; 10 | export { korDivider } from './components/divider/kor-divider'; 11 | export { korDrawer } from './components/drawer/kor-drawer'; 12 | export { korEmptyState } from './components/empty-state/kor-empty-state'; 13 | export { korGrid } from './components/grid/kor-grid'; 14 | export { korImage } from './components/image/kor-image'; 15 | export { korIcon } from './components/icon/kor-icon'; 16 | export { korInput } from './components/input/kor-input'; 17 | export { korMenuItem } from './components/menu-item/kor-menu-item'; 18 | export { korModal } from './components/modal/kor-modal'; 19 | export { korNavbar } from './components/nav-bar/kor-nav-bar'; 20 | export { korNotifications } from './components/notifications/kor-notifications'; 21 | export { korNotificationItem } from './components/notifications/kor-notification-item'; 22 | export { korPage } from './components/page/kor-page'; 23 | export { korPane } from './components/pane/kor-pane'; 24 | export { korPopover } from './components/popover/kor-popover'; 25 | export { korProgressBar } from './components/progress-bar/kor-progress-bar'; 26 | export { korRadioButton } from './components/radio-button/kor-radio-button'; 27 | export { korSlider } from './components/slider/kor-slider'; 28 | export { korSpinner } from './components/spinner/kor-spinner'; 29 | export { korStepper } from './components/stepper/kor-stepper'; 30 | export { korStepperItem } from './components/stepper/kor-stepper-item'; 31 | export { korSwipeActions } from './components/swipe-actions/kor-swipe-actions'; 32 | export { korSwipeAction } from './components/swipe-actions/kor-swipe-action'; 33 | export { korSwitch } from './components/switch/kor-switch'; 34 | export { korSwitchItem } from './components/switch/kor-switch-item'; 35 | export { korTabItem } from './components/tabs/kor-tab-item'; 36 | export { korTable } from './components/table/kor-table'; 37 | export { korTableRow } from './components/table/kor-table-row'; 38 | export { korTableCell } from './components/table/kor-table-cell'; 39 | export { korTabs } from './components/tabs/kor-tabs'; 40 | export { korTag } from './components/tag/kor-tag'; 41 | export { korText } from './components/text/kor-text'; 42 | export { korTextarea } from './components/textarea/kor-textarea'; 43 | export { korToggle } from './components/toggle/kor-toggle'; 44 | export { korTool } from './components/tool/kor-tool'; 45 | export { korTooltip } from './components/tooltip/kor-tooltip'; 46 | -------------------------------------------------------------------------------- /index.ts: -------------------------------------------------------------------------------- 1 | export { korAccordion } from './components/accordion/kor-accordion'; 2 | export { korAppBar } from './components/app-bar/kor-app-bar'; 3 | export { korAvatar } from './components/avatar/kor-avatar'; 4 | export { korBadge } from './components/badge/kor-badge'; 5 | export { korBreadcrumbs } from './components/breadcrumbs/kor-breadcrumbs'; 6 | export { korBreadcrumbItem } from './components/breadcrumbs/kor-breadcrumb-item'; 7 | export { korButton } from './components/button/kor-button'; 8 | export { korCard } from './components/card/kor-card'; 9 | export { korCheckbox } from './components/checkbox/kor-checkbox'; 10 | export { korDivider } from './components/divider/kor-divider'; 11 | export { korDrawer } from './components/drawer/kor-drawer'; 12 | export { korEmptyState } from './components/empty-state/kor-empty-state'; 13 | export { korGrid } from './components/grid/kor-grid'; 14 | export { korImage } from './components/image/kor-image'; 15 | export { korIcon } from './components/icon/kor-icon'; 16 | export { korInput } from './components/input/kor-input'; 17 | export { korMenuItem } from './components/menu-item/kor-menu-item'; 18 | export { korModal } from './components/modal/kor-modal'; 19 | export { korNavbar } from './components/nav-bar/kor-nav-bar'; 20 | export { korNotifications } from './components/notifications/kor-notifications'; 21 | export { korNotificationItem } from './components/notifications/kor-notification-item'; 22 | export { korPage } from './components/page/kor-page'; 23 | export { korPane } from './components/pane/kor-pane'; 24 | export { korPopover } from './components/popover/kor-popover'; 25 | export { korProgressBar } from './components/progress-bar/kor-progress-bar'; 26 | export { korRadioButton } from './components/radio-button/kor-radio-button'; 27 | export { korSlider } from './components/slider/kor-slider'; 28 | export { korSpinner } from './components/spinner/kor-spinner'; 29 | export { korStepper } from './components/stepper/kor-stepper'; 30 | export { korStepperItem } from './components/stepper/kor-stepper-item'; 31 | export { korSwipeActions } from './components/swipe-actions/kor-swipe-actions'; 32 | export { korSwipeAction } from './components/swipe-actions/kor-swipe-action'; 33 | export { korSwitch } from './components/switch/kor-switch'; 34 | export { korSwitchItem } from './components/switch/kor-switch-item'; 35 | export { korTabItem } from './components/tabs/kor-tab-item'; 36 | export { korTable } from './components/table/kor-table'; 37 | export { korTableRow } from './components/table/kor-table-row'; 38 | export { korTableCell } from './components/table/kor-table-cell'; 39 | export { korTabs } from './components/tabs/kor-tabs'; 40 | export { korTag } from './components/tag/kor-tag'; 41 | export { korText } from './components/text/kor-text'; 42 | export { korTextarea } from './components/textarea/kor-textarea'; 43 | export { korToggle } from './components/toggle/kor-toggle'; 44 | export { korTool } from './components/tool/kor-tool'; 45 | export { korTooltip } from './components/tooltip/kor-tooltip'; -------------------------------------------------------------------------------- /kor-styles.css: -------------------------------------------------------------------------------- 1 | /* colors */ 2 | html, :host, *[theme="light"] { 3 | --neutral-1: 0, 0, 0; 4 | --neutral-2: 255, 255, 255; 5 | --accent-1: 60, 100, 240; 6 | --accent-1b: 70, 110, 250; 7 | --base-0: 255, 255, 255; 8 | --base-1: 235, 235, 235; 9 | --base-2: 245, 245, 245; 10 | --base-3: 255, 255, 255; 11 | --base-4: 255, 255, 255; 12 | --functional-blue: 20, 120, 220; 13 | --functional-red: 220, 40, 40; 14 | --functional-yellow: 220, 168, 40; 15 | --functional-green: 50, 168, 40; 16 | --text-1: rgba(0, 0, 0, .90); 17 | --text-2: rgba(0, 0, 0, .60); 18 | --text-3: rgba(0, 0, 0, .20); 19 | --shadow-1: 0 2px 8px rgba(0,0,0,.1), 0 1px 4px rgba(0,0,0,.05); 20 | } 21 | *[theme="dark"] { 22 | --neutral-1: 255, 255, 255; 23 | --neutral-2: 0, 0, 0; 24 | --accent-1: 60, 100, 240; 25 | --accent-1b: 70, 110, 250; 26 | --base-0: 0, 0, 2; 27 | --base-1: 15, 15, 15; 28 | --base-2: 25, 25, 25; 29 | --base-3: 35, 35, 35; 30 | --base-4: 45, 45, 45; 31 | --functional-blue: 20, 120, 220; 32 | --functional-red: 220, 40, 40; 33 | --functional-yellow: 220, 160, 40; 34 | --functional-green: 40, 160, 40; 35 | --text-1: rgba(255, 255, 255, .90); 36 | --text-2: rgba(255, 255, 255, .60); 37 | --text-3: rgba(255, 255, 255, .20); 38 | --shadow-1: 0 2px 8px rgba(0,0,0,.2), 0 1px 4px rgba(0,0,0,.15); 39 | } 40 | /* typography */ 41 | @font-face { 42 | font-family: 'md-icons'; 43 | src: local('Material Icons'), local('MaterialIcons-Regular'), url('./fonts/md-icons.ttf') format('truetype'); 44 | } 45 | @font-face { 46 | font-family: 'open-sans'; 47 | font-style: normal; 48 | font-weight: 400; 49 | src: local('Open Sans Regular'), local('OpenSans-Regular'), url('./fonts/open-sans-regular.woff2') format('woff2'), url('./fonts/open-sans-regular.woff') format('woff'); 50 | } 51 | @font-face { 52 | font-family: 'open-sans'; 53 | font-style: normal; 54 | font-weight: 600; 55 | src: local('Open Sans SemiBold'), local('OpenSans-SemiBold'), url('./fonts/open-sans-semibold.woff2') format('woff2'), url('./fonts/open-sans-semibold.woff') format('woff'); 56 | } 57 | @font-face { 58 | font-family: 'open-sans'; 59 | font-style: normal; 60 | font-weight: 700; 61 | src: local('Open Sans Bold'), local('OpenSans-Bold'), url('./fonts/open-sans-bold.woff2') format('woff2'), url('./fonts/open-sans-bold.woff') format('woff'); 62 | } 63 | html, body { 64 | --body-1: normal 14px/24px 'open-sans'; 65 | --body-2: normal 12px/16px 'open-sans'; 66 | --header-1: bold 16px/24px 'open-sans'; 67 | --header-2: bold 14px/24px 'open-sans'; 68 | --transition-1: 0.1s all ease-out; 69 | --border-radius: 4px; 70 | --spacing-xs: calc(var(--spacing-s) / 2); 71 | --spacing-s: 8px; 72 | --spacing-m: calc(var(--spacing-s) * 1.5); 73 | --spacing-l: calc(var(--spacing-s) * 2);; 74 | font-family: 'open-sans', sans-serif; 75 | font-style: normal; 76 | font-weight: 400; 77 | font-size: 14px; 78 | line-height: 24px; 79 | color: var(--text-1); 80 | height: 100%; 81 | width: 100%; 82 | margin: 0; 83 | overflow: hidden; 84 | -webkit-tap-highlight-color: transparent; 85 | -webkit-font-smoothing: antialiased; 86 | text-rendering: optimizeLegibility; 87 | -moz-osx-font-smoothing: grayscale; 88 | } 89 | /* scrollbar */ 90 | *::-webkit-scrollbar { 91 | width: 8px; 92 | height: 8px; 93 | background-color: transparent; 94 | visibility: hidden; 95 | } 96 | *::-webkit-scrollbar-track { 97 | background-color: rgba(var(--neutral-1), .05); 98 | border-radius: 8px; 99 | } 100 | *::-webkit-scrollbar-thumb { 101 | background-color: rgba(var(--neutral-1), .10); 102 | border-radius: 8px; 103 | } 104 | *::-webkit-scrollbar-thumb:active, 105 | *::-webkit-scrollbar-thumb:hover { 106 | background-color: rgba(var(--neutral-1), .20) 107 | } 108 | kor-swipe-actions::-webkit-scrollbar { 109 | display: none; 110 | } -------------------------------------------------------------------------------- /lerna-debug.log: -------------------------------------------------------------------------------- 1 | 38 error Error: Command failed: git push --follow-tags --no-verify --atomic origin develop 2 | 38 error error: cannot spawn sh: No such file or directory 3 | 38 error error: cannot spawn c:\Users\edufe\AppData\Local\Programs\Microsoft VS Code\resources\app\extensions\git\dist\askpass.sh: No such file or directory 4 | 38 error error: cannot spawn c:\Users\edufe\AppData\Local\Programs\Microsoft VS Code\resources\app\extensions\git\dist\askpass.sh: No such file or directory 5 | 38 error error: cannot spawn stty: No such file or directory 6 | 38 error error: cannot spawn sh: No such file or directory 7 | 38 error remote: Support for password authentication was removed on August 13, 2021. Please use a personal access token instead. 8 | 38 error remote: Please see https://github.blog/2020-12-15-token-authentication-requirements-for-git-operations/ for more information. 9 | 38 error fatal: Authentication failed for 'https://github.com/kor-ui/kor.git/' 10 | 38 error 11 | 38 error at makeError (C:\Users\edufe\OneDrive\Documentos\repositories\kor\node_modules\execa\index.js:174:9) 12 | 38 error at C:\Users\edufe\OneDrive\Documentos\repositories\kor\node_modules\execa\index.js:278:16 13 | -------------------------------------------------------------------------------- /lerna.json: -------------------------------------------------------------------------------- 1 | { 2 | "packages": [ 3 | "." 4 | ], 5 | "version": "1.11.3" 6 | } 7 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@kor-ui/kor", 3 | "version": "1.11.3", 4 | "description": "Web components library containing lightweight, ready-to-use and framework-agnostic User Interface elements.", 5 | "scripts": { 6 | "start": "webpack-dev-server --config webpack.dev.config.js", 7 | "build": "webpack --config webpack.dev.config.js && npm run analyze", 8 | "analyze": "wca analyze 'components/**/kor-*.ts' --outFile custom-elements.json", 9 | "publish": "npm run build && lerna publish", 10 | "format": "prettier --write --single-quote components/*/kor-*" 11 | }, 12 | "author": "Eduardo Ferreira", 13 | "license": "MIT", 14 | "devDependencies": { 15 | "copy-webpack-plugin": "^5.1.2", 16 | "html-webpack-plugin": "^3.2.0", 17 | "lerna": "^3.22.0", 18 | "terser-webpack-plugin": "^2.3.8", 19 | "ts-loader": "^6.2.2", 20 | "typescript": "^3.9.9", 21 | "webpack": "^4.46.0", 22 | "webpack-cli": "^3.3.12", 23 | "webpack-dev-server": "^3.11.2" 24 | }, 25 | "homepage": "https://kor-ui.com", 26 | "repository": { 27 | "type": "git", 28 | "url": "https://github.com/kor-ui/kor.git" 29 | }, 30 | "keywords": [ 31 | "design system", 32 | "ui", 33 | "ux", 34 | "litElement", 35 | "design", 36 | "webcomponents", 37 | "baukasten" 38 | ], 39 | "gitHead": "b0ae13e43894b4a4afd5b47aca9bd72026fac89a", 40 | "dependencies": { 41 | "lit": "^2.0.0-rc.2" 42 | } 43 | } 44 | -------------------------------------------------------------------------------- /readme.md: -------------------------------------------------------------------------------- 1 | ![](https://kor-ui.com/assets/favicon_light.png) 2 | # kor 3 | 4 | ### Visit [www.kor-ui.com](https://www.kor-ui.com/) for samples, APIs and other design/development documentation 5 | 6 | A design system / UI component library built with LitElement. Based on the web components standards, kor is browser-, framework- and OS-agnostic and can be used to build web, desktop and mobile applications using Angular, Vue, React, plain JS and so on. 7 | 8 | ## Installation 9 | 10 | Install the library through npm: 11 | 12 | ``` 13 | npm install @kor-ui/kor --save 14 | ``` 15 | 16 | --- 17 | 18 | ## Integration of Components 19 | 20 | ### Load the whole bundle 21 | 22 | The most simple and common way of including the components into an application is by loading the core bundle: 23 | 24 | 25 | ```js 26 | // include bundle through module import 27 | import '@kor-ui/kor' 28 | // if using JS, css can also be imported. if using TS, use html stylesheet as shown below 29 | import '@kor-ui/kor/kor-styles.css' 30 | ``` 31 | 32 | *or* 33 | 34 | ```html 35 | 36 | 37 | 38 | ``` 39 | 40 | ### Load single components 41 | 42 | As an alternative, you can also load individual components to reduce loading time. Be aware that components are inter-dependent and should be imported independently: 43 | 44 | ```js 45 | // include individual components and styles through module import 46 | import '@kor-ui/kor/components/button' 47 | import '@kor-ui/kor/components/text' 48 | // if using JS, css can also be imported. if using TS, use html stylesheet as shown below 49 | import '@kor-ui/kor/kor-styles.css' 50 | ``` 51 | 52 | *or* 53 | 54 | ```html 55 | 56 | 57 | 58 | 59 | ``` 60 | 61 | --- 62 | 63 | ## Usage 64 | 65 | Use the kor components as if they were native HTML tags. All components allow one and two-way data binding and the attributes fire an `-changed` event when modified: 66 | 67 | ```html 68 | 69 | 70 | 71 | ``` 72 | -------------------------------------------------------------------------------- /shared-styles.d.ts: -------------------------------------------------------------------------------- 1 | export declare const sharedStyles: import("lit").CSSResultGroup; 2 | -------------------------------------------------------------------------------- /shared-styles.ts: -------------------------------------------------------------------------------- 1 | import { css } from 'lit'; 2 | 3 | export const sharedStyles = css` 4 | /* scrollbar */ 5 | *::-webkit-scrollbar { 6 | width: 8px; 7 | height: 8px; 8 | background-color: transparent; 9 | visibility: hidden; 10 | } 11 | *::-webkit-scrollbar-track { 12 | background-color: rgba(var(--neutral-1), 0.05); 13 | border-radius: 8px; 14 | } 15 | *::-webkit-scrollbar-thumb { 16 | background-color: rgba(var(--neutral-1), 0.1); 17 | border-radius: 8px; 18 | } 19 | *::-webkit-scrollbar-thumb:active, 20 | *::-webkit-scrollbar-thumb:hover { 21 | background-color: rgba(var(--neutral-1), 0.2); 22 | } 23 | `; -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "module": "es6", 4 | "target": "es6", 5 | "sourceMap": true, 6 | "declaration": true, 7 | "experimentalDecorators": true, 8 | "moduleResolution": "node", 9 | "strict": true 10 | }, 11 | "exclude": [ 12 | "node_modules" 13 | ] 14 | } -------------------------------------------------------------------------------- /webpack.dev.config.js: -------------------------------------------------------------------------------- 1 | const path = require('path'); 2 | const dist = path.resolve(__dirname, './'); 3 | const HtmlWebpackPlugin = require('html-webpack-plugin'); 4 | const TerserPlugin = require('terser-webpack-plugin'); 5 | 6 | module.exports = { 7 | entry: { 8 | ".": "./index.ts", 9 | "components/accordion": './components/accordion/index.ts', 10 | "components/app-bar": './components/app-bar/index.ts', 11 | "components/avatar": './components/avatar/index.ts', 12 | "components/badge": './components/badge/index.ts', 13 | "components/breadcrumbs": './components/breadcrumbs/index.ts', 14 | "components/button": './components/button/index.ts', 15 | "components/card": './components/card/index.ts', 16 | "components/checkbox": './components/checkbox/index.ts', 17 | "components/divider": './components/divider/index.ts', 18 | "components/drawer": './components/drawer/index.ts', 19 | "components/empty-state": './components/empty-state/index.ts', 20 | "components/grid": './components/grid/index.ts', 21 | "components/icon": './components/icon/index.ts', 22 | "components/image": './components/image/index.ts', 23 | "components/input": './components/input/index.ts', 24 | "components/menu-item": './components/menu-item/index.ts', 25 | "components/modal": './components/modal/index.ts', 26 | "components/nav-bar": './components/nav-bar/index.ts', 27 | "components/notifications": './components/notifications/index.ts', 28 | "components/page": './components/page/index.ts', 29 | "components/pane": './components/pane/index.ts', 30 | "components/popover": './components/popover/index.ts', 31 | "components/progress-bar": './components/progress-bar/index.ts', 32 | "components/radio-button": './components/radio-button/index.ts', 33 | "components/slider": './components/slider/index.ts', 34 | "components/spinner": './components/spinner/index.ts', 35 | "components/stepper": './components/stepper/index.ts', 36 | "components/switch": './components/switch/index.ts', 37 | "components/table": './components/table/index.ts', 38 | "components/tabs": './components/tabs/index.ts', 39 | "components/tag": './components/tag/index.ts', 40 | "components/text": './components/text/index.ts', 41 | "components/textarea": './components/textarea/index.ts', 42 | "components/toggle": './components/toggle/index.ts', 43 | "components/tool": './components/tool/index.ts', 44 | "components/tooltip": './components/tooltip/index.ts', 45 | }, 46 | mode: "production", 47 | optimization: { 48 | minimize: true, 49 | minimizer: [ 50 | new TerserPlugin({ 51 | test: /\.js$/, 52 | terserOptions: { 53 | keep_classnames: true, 54 | keep_fnames: true, 55 | output: { 56 | comments: false, 57 | }, 58 | }, 59 | extractComments: false 60 | }), 61 | ], 62 | }, 63 | output: { 64 | filename: "[name]/index.js", 65 | path: dist 66 | }, 67 | module: { 68 | rules: [ 69 | { 70 | test: /\.ts$/, 71 | loader: 'ts-loader', 72 | exclude: /node_modules/ 73 | }, 74 | ] 75 | }, 76 | resolve: { 77 | extensions: [".tsx", ".ts", ".js"] 78 | }, 79 | devServer: { 80 | contentBase: dist, 81 | compress: false, 82 | port: 8082, 83 | host: '0.0.0.0' 84 | }, 85 | plugins: [ 86 | new HtmlWebpackPlugin({ 87 | template: "index.html", 88 | inject: false 89 | }), 90 | ] 91 | }; 92 | --------------------------------------------------------------------------------