Merge branch 'develop'

apps/docs/src/app/examples/breadcrumbs/basic/basic.component.ts

@@ -1,5 +1,5 @@
+import { BreadCrumb } from '@anglify/components';
 import { ChangeDetectionStrategy, Component } from '@angular/core';
-import { BreadCrumb } from 'libs/anglify/src/modules/breadcrumbs/breadcrumbs.interface';
 
 @Component({
   templateUrl: './basic.component.html',

apps/docs/src/app/examples/breadcrumbs/icon/icon.component.ts

@@ -1,5 +1,5 @@
+import { BreadCrumb } from '@anglify/components';
 import { ChangeDetectionStrategy, Component } from '@angular/core';
-import { BreadCrumb } from 'libs/anglify/src/modules/breadcrumbs/breadcrumbs.interface';
 
 @Component({
   templateUrl: './icon.component.html',

apps/docs/src/app/examples/expansion-panels/accordion/accordion.component.html

@@ -0,0 +1,14 @@
+<anglify-expansion-panels accordion>
+  <anglify-expansion-panel label="Item"
+    >Lorem ipsum dolor sit amet consectetur adipisicing elit. Animi ea natus et impedit nam asperiores nostrum soluta at dignissimos? Veniam
+    corrupti unde excepturi debitis omnis ab a, voluptatum nostrum officiis.</anglify-expansion-panel
+  >
+  <anglify-expansion-panel label="Item"
+    >Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellat laboriosam aliquid eius et aliquam, iste deleniti unde corporis atque
+    officia itaque facere dolores ut molestias ab, omnis quaerat, asperiores adipisci!</anglify-expansion-panel
+  >
+  <anglify-expansion-panel label="Item"
+    >Lorem ipsum dolor sit amet consectetur adipisicing elit. Placeat dicta ducimus, quidem iusto quia laboriosam fugit eos dignissimos
+    autem inventore fuga molestias veniam, aperiam quos cupiditate. Nesciunt cum facilis nostrum?</anglify-expansion-panel
+  >
+</anglify-expansion-panels>

apps/docs/src/app/examples/expansion-panels/accordion/accordion.component.scss

@@ -0,0 +1,5 @@
+:host {
+  anglify-expansion-panels {
+    width: 400px;
+  }
+}

apps/docs/src/app/examples/expansion-panels/accordion/accordion.component.ts

@@ -0,0 +1,9 @@
+import { Component, ChangeDetectionStrategy } from '@angular/core';
+
+@Component({
+  templateUrl: './accordion.component.html',
+  styleUrls: ['./accordion.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class AccordionComponent {}
+export default AccordionComponent;

apps/docs/src/app/examples/expansion-panels/basic/basic.component.html

@@ -0,0 +1,14 @@
+<anglify-expansion-panels>
+  <anglify-expansion-panel label="Item"
+    >Lorem ipsum dolor sit amet consectetur adipisicing elit. Obcaecati eius quis ad libero odit ab enim unde amet quae temporibus aut
+    deserunt, doloribus vero cupiditate inventore excepturi quod laudantium eligendi!</anglify-expansion-panel
+  >
+  <anglify-expansion-panel label="Item"
+    >Lorem, ipsum dolor sit amet consectetur adipisicing elit. Facere fugit ad molestiae accusamus harum qui itaque numquam, veritatis sequi
+    commodi ratione! Maiores, veritatis! Perferendis fuga, nostrum suscipit cupiditate tempora doloribus.</anglify-expansion-panel
+  >
+  <anglify-expansion-panel label="Item"
+    >Lorem ipsum dolor sit amet, consectetur adipisicing elit. Non corporis dolore, tenetur sit aliquid labore! Illum, placeat corrupti
+    ducimus doloribus nobis vero odit tenetur eaque fuga quod eligendi voluptate similique?</anglify-expansion-panel
+  >
+</anglify-expansion-panels>

apps/docs/src/app/examples/expansion-panels/basic/basic.component.scss

@@ -0,0 +1,5 @@
+:host {
+  anglify-expansion-panels {
+    width: 400px;
+  }
+}

apps/docs/src/app/examples/expansion-panels/basic/basic.component.ts

@@ -0,0 +1,9 @@
+import { Component, ChangeDetectionStrategy } from '@angular/core';
+
+@Component({
+  templateUrl: './basic.component.html',
+  styleUrls: ['./basic.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class BasicComponent {}
+export default BasicComponent;

apps/docs/src/app/examples/expansion-panels/expansion-panels-example.module.ts

@@ -0,0 +1,13 @@
+import { ButtonModule, ExpansionPanelsModule, ItemGroupModule } from '@anglify/components';
+import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+import AccordionComponent from './accordion/accordion.component';
+import { BasicComponent } from './basic/basic.component';
+import MandatoryComponent from './mandatory/mandatory.component';
+import MultipleComponent from './multiple/multiple.component';
+
+@NgModule({
+  declarations: [BasicComponent, MandatoryComponent, MultipleComponent, AccordionComponent],
+  imports: [CommonModule, ExpansionPanelsModule, ItemGroupModule, ButtonModule],
+})
+export class ExpansionPanelsExampleModule {}

apps/docs/src/app/examples/expansion-panels/mandatory/mandatory.component.html

@@ -0,0 +1,15 @@
+<anglify-expansion-panels mandatory>
+  <anglify-expansion-panel label="Item" active
+    >Lorem ipsum dolor sit amet consectetur adipisicing elit. Perspiciatis suscipit veniam deleniti aliquam vero blanditiis, sequi libero
+    nostrum, saepe numquam sunt explicabo quis tempore ut dicta fuga maxime delectus maiores.</anglify-expansion-panel
+  >
+  <anglify-expansion-panel label="Item"
+    >Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla facere ullam est quos eveniet quidem cupiditate natus officia fugit quis
+    molestias mollitia corporis nemo dignissimos aspernatur saepe, dolor asperiores veritatis.</anglify-expansion-panel
+  >
+  <anglify-expansion-panel label="Item"
+    >Lorem ipsum dolor sit amet consectetur, adipisicing elit. Optio cumque molestias tempora odio reprehenderit suscipit nemo vero
+    veritatis delectus asperiores unde officia voluptates commodi exercitationem dolorum corporis, obcaecati pariatur
+    accusamus.</anglify-expansion-panel
+  >
+</anglify-expansion-panels>

apps/docs/src/app/examples/expansion-panels/mandatory/mandatory.component.scss

@@ -0,0 +1,5 @@
+:host {
+  anglify-expansion-panels {
+    width: 400px;
+  }
+}

apps/docs/src/app/examples/expansion-panels/mandatory/mandatory.component.ts

@@ -0,0 +1,9 @@
+import { Component, ChangeDetectionStrategy } from '@angular/core';
+
+@Component({
+  templateUrl: './mandatory.component.html',
+  styleUrls: ['./mandatory.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class MandatoryComponent {}
+export default MandatoryComponent;

apps/docs/src/app/examples/expansion-panels/multiple/multiple.component.html

@@ -0,0 +1,14 @@
+<anglify-expansion-panels multiple>
+  <anglify-expansion-panel label="Item"
+    >Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eaque modi illo mollitia quis exercitationem! Qui eveniet excepturi adipisci,
+    laudantium perspiciatis accusamus totam. Necessitatibus nihil eum numquam recusandae minus beatae accusantium.</anglify-expansion-panel
+  >
+  <anglify-expansion-panel label="Item"
+    >Lorem ipsum dolor sit amet consectetur adipisicing elit. Suscipit at vero quo minus laboriosam! Unde nisi fuga voluptatibus non tempora
+    vitae, corrupti repellat. Aut officiis fugit ullam? Voluptate, recusandae sapiente!</anglify-expansion-panel
+  >
+  <anglify-expansion-panel label="Item"
+    >Lorem, ipsum dolor sit amet consectetur adipisicing elit. Officia, libero excepturi, obcaecati sint soluta rem tempore assumenda quam
+    similique, voluptatibus consequuntur quisquam omnis pariatur qui voluptate quia alias neque facilis!</anglify-expansion-panel
+  >
+</anglify-expansion-panels>

apps/docs/src/app/examples/expansion-panels/multiple/multiple.component.scss

@@ -0,0 +1,5 @@
+:host {
+  anglify-expansion-panels {
+    width: 400px;
+  }
+}

apps/docs/src/app/examples/expansion-panels/multiple/multiple.component.ts

@@ -0,0 +1,9 @@
+import { Component, ChangeDetectionStrategy } from '@angular/core';
+
+@Component({
+  templateUrl: './multiple.component.html',
+  styleUrls: ['./multiple.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class MultipleComponent {}
+export default MultipleComponent;

apps/docs/src/app/examples/text-area/basic/basic.component.scss

@@ -6,7 +6,7 @@
   gap: 1rem;
   grid-template-columns: 1fr;
 
-  @include sm {
+  @include sm-and-up {
     grid-template-columns: 1fr 1fr;
   }
 }

apps/docs/src/app/examples/text-field/counter/counter.component.scss

@@ -6,7 +6,7 @@
   gap: 1rem;
   grid-template-columns: 1fr;
 
-  @include sm {
+  @include sm-and-up {
     grid-template-columns: 1fr 1fr;
   }
 }

apps/docs/src/app/examples/text-field/dense/dense.component.scss

@@ -6,7 +6,7 @@
   gap: 1rem;
   grid-template-columns: 1fr;
 
-  @include sm {
+  @include sm-and-up {
     grid-template-columns: 1fr 1fr 1fr;
   }
 }

apps/docs/src/app/examples/text-field/disabled-validation/disabled-validation.component.scss

@@ -6,7 +6,7 @@
   gap: 1rem;
   grid-template-columns: 1fr;
 
-  @include sm {
+  @include sm-and-up {
     grid-template-columns: 1fr 1fr;
   }
 

apps/docs/src/app/examples/text-field/disabled/disabled.component.scss

@@ -6,7 +6,7 @@
   gap: 1rem;
   grid-template-columns: 1fr;
 
-  @include sm {
+  @include sm-and-up {
     grid-template-columns: 1fr 1fr 1fr;
   }
 }

apps/docs/src/app/examples/text-field/hint/hint.component.scss

@@ -6,7 +6,7 @@
   gap: 1rem;
   grid-template-columns: 1fr;
 
-  @include sm {
+  @include sm-and-up {
     grid-template-columns: 1fr 1fr;
   }
 }

apps/docs/src/app/examples/text-field/icons/icons.component.scss

@@ -6,7 +6,7 @@
   gap: 1rem;
   grid-template-columns: 1fr;
 
-  @include sm {
+  @include sm-and-up {
     grid-template-columns: 1fr 1fr;
   }
 }

apps/docs/src/app/examples/text-field/label-slot/label-slot.component.scss

@@ -6,7 +6,7 @@
   gap: 1rem;
   grid-template-columns: 1fr;
 
-  @include sm {
+  @include sm-and-up {
     grid-template-columns: 1fr 1fr;
   }
 

apps/docs/src/app/examples/text-field/long-hint-and-long-label/long-hint-and-long-label.component.scss

@@ -6,7 +6,7 @@
   gap: 1rem;
   grid-template-columns: 1fr;
 
-  @include sm {
+  @include sm-and-up {
     grid-template-columns: 1fr 1fr;
   }
 }

apps/docs/src/app/examples/text-field/native-input-validation/native-input-validation.component.scss

@@ -6,7 +6,7 @@
   gap: 1rem;
   grid-template-columns: 1fr;
 
-  @include sm {
+  @include sm-and-up {
     grid-template-columns: 1fr 1fr;
   }
 }

apps/docs/src/app/examples/text-field/persistent-placeholder/persistent-placeholder.component.scss

@@ -6,7 +6,7 @@
   gap: 1rem;
   grid-template-columns: 1fr;
 
-  @include sm {
+  @include sm-and-up {
     grid-template-columns: 1fr 1fr;
   }
 }

apps/docs/src/app/examples/text-field/placeholder/placeholder.component.scss

@@ -6,7 +6,7 @@
   gap: 1rem;
   grid-template-columns: 1fr;
 
-  @include sm {
+  @include sm-and-up {
     grid-template-columns: 1fr 1fr;
   }
 }

apps/docs/src/app/examples/text-field/reactive-forms-validation/reactive-forms-validation.component.scss

@@ -6,7 +6,7 @@
   gap: 1rem;
   grid-template-columns: 1fr;
 
-  @include sm {
+  @include sm-and-up {
     grid-template-columns: 1fr 1fr;
   }
 }

apps/docs/src/app/examples/text-field/readonly/readonly.component.scss

@@ -6,7 +6,7 @@
   gap: 1rem;
   grid-template-columns: 1fr;
 
-  @include sm {
+  @include sm-and-up {
     grid-template-columns: 1fr 1fr;
   }
 }

apps/docs/src/app/examples/text-field/server-error-handling/server-error-handling.component.scss

@@ -6,7 +6,7 @@
   gap: 1rem;
   grid-template-columns: 1fr;
 
-  @include sm {
+  @include sm-and-up {
     grid-template-columns: 1fr 1fr;
   }
 

apps/docs/src/app/examples/text-field/without-label/without-label.component.scss

@@ -6,7 +6,7 @@
   gap: 1rem;
   grid-template-columns: 1fr;
 
-  @include sm {
+  @include sm-and-up {
     grid-template-columns: 1fr 1fr 1fr;
   }
 }

apps/docs/src/app/layouts/default/default.component.scss

@@ -8,7 +8,7 @@
     'main';
   grid-template-rows: auto 1fr;
 
-  @include md {
+  @include md-and-up {
     grid-auto-columns: auto 1fr;
     grid-template-areas:
       'toolbar toolbar'
@@ -28,7 +28,7 @@
     grid-area: main;
     overflow-y: auto;
 
-    @include md {
+    @include md-and-up {
       padding: 1rem;
     }
   }

apps/docs/src/app/layouts/default/default.component.ts

@@ -52,6 +52,7 @@ export class DefaultComponent {
   public features = [
     { link: 'features/theming', name: 'Theming' },
     { link: 'features/icon-fonts', name: 'Icon Fonts' },
+    { link: 'features/breakpoints', name: 'Breakpoints' },
   ];
 
   public components = [
@@ -87,6 +88,10 @@ export class DefaultComponent {
       link: 'components/dialog',
       name: 'Dialog',
     },
+    {
+      link: 'components/expansion-panels',
+      name: 'Expansion Panels',
+    },
     {
       link: 'components/icon',
       name: 'Icon',

apps/docs/src/app/pages/components/components-routing.module.ts

@@ -8,6 +8,7 @@ import { CardPageComponent } from './card-page/card-page.component';
 import { CheckBoxPageComponent } from './checkbox-page/checkbox-page.component';
 import { ChipPageComponent } from './chip-page/chip-page.component';
 import { DialogPageComponent } from './dialog-page/dialog-page.component';
+import { ExpansionPanelsPageComponent } from './expansion-panels-page/expansion-panels-page.component';
 import { IconPageComponent } from './icon-page/icon-page.component';
 import { ItemGroupPageComponent } from './item-group-page/item-group-page.component';
 import { ListPageComponent } from './list-page/list-page.component';
@@ -46,7 +47,10 @@ const routes: Routes = [
     path: 'dialog',
     component: DialogPageComponent,
   },
-
+  {
+    path: 'expansion-panels',
+    component: ExpansionPanelsPageComponent,
+  },
   {
     path: 'icon',
     component: IconPageComponent,

apps/docs/src/app/pages/components/components.module.ts

@@ -11,6 +11,7 @@ import { CheckBoxPageComponent } from './checkbox-page/checkbox-page.component';
 import { ChipPageComponent } from './chip-page/chip-page.component';
 import { ComponentsRoutingModule } from './components-routing.module';
 import { DialogPageComponent } from './dialog-page/dialog-page.component';
+import { ExpansionPanelsPageComponent } from './expansion-panels-page/expansion-panels-page.component';
 import { IconPageComponent } from './icon-page/icon-page.component';
 import { ItemGroupPageComponent } from './item-group-page/item-group-page.component';
 import { ListPageComponent } from './list-page/list-page.component';
@@ -35,6 +36,7 @@ import { CardExamplesModule } from '../../examples/card/card-examples.module';
 import { CheckBoxExamplesModule } from '../../examples/checkbox/checkbox-examples.module';
 import { ChipExamplesModule } from '../../examples/chip/chip-examples.module';
 import { DialogExamplesModule } from '../../examples/dialog/dialog-examples.module';
+import { ExpansionPanelsExampleModule } from '../../examples/expansion-panels/expansion-panels-example.module';
 import { IconExamplesModule } from '../../examples/icon/icon-examples.module';
 import { ItemGroupExamplesModule } from '../../examples/item-group/item-group-examples.module';
 import { ListExamplesModule } from '../../examples/list/list-examples.module';
@@ -79,6 +81,7 @@ import { SharedModule } from '../../modules/shared/shared.module';
     BreadcrumbsPageComponent,
     TextFieldPageComponent,
     TextAreaPageComponent,
+    ExpansionPanelsPageComponent,
   ],
   imports: [
     CommonModule,
@@ -109,6 +112,7 @@ import { SharedModule } from '../../modules/shared/shared.module';
     TabExamplesModule,
     BreadcrumbsExampleModule,
     TextFieldExamplesModule,
+    ExpansionPanelsExampleModule,
     // Imports for Playground
     TextFieldModule,
     IconModule,