diff --git a/README.md b/README.md
index 2f0d1b91..322062bc 100644
--- a/README.md
+++ b/README.md
@@ -5,3 +5,15 @@
```bash
yarn add @elonsoft/elonkit angular2-text-mask text-mask-addons
```
+
+```scss
+@import '@elonsoft/elonkit/theme';
+@include elonkit-theme($theme);
+```
+
+### Override Angular Material styles
+
+```scss
+@import '@elonsoft/elonkit/overrides';
+@include elonkit-overrides($theme);
+```
diff --git a/package.json b/package.json
index b95bdefc..f8cb11e8 100644
--- a/package.json
+++ b/package.json
@@ -2,7 +2,7 @@
"name": "elonsoft",
"version": "0.0.1",
"scripts": {
- "build": "ng build --prod && scss-bundle && cp README.md dist/elonkit",
+ "build": "ng build --prod && scss-bundle --config scss-bundle.config.theme.json && scss-bundle --config scss-bundle.config.overrides.json && cp README.md dist/elonkit",
"test": "ng test",
"test:watch": "ng test --watch",
"lint:tslint": "tslint -c tslint.json --project tsconfig.json 'projects/**/*.ts'",
@@ -73,7 +73,7 @@
"react-is": "~16.13.1",
"sass": "^1.26.8",
"sass-loader": "^8.0.2",
- "scss-bundle": "~3.0.2",
+ "scss-bundle": "~3.1.2",
"stylelint": "~13.6.0",
"stylelint-config-sass-guidelines": "~7.0.0",
"stylelint-order": "~4.1.0",
diff --git a/projects/elonkit/src/overrides.scss b/projects/elonkit/src/overrides.scss
new file mode 100644
index 00000000..80ea8fdc
--- /dev/null
+++ b/projects/elonkit/src/overrides.scss
@@ -0,0 +1,7 @@
+@import './overrides/button/button';
+@import './overrides/form-field/form-field';
+
+@mixin elonkit-overrides($theme) {
+ @include es-button-overrides($theme);
+ @include es-form-field-overrides($theme);
+}
diff --git a/projects/elonkit/src/overrides/button/__stories__/button-story-basic/button-story-basic.component.html b/projects/elonkit/src/overrides/button/__stories__/button-story-basic/button-story-basic.component.html
new file mode 100644
index 00000000..e6cfbb60
--- /dev/null
+++ b/projects/elonkit/src/overrides/button/__stories__/button-story-basic/button-story-basic.component.html
@@ -0,0 +1 @@
+
diff --git a/projects/elonkit/src/overrides/button/__stories__/button-story-basic/button-story-basic.component.ts b/projects/elonkit/src/overrides/button/__stories__/button-story-basic/button-story-basic.component.ts
new file mode 100644
index 00000000..df42bbd2
--- /dev/null
+++ b/projects/elonkit/src/overrides/button/__stories__/button-story-basic/button-story-basic.component.ts
@@ -0,0 +1,9 @@
+import { Component, ChangeDetectionStrategy, ViewEncapsulation } from '@angular/core';
+
+@Component({
+ selector: 'es-button-story-basic',
+ templateUrl: './button-story-basic.component.html',
+ changeDetection: ChangeDetectionStrategy.OnPush,
+ encapsulation: ViewEncapsulation.None
+})
+export class ButtonStoryBasicComponent {}
diff --git a/projects/elonkit/src/overrides/button/__stories__/button-story-basic/button-story-basic.module.ts b/projects/elonkit/src/overrides/button/__stories__/button-story-basic/button-story-basic.module.ts
new file mode 100644
index 00000000..bfe8d8e4
--- /dev/null
+++ b/projects/elonkit/src/overrides/button/__stories__/button-story-basic/button-story-basic.module.ts
@@ -0,0 +1,12 @@
+import { NgModule } from '@angular/core';
+
+import { MatButtonModule } from '@angular/material/button';
+
+import { ButtonStoryBasicComponent } from './button-story-basic.component';
+
+@NgModule({
+ declarations: [ButtonStoryBasicComponent],
+ imports: [MatButtonModule],
+ exports: [ButtonStoryBasicComponent]
+})
+export class ButtonStoryBasicModule {}
diff --git a/projects/elonkit/src/overrides/button/__stories__/button-story-basic/index.ts b/projects/elonkit/src/overrides/button/__stories__/button-story-basic/index.ts
new file mode 100644
index 00000000..41c9f5bf
--- /dev/null
+++ b/projects/elonkit/src/overrides/button/__stories__/button-story-basic/index.ts
@@ -0,0 +1,2 @@
+export { ButtonStoryBasicComponent } from './button-story-basic.component';
+export { ButtonStoryBasicModule } from './button-story-basic.module';
diff --git a/projects/elonkit/src/overrides/button/__stories__/button.stories.mdx b/projects/elonkit/src/overrides/button/__stories__/button.stories.mdx
new file mode 100644
index 00000000..c5d63b35
--- /dev/null
+++ b/projects/elonkit/src/overrides/button/__stories__/button.stories.mdx
@@ -0,0 +1,25 @@
+import { Meta, Story, Props } from '@storybook/addon-docs/blocks';
+import { Preview } from '~storybook/components';
+
+import { withA11y } from '@storybook/addon-a11y';
+import { action } from '@storybook/addon-actions';
+import { withKnobs, boolean } from '@storybook/addon-knobs';
+
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+
+import { ButtonStoryBasicModule, ButtonStoryBasicComponent } from './button-story-basic';
+
+
+
+# Button
+
+
+
+ {{
+ component: ButtonStoryBasicComponent,
+ moduleMetadata: {
+ imports: [BrowserAnimationsModule, ButtonStoryBasicModule]
+ }
+ }}
+
+
diff --git a/projects/elonkit/src/overrides/button/button.scss b/projects/elonkit/src/overrides/button/button.scss
new file mode 100644
index 00000000..fc2072f6
--- /dev/null
+++ b/projects/elonkit/src/overrides/button/button.scss
@@ -0,0 +1,5 @@
+@mixin es-button-overrides($theme) {
+ .mat-button-base {
+ text-transform: uppercase;
+ }
+}
diff --git a/projects/elonkit/src/overrides/form-field/__stories__/form-field-story-basic/form-field-story-basic.component.html b/projects/elonkit/src/overrides/form-field/__stories__/form-field-story-basic/form-field-story-basic.component.html
new file mode 100644
index 00000000..44c0285d
--- /dev/null
+++ b/projects/elonkit/src/overrides/form-field/__stories__/form-field-story-basic/form-field-story-basic.component.html
@@ -0,0 +1,13 @@
+
+
+ Input 1
+
+ This is hint 1
+
+
+
+ Input 2
+
+ This is hint 2
+
+
diff --git a/projects/elonkit/src/overrides/form-field/__stories__/form-field-story-basic/form-field-story-basic.component.ts b/projects/elonkit/src/overrides/form-field/__stories__/form-field-story-basic/form-field-story-basic.component.ts
new file mode 100644
index 00000000..fb302125
--- /dev/null
+++ b/projects/elonkit/src/overrides/form-field/__stories__/form-field-story-basic/form-field-story-basic.component.ts
@@ -0,0 +1,9 @@
+import { Component, ChangeDetectionStrategy, ViewEncapsulation } from '@angular/core';
+
+@Component({
+ selector: 'es-form-field-story-basic',
+ templateUrl: './form-field-story-basic.component.html',
+ changeDetection: ChangeDetectionStrategy.OnPush,
+ encapsulation: ViewEncapsulation.None
+})
+export class FormFieldStoryBasicComponent {}
diff --git a/projects/elonkit/src/overrides/form-field/__stories__/form-field-story-basic/form-field-story-basic.module.ts b/projects/elonkit/src/overrides/form-field/__stories__/form-field-story-basic/form-field-story-basic.module.ts
new file mode 100644
index 00000000..9adef553
--- /dev/null
+++ b/projects/elonkit/src/overrides/form-field/__stories__/form-field-story-basic/form-field-story-basic.module.ts
@@ -0,0 +1,14 @@
+import { NgModule } from '@angular/core';
+
+import { MatButtonModule } from '@angular/material/button';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatInputModule } from '@angular/material/input';
+
+import { FormFieldStoryBasicComponent } from './form-field-story-basic.component';
+
+@NgModule({
+ declarations: [FormFieldStoryBasicComponent],
+ imports: [MatButtonModule, MatFormFieldModule, MatInputModule],
+ exports: [FormFieldStoryBasicComponent]
+})
+export class FormFieldStoryBasicModule {}
diff --git a/projects/elonkit/src/overrides/form-field/__stories__/form-field-story-basic/index.ts b/projects/elonkit/src/overrides/form-field/__stories__/form-field-story-basic/index.ts
new file mode 100644
index 00000000..1a76b215
--- /dev/null
+++ b/projects/elonkit/src/overrides/form-field/__stories__/form-field-story-basic/index.ts
@@ -0,0 +1,2 @@
+export { FormFieldStoryBasicComponent } from './form-field-story-basic.component';
+export { FormFieldStoryBasicModule } from './form-field-story-basic.module';
diff --git a/projects/elonkit/src/overrides/form-field/__stories__/form-field.stories.mdx b/projects/elonkit/src/overrides/form-field/__stories__/form-field.stories.mdx
new file mode 100644
index 00000000..2e091e67
--- /dev/null
+++ b/projects/elonkit/src/overrides/form-field/__stories__/form-field.stories.mdx
@@ -0,0 +1,25 @@
+import { Meta, Story, Props } from '@storybook/addon-docs/blocks';
+import { Preview } from '~storybook/components';
+
+import { withA11y } from '@storybook/addon-a11y';
+import { action } from '@storybook/addon-actions';
+import { withKnobs, boolean } from '@storybook/addon-knobs';
+
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+
+import { FormFieldStoryBasicModule, FormFieldStoryBasicComponent } from './form-field-story-basic';
+
+
+
+# Form Field
+
+
+
+ {{
+ component: FormFieldStoryBasicComponent,
+ moduleMetadata: {
+ imports: [BrowserAnimationsModule, FormFieldStoryBasicModule]
+ }
+ }}
+
+
diff --git a/projects/elonkit/src/overrides/form-field/form-field.scss b/projects/elonkit/src/overrides/form-field/form-field.scss
new file mode 100644
index 00000000..5c3a2770
--- /dev/null
+++ b/projects/elonkit/src/overrides/form-field/form-field.scss
@@ -0,0 +1,9 @@
+@mixin es-form-field-overrides($theme) {
+ .mat-form-field-appearance-outline {
+ width: 100%;
+
+ .mat-form-field-subscript-wrapper {
+ position: static;
+ }
+ }
+}
diff --git a/projects/elonkit/storybook/preview-theme.scss b/projects/elonkit/storybook/preview-theme.scss
index 36e465bf..08c2f485 100644
--- a/projects/elonkit/storybook/preview-theme.scss
+++ b/projects/elonkit/storybook/preview-theme.scss
@@ -11,3 +11,7 @@ $theme: mat-light-theme($primary, $accent);
// In production it's "@elonsoft/elonkit/theme"
@import '../src/theme';
@include elonkit-theme($theme);
+
+// In production it's "@elonsoft/elonkit/overrides"
+@import '../src/overrides';
+@include elonkit-overrides($theme);
diff --git a/projects/elonkit/storybook/preview.js b/projects/elonkit/storybook/preview.js
index f47f3be4..9854c417 100644
--- a/projects/elonkit/storybook/preview.js
+++ b/projects/elonkit/storybook/preview.js
@@ -9,6 +9,15 @@ import theme from './theme';
addParameters({
options: {
- theme
+ theme,
+ storySort: (a, b) => {
+ if (a[1].kind.split('/')[0] !== b[1].kind.split('/')[0]) {
+ return a[1].kind.startsWith('UI') ? -1 : 1;
+ }
+
+ return a[1].kind === b[1].kind
+ ? 0
+ : a[1].id.localeCompare(b[1].id, undefined, { numeric: true });
+ }
}
});
diff --git a/scss-bundle.config.overrides.json b/scss-bundle.config.overrides.json
new file mode 100644
index 00000000..a707fd48
--- /dev/null
+++ b/scss-bundle.config.overrides.json
@@ -0,0 +1,8 @@
+{
+ "bundlerOptions": {
+ "entryFile": "./projects/elonkit/src/overrides.scss",
+ "rootDir": "./projects/src",
+ "outFile": "./dist/elonkit/overrides.scss",
+ "logLevel": "error"
+ }
+}
diff --git a/scss-bundle.config.json b/scss-bundle.config.theme.json
similarity index 100%
rename from scss-bundle.config.json
rename to scss-bundle.config.theme.json
diff --git a/yarn.lock b/yarn.lock
index bf014fef..d5f32186 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3174,7 +3174,7 @@
resolved "https://registry.yarnpkg.com/@types/events/-/events-3.0.0.tgz#2862f3f58a9a7f7c3e78d79f130dd4d71c25c2a7"
integrity sha512-EaObqwIvayI5a8dCzhFrjKzVwKLxjoG9T6Ppd5CEo07LRKfQ8Yokw54r5+Wq7FaBQ+yXRvQAYPrHwya1/UFt9g==
-"@types/fs-extra@^8.0.0":
+"@types/fs-extra@^8.0.1":
version "8.1.1"
resolved "https://registry.yarnpkg.com/@types/fs-extra/-/fs-extra-8.1.1.tgz#1e49f22d09aa46e19b51c0b013cb63d0d923a068"
integrity sha512-TcUlBem321DFQzBNuz8p0CLLKp0VvF/XH9E4KHNmgwyp4E3AfgI5cjiIVZWlbfThBop2qxFIh4+LeY6hVWWZ2w==
@@ -5482,7 +5482,7 @@ chokidar@^2.0.2, chokidar@^2.0.4, chokidar@^2.1.8:
optionalDependencies:
fsevents "^1.2.7"
-chokidar@^3.0.2:
+chokidar@^3.3.1:
version "3.4.0"
resolved "https://registry.yarnpkg.com/chokidar/-/chokidar-3.4.0.tgz#b30611423ce376357c765b9b8f904b9fba3c0be8"
integrity sha512-aXAaho2VJtisB/1fg1+3nlLJqGOuewTzQpd/Tz0yTg2R0e4IGtshYvtjowyEumcBv2z+y4+kc75Mz7j5xJskcQ==
@@ -5813,7 +5813,7 @@ commander@^2.11.0, commander@^2.12.1, commander@^2.20.0, commander@^2.9.0, comma
resolved "https://registry.yarnpkg.com/commander/-/commander-2.20.3.tgz#fd485e84c03eb4881c20722ba48035e8531aeb33"
integrity sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==
-commander@^3.0.0, commander@^3.0.2:
+commander@^3.0.2:
version "3.0.2"
resolved "https://registry.yarnpkg.com/commander/-/commander-3.0.2.tgz#6837c3fb677ad9933d1cfba42dd14d5117d6b39e"
integrity sha512-Gar0ASD4BDyKC4hl4DwHqDrmvjoxWKZigVnAbn5H1owvm4CxCPdb0HQDehwNYMJpla5+M2tPmPARzhtYuwpHow==
@@ -11225,16 +11225,16 @@ loglevel-plugin-prefix@^0.8.4:
resolved "https://registry.yarnpkg.com/loglevel-plugin-prefix/-/loglevel-plugin-prefix-0.8.4.tgz#2fe0e05f1a820317d98d8c123e634c1bd84ff644"
integrity sha512-WpG9CcFAOjz/FtNht+QJeGpvVl/cdR6P0z6OcXSkr8wFJOsV2GRj2j10JLfjuA4aYkcKCNIEqRGCyTife9R8/g==
-loglevel@^1.6.3, loglevel@^1.6.8:
- version "1.6.8"
- resolved "https://registry.yarnpkg.com/loglevel/-/loglevel-1.6.8.tgz#8a25fb75d092230ecd4457270d80b54e28011171"
- integrity sha512-bsU7+gc9AJ2SqpzxwU3+1fedl8zAntbtC5XYlt3s2j1hJcn2PsXSmgN8TaLG/J1/2mod4+cE/3vNL70/c1RNCA==
-
loglevel@^1.6.4:
version "1.6.7"
resolved "https://registry.yarnpkg.com/loglevel/-/loglevel-1.6.7.tgz#b3e034233188c68b889f5b862415306f565e2c56"
integrity sha512-cY2eLFrQSAfVPhCgH1s7JI73tMbg9YC3v3+ZHVW67sBS7UxWzNEk/ZBbSfLykBWHp33dqqtOv82gjhKEi81T/A==
+loglevel@^1.6.6, loglevel@^1.6.8:
+ version "1.6.8"
+ resolved "https://registry.yarnpkg.com/loglevel/-/loglevel-1.6.8.tgz#8a25fb75d092230ecd4457270d80b54e28011171"
+ integrity sha512-bsU7+gc9AJ2SqpzxwU3+1fedl8zAntbtC5XYlt3s2j1hJcn2PsXSmgN8TaLG/J1/2mod4+cE/3vNL70/c1RNCA==
+
longest-streak@^2.0.1:
version "2.0.4"
resolved "https://registry.yarnpkg.com/longest-streak/-/longest-streak-2.0.4.tgz#b8599957da5b5dab64dee3fe316fa774597d90e4"
@@ -15247,13 +15247,6 @@ sass@1.26.3:
dependencies:
chokidar ">=2.0.0 <4.0.0"
-sass@^1.22.9, sass@^1.26.8:
- version "1.26.8"
- resolved "https://registry.yarnpkg.com/sass/-/sass-1.26.8.tgz#312652530721f9568d4c4000b0db07ec6eb23325"
- integrity sha512-yvtzyrKLGiXQu7H12ekXqsfoGT/aTKeMDyVzCB675k1HYuaj0py63i8Uf4SI9CHXj6apDhpfwbUr3gGOjdpu2Q==
- dependencies:
- chokidar ">=2.0.0 <4.0.0"
-
sass@^1.23.0:
version "1.25.0"
resolved "https://registry.yarnpkg.com/sass/-/sass-1.25.0.tgz#f8bd7dfbb39d6b0305e27704a8ebe637820693f3"
@@ -15261,6 +15254,20 @@ sass@^1.23.0:
dependencies:
chokidar ">=2.0.0 <4.0.0"
+sass@^1.23.7:
+ version "1.26.9"
+ resolved "https://registry.yarnpkg.com/sass/-/sass-1.26.9.tgz#73c10cbb88c12b22a9e0107725bfd62296f4978f"
+ integrity sha512-t8AkRVi+xvba4yZiLWkJdgJHBFCB3Dh4johniQkPy9ywkgFHNasXFEFP+RG/F6LhQ+aoE4aX+IorIWQjS0esVw==
+ dependencies:
+ chokidar ">=2.0.0 <4.0.0"
+
+sass@^1.26.8:
+ version "1.26.8"
+ resolved "https://registry.yarnpkg.com/sass/-/sass-1.26.8.tgz#312652530721f9568d4c4000b0db07ec6eb23325"
+ integrity sha512-yvtzyrKLGiXQu7H12ekXqsfoGT/aTKeMDyVzCB675k1HYuaj0py63i8Uf4SI9CHXj6apDhpfwbUr3gGOjdpu2Q==
+ dependencies:
+ chokidar ">=2.0.0 <4.0.0"
+
sax@^1.2.4, sax@~1.2.4:
version "1.2.4"
resolved "https://registry.yarnpkg.com/sax/-/sax-1.2.4.tgz#2816234e2378bddc4e5354fab5caa895df7100d9"
@@ -15327,28 +15334,28 @@ scope-analyzer@^2.0.1:
estree-is-function "^1.0.0"
get-assigned-identifiers "^1.1.0"
-scss-bundle@~3.0.2:
- version "3.0.2"
- resolved "https://registry.yarnpkg.com/scss-bundle/-/scss-bundle-3.0.2.tgz#c6fd4d8738a938584070210beb9bd5eb69d87bbb"
- integrity sha512-6OUFD+bD1ko/nrcXEGQ58NY/pTAQyj3LBfUyCpDeplcs8m8U7CWAfSuK49BrV5PEUGRXEh3oiETxqeG1vJSvrA==
+scss-bundle@~3.1.2:
+ version "3.1.2"
+ resolved "https://registry.yarnpkg.com/scss-bundle/-/scss-bundle-3.1.2.tgz#8919dd7603d01a84822e8aab5210e5b0b50c548b"
+ integrity sha512-lvxTwCKDLgzmRWhGwJ834ggtnEhs0G9FxSJRWte+NwlshVvBcQ/kOHHkpAGDpCxIMNGz/Utl0yd/MWyQAOBhqg==
dependencies:
"@types/archy" "^0.0.31"
"@types/debug" "^4.1.5"
- "@types/fs-extra" "^8.0.0"
+ "@types/fs-extra" "^8.0.1"
"@types/glob" "^7.1.1"
"@types/lodash.debounce" "^4.0.6"
"@types/sass" "^1.16.0"
archy "^1.0.0"
- chalk "^2.4.2"
- chokidar "^3.0.2"
- commander "^3.0.0"
+ chalk "^3.0.0"
+ chokidar "^3.3.1"
+ commander "^4.0.1"
fs-extra "^8.1.0"
globs "^0.1.4"
lodash.debounce "^4.0.8"
- loglevel "^1.6.3"
+ loglevel "^1.6.6"
loglevel-plugin-prefix "^0.8.4"
pretty-bytes "^5.3.0"
- sass "^1.22.9"
+ sass "^1.23.7"
tslib "^1.10.0"
select-hose@^2.0.0: