Secondary Button
21 |
22 | );
23 | }
24 | ```
--------------------------------------------------------------------------------
/packages/react-library/lib/components/stencil-generated/react-component-lib/case.ts:
--------------------------------------------------------------------------------
1 | export const dashToPascalCase = (str: string) =>
2 | str
3 | .toLowerCase()
4 | .split('-')
5 | .map((segment) => segment.charAt(0).toUpperCase() + segment.slice(1))
6 | .join('');
7 | export const camelToDashCase = (str: string) => str.replace(/([A-Z])/g, (m: string) => `-${m[0].toLowerCase()}`);
8 |
--------------------------------------------------------------------------------
/packages/react-library/lib/components/stencil-generated/react-component-lib/dev.ts:
--------------------------------------------------------------------------------
1 | export const isDevMode = () => {
2 | return process && process.env && process.env.NODE_ENV === 'development';
3 | };
4 |
5 | const warnings: { [key: string]: boolean } = {};
6 |
7 | export const deprecationWarning = (key: string, message: string) => {
8 | if (isDevMode()) {
9 | if (!warnings[key]) {
10 | console.warn(message);
11 | warnings[key] = true;
12 | }
13 | }
14 | };
15 |
--------------------------------------------------------------------------------
/packages/react-library/lib/components/stencil-generated/react-component-lib/index.ts:
--------------------------------------------------------------------------------
1 | export { createReactComponent } from './createComponent';
2 | export { createOverlayComponent } from './createOverlayComponent';
3 |
--------------------------------------------------------------------------------
/packages/react-library/lib/components/stencil-generated/react-component-lib/index.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | import type { StyleReactProps } from '../interfaces';
4 |
5 | export type StencilReactExternalPropsSomething
10 |Something
17 |Test
Test
unchecked
",
35 | " checked
",
36 | "unchecked
",
55 | " Something",
56 | "unchecked
",
65 | " Something
", 66 | "
45 | 
46 | {user.firstName} {user.lastName}
47 |
48 | );
49 | }
50 |
51 | private getUserDetails(userId){
52 | return // Some logic that returns a user object...
53 | }
54 |
55 | render(){
56 | return(
57 |
46 | {user.firstName} {user.lastName}
47 |
48 |
61 |
66 |
73 |
74 |
75 | `);
76 | }
77 |
78 | type Story = StoryObj;
79 |
80 | export const Collapsible: Story = Template.bind({});
81 | Collapsible.args = {
82 | expanded: false,
83 | transitionDuration: 150,
84 | };
--------------------------------------------------------------------------------
/packages/stencil-library/src/components/dnn-collapsible/dnn-collapsible.tsx:
--------------------------------------------------------------------------------
1 | import { Component, Host, h, Prop, Element, Event, EventEmitter, Watch, Listen, Method } from '@stencil/core';
2 |
3 | @Component({
4 | tag: "dnn-collapsible",
5 | styleUrl: "dnn-collapsible.scss",
6 | shadow: true
7 | })
8 | export class DnnCollapsible {
9 |
10 | @Element() el!: HTMLDnnCollapsibleElement;
11 |
12 | /** Defines if the panel is expanded or not. */
13 | @Prop({reflect: true}) expanded: boolean = false;
14 |
15 | /** Defines the transition time in ms, defaults to 150ms */
16 | @Prop() transitionDuration?: number = 150;
17 |
18 | /** Fires whenever the collapsible height has changed */
19 | @Event({bubbles: true, composed: true}) dnnCollapsibleHeightChanged!: EventEmitter
62 |
65 |
67 |
72 | Details
68 |69 | Spicy jalapeno bacon ipsum dolor amet bresaola kielbasa doner ham hock biltong, swine shoulder leberkas cupim. Sausage capicola buffalo, tongue jerky frankfurter biltong pork swine landjaeger. Porchetta alcatra burgdoggen beef ribs short ribs corned beef, biltong flank bresaola kielbasa. Ham hock beef kielbasa, cupim cow beef ribs doner. T-bone cow shoulder chuck pastrami. Alcatra pig filet mignon shank. Pancetta shankle meatloaf sausage meatball cupim. 70 |
71 |
3 |
16 |
21 |
28 |
29 | ```
--------------------------------------------------------------------------------
/packages/stencil-library/src/components/dnn-collapsible/usage/JSX-TSX.md:
--------------------------------------------------------------------------------
1 | ```tsx
2 |
17 |
20 |
22 |
27 | Details
23 |24 | Spicy jalapeno bacon ipsum dolor amet bresaola kielbasa doner ham hock biltong, swine shoulder leberkas cupim. Sausage capicola buffalo, tongue jerky frankfurter biltong pork swine landjaeger. Porchetta alcatra burgdoggen beef ribs short ribs corned beef, biltong flank bresaola kielbasa. Ham hock beef kielbasa, cupim cow beef ribs doner. T-bone cow shoulder chuck pastrami. Alcatra pig filet mignon shank. Pancetta shankle meatloaf sausage meatball cupim. 25 |
26 |
3 |
16 |
21 |
28 |
29 | ```
--------------------------------------------------------------------------------
/packages/stencil-library/src/components/dnn-color-input/dnn-color-info.ts:
--------------------------------------------------------------------------------
1 | export interface DnnColorInfo {
2 | color: string,
3 | contrastColor: string,
4 | lightColor: string,
5 | darkColor: string
6 | };
--------------------------------------------------------------------------------
/packages/stencil-library/src/components/dnn-color-input/dnn-color-input.scss:
--------------------------------------------------------------------------------
1 | :host {
2 | display: inline-block;
3 |
4 | /** @prop --foreground-color: Defines the foreground color. */
5 | --foreground-color: var(--dnn-color-foreground, #000);
6 |
7 | /** @prop --background-color: Defines the background color. */
8 | --background-color: var(--dnn-color-background, #fff);
9 |
10 | /** @prop --focus-color: Defines the color when the component is focused. */
11 | --focus-color: var(--dnn-color-primary, #3792ED);
12 |
13 | /** @prop --control-radius: Defines the radius for the control corners. */
14 | --control-radius: var(--dnn-controls-radius, 3px);
15 |
16 | /** @prop --contast-text-align: Allows customizing the text alignment of the contast indicator text. */
17 | --contast-text-align: left;
18 | }
19 | dnn-fieldset{
20 | width: 100%;
21 | }
22 |
23 | .inner-container{
24 | display: flex;
25 | justify-content: space-between;
26 | position: relative;
27 | width: 100%;
28 | background-color: var(--background-color);
29 | }
30 |
31 | button{
32 | margin: 0 0 0 1em;
33 | padding: 0;
34 | border: none;
35 | background-color: transparent;
36 | width: 1em;
37 | height: 1em;
38 | svg{
39 | fill: var(--dnn-color-primary);
40 | transform: scale(1.5);
41 | }
42 | }
43 |
44 | .color-preview{
45 | min-height: 1em;
46 | min-width: 10em;
47 | display: flex;
48 | width: 100%;
49 | position: relative;
50 | >div{
51 | flex: 1;
52 | }
53 | .contrast{
54 | position: absolute;
55 | top: 0;
56 | left: 0;
57 | width: 100%;
58 | height: 100%;
59 | display: flex;
60 | justify-content: space-around;
61 | align-items: center;
62 | hr {
63 | min-width: 1em;
64 | border-width: 0.1em 0 0.1em 0;
65 | border-style: solid;
66 | }
67 | }
68 | }
69 |
70 | h3{
71 | text-align: center;
72 | }
73 |
74 | .modal-content{
75 | margin: 0.5em;
76 | }
77 |
78 | .controls{
79 | display: flex;
80 | justify-content: space-between;
81 | margin-top: 1em;
82 | }
83 |
84 | dnn-fieldset{
85 | --fieldset-foreground-color: var(--foreground-color);
86 | --fieldset-background-color: var(--background-color);
87 | --fieldset-focus-color: var(--focus-color);
88 | --fieldset-danger-color: var(--danger-color);
89 | --fieldset-control-radius: var(--control-radius);
90 | }
--------------------------------------------------------------------------------
/packages/stencil-library/src/components/dnn-color-picker/dnn-color-picker.stories.ts:
--------------------------------------------------------------------------------
1 | import type { Meta, StoryObj } from '@storybook/web-components';
2 | import { html } from 'lit';
3 | import { ifDefined } from 'lit-html/directives/if-defined.js';
4 | import { actions } from '@storybook/addon-actions';
5 | import readme from "./readme.md?raw";
6 |
7 |
8 | const meta: Meta = {
9 | title: 'Elements/Color Picker',
10 | component: 'dnn-color-picker',
11 | tags: ['autodocs'],
12 | parameters: {
13 | docs: {
14 | description: {
15 | component: readme,
16 | }
17 | }
18 | },
19 | argTypes: {
20 | color: {
21 | control: 'text',
22 | },
23 | colorBoxHeight: {
24 | control: 'text',
25 | },
26 | },
27 | }
28 |
29 | export default meta;
30 |
31 | const eventsFromNames = actions('colorChanged',)
32 |
33 | const Template = (args) =>
34 | html`
35 |
17 |
20 |
22 |
27 | Details
23 |24 | Spicy jalapeno bacon ipsum dolor amet bresaola kielbasa doner ham hock biltong, swine shoulder leberkas cupim. Sausage capicola buffalo, tongue jerky frankfurter biltong pork swine landjaeger. Porchetta alcatra burgdoggen beef ribs short ribs corned beef, biltong flank bresaola kielbasa. Ham hock beef kielbasa, cupim cow beef ribs doner. T-bone cow shoulder chuck pastrami. Alcatra pig filet mignon shank. Pancetta shankle meatloaf sausage meatball cupim. 25 |
26 |Welcome to the DNN Modal
59 |This is a modal component that can be used to display content to the user.
` 60 | }; -------------------------------------------------------------------------------- /packages/stencil-library/src/components/dnn-monaco-editor/dnn-monaco-editor.scss: -------------------------------------------------------------------------------- 1 | :host { 2 | /** 3 | * @prop --monaco-editor-width: width of the editor, default is 100% 4 | * @prop --monaco-editor-height: height of the editor, default is 50vh 5 | */ 6 | --monaco-editor-width: 100%; 7 | --monaco-editor-height: 50vh; 8 | } 9 | 10 | .editor-container { 11 | width: var(--monaco-editor-width); 12 | height: var(--monaco-editor-height); 13 | } -------------------------------------------------------------------------------- /packages/stencil-library/src/components/dnn-monaco-editor/dnn-monaco-editor.stories.ts: -------------------------------------------------------------------------------- 1 | import { html } from "lit"; 2 | import { actions } from '@storybook/addon-actions'; 3 | //import { ifDefined } from 'lit-html/directives/if-defined'; 4 | //import { unsafeHTML } from 'lit-html/directives/unsafe-html.js'; 5 | import type { Meta, StoryObj } from '@storybook/web-components'; 6 | import readme from './readme.md'; 7 | 8 | const meta: Meta = { 9 | title: 'Elements/Monaco Editor', 10 | component: 'dnn-monaco-editor', 11 | tags: ['autodocs'], 12 | parameters: { 13 | docs: { 14 | description: { 15 | component: readme, 16 | } 17 | } 18 | }, 19 | argTypes: { 20 | language: { 21 | options: [ 22 | "bat", 23 | "c", 24 | "coffeescript", 25 | "cpp", 26 | "csharp", 27 | "css", 28 | "dockerfile", 29 | "fsharp", 30 | "go", 31 | "handlebars", 32 | "html", 33 | "ini", 34 | "java", 35 | "javascript", 36 | "json", 37 | "less", 38 | "lua", 39 | "markdown", 40 | "msdax", 41 | "objective-c", 42 | "php", 43 | "plaintext", 44 | "postiats", 45 | "powershell", 46 | "pug", 47 | "python", 48 | "r", 49 | "razor", 50 | "ruby", 51 | "sb", 52 | "scss", 53 | "sol", 54 | "sql", 55 | "swift", 56 | "typescript", 57 | "vb", 58 | "xml", 59 | "yaml", 60 | ], 61 | control: { 62 | type: "select", 63 | }, 64 | }, 65 | value: { 66 | control: "text", 67 | }, 68 | }, 69 | }; 70 | 71 | export default meta; 72 | 73 | const eventsFromNames = actions("onContentChanged"); 74 | 75 | const Template = (args) => 76 | html` 77 |Hello World
\n\n
\n',
88 | };
89 |
90 | export const Typescript = Template.bind({});
91 | Typescript.args = {
92 | language: "typescript",
93 | value:
94 | `/** Defines basic info about a person. */
95 | interface Person {
96 |
97 | /** The person's first name. */
98 | firstName: string;
99 |
100 | /** The person's last name. */
101 | lastName: string;
102 | }
103 |
104 | /** Greets a person. */
105 | const greeter = (person: Person) =>
106 | {
107 | return "Hello, " + person.firstName + " " + person.lastName;
108 | }
109 |
110 | export default greeter;
111 | `
112 | };
--------------------------------------------------------------------------------
/packages/stencil-library/src/components/dnn-monaco-editor/usage/HTML.md:
--------------------------------------------------------------------------------
1 | ```html
2 | Some text
\nHello World
\n\n
\n',
44 | };
45 |
46 | export const Basic = Template.bind({});
47 | Basic.args = {
48 | ...Default.args,
49 | options: {
50 | buttons: "bold,italic,underline,strikethrough,eraser,ul,ol,paragraph,superscript,subscript,spellcheck,cut,copy,paste,selectall,copyformat,hr,link",
51 | },
52 | };
53 |
54 | export const Minimal = Template.bind({});
55 | Minimal.args = {
56 | ...Default.args,
57 | options: {
58 | buttons: "bold,italic,underline,",
59 | },
60 | };
--------------------------------------------------------------------------------
/packages/stencil-library/src/components/dnn-searchbox/dnn-searchbox.scss:
--------------------------------------------------------------------------------
1 | :host {
2 | position: relative;
3 | display: flex;
4 | justify-content: space-between;
5 | --background-color: transparent;
6 | --color: #333;
7 | --border-size: 1px;
8 | --border-color: grey;
9 | --border-active-color: black;
10 | --border-radius: var(--dnn-controls-radius, 5px);
11 | --padding: var(--dnn-controls-padding, 5px);
12 | --focus-color: var(--dnn-color-primary, blue);
13 | input {
14 | width:100%;
15 | border: var(--border-size) solid var(--border-color);
16 | outline: none;
17 | border-radius: var(--border-radius);
18 | padding: var(--padding);
19 | padding-right: 32px;
20 | transition: all 300ms ease-in-out;
21 | &:focus-visible, &:hover{
22 | outline: none;
23 | box-shadow: 0 0 2px 2px var(--focus-color);
24 | }
25 | }
26 | svg{
27 | position: absolute;
28 | top:0;
29 | right:0;
30 | height: 100%;
31 | transform: scale(0.7);
32 | fill: var(--color);
33 | outline: var(--color);
34 | color: var(--color);
35 | transition: all 300ms ease-in-out;
36 | }
37 | button{
38 | background: transparent;
39 | border: 0;
40 | margin: 0;
41 | padding: 0;
42 | &:focus-visible, &:hover{
43 | svg{
44 | fill: var(--focus-color);
45 | outline: var(--focus-color);
46 | color: var(--focus-color);
47 | }
48 | }
49 | }
50 | }
51 |
--------------------------------------------------------------------------------
/packages/stencil-library/src/components/dnn-searchbox/dnn-searchbox.stories.ts:
--------------------------------------------------------------------------------
1 | import type { Meta, StoryObj } from '@storybook/web-components';
2 | import { html } from 'lit';
3 | import { actions } from '@storybook/addon-actions';
4 | import readme from "./readme.md?raw";
5 |
6 | const meta: Meta = {
7 | title: "Elements/Searchbox",
8 | component: "dnn-searchbox",
9 | tags: ['autodocs'],
10 | parameters: {
11 | docs: {
12 | description: {
13 | component: readme,
14 | }
15 | }
16 | }
17 | }
18 | export default meta;
19 |
20 | const eventsFromNames = actions('queryChanged',);
21 |
22 | const Template = (args : {
23 | debounced: boolean,
24 | placeholder: string,
25 | query: string,
26 | }) =>
27 | html`
28 | Some text
\nContent of the first tab.
20 |This is the second tab
23 |Content of the first tab.
34 |This is the second tab
37 |Content of the first tab.
5 |This is the second tab
8 |Content of the first tab.
5 |This is the second tab
8 |
53 | {this.tabTitles.map(tabTitle =>
54 |
60 | )}
61 |
62 |
63 |
65 | Content of the first tab.
16 |This is the second tab
19 |Content of the first tab.
30 |This is the second tab
33 |Content of the first tab.
5 |This is the second tab
8 |Content of the first tab.
5 |This is the second tab
8 |