This commit is contained in:
CHEVALLIER Abel
2025-11-13 16:23:22 +01:00
parent de9c515a47
commit cb235644dc
34924 changed files with 3811102 additions and 0 deletions

View File

@@ -0,0 +1,53 @@
.container {
width: 400px;
max-width: 100%;
margin: 0 20px;
display: inline-block;
vertical-align: top;
}
.list {
border: solid 1px #ccc;
min-height: 60px;
background: white;
border-radius: 4px;
display: block;
overflow: hidden;
}
.list-item {
padding: 20px 10px;
border-bottom: solid 1px #ccc;
box-sizing: border-box;
cursor: move;
background: white;
color: black;
font-size: 14px;
}
.list-item:last-child {
border: none;
}
/* Highlight the list item that is being dragged. */
.cdk-drag-preview {
border-radius: 4px;
box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2),
0 8px 10px 1px rgba(0, 0, 0, 0.14),
0 3px 14px 2px rgba(0, 0, 0, 0.12);
}
/* Animate items as they're being sorted. */
.cdk-drop-list-dragging .cdk-drag {
transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
}
/* Animate an item that has been dropped. */
.cdk-drag-animating {
transition: transform 300ms cubic-bezier(0, 0, 0.2, 1);
}
.cdk-drag-placeholder {
opacity: 0;
}

View File

@@ -0,0 +1,21 @@
<div class="container">
<h2>To do</h2>
<div cdkDropList #todoList="cdkDropList" [cdkDropListData]="todo"
[cdkDropListConnectedTo]="doneList" class="list" (cdkDropListDropped)="drop($event)">
@for (item of todo; track item) {
<div class="list-item" cdkDrag>{{item}}</div>
}
</div>
</div>
<div class="container">
<h2>Done</h2>
<div cdkDropList #doneList="cdkDropList" [cdkDropListData]="done"
[cdkDropListConnectedTo]="todoList" class="list" (cdkDropListDropped)="drop($event)">
@for (item of done; track item) {
<div class="list-item" cdkDrag>{{item}}</div>
}
</div>
</div>

View File

@@ -0,0 +1,25 @@
import { <% if(!standalone) { %>waitForAsync, <% } %>ComponentFixture, TestBed } from '@angular/core/testing';<% if(!standalone) { %>
import { DragDropModule } from '@angular/cdk/drag-drop';<% } %>
import { <%= classify(name) %>Component } from './<%= dasherize(name) %>.component';
describe('<%= classify(name) %>Component', () => {
let component: <%= classify(name) %>Component;
let fixture: ComponentFixture<<%= classify(name) %>Component>;<% if(!standalone) { %>
beforeEach(waitForAsync(() => {
TestBed.configureTestingModule({
declarations: [<%= classify(name) %>Component],
imports: [DragDropModule]
});
}));<% } %>
beforeEach(() => {
fixture = TestBed.createComponent(<%= classify(name) %>Component);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should compile', () => {
expect(component).toBeTruthy();
});
});

View File

@@ -0,0 +1,45 @@
import { Component<% if(!!viewEncapsulation) { %>, ViewEncapsulation<% }%><% if(changeDetection !== 'Default') { %>, ChangeDetectionStrategy<% }%> } from '@angular/core';
import { <% if(standalone) { %>CdkDrag, CdkDropList, <% } %>CdkDragDrop, moveItemInArray, transferArrayItem } from '@angular/cdk/drag-drop';
@Component({
selector: '<%= selector %>',<% if(inlineTemplate) { %>
template: `
<%= indentTextContent(resolvedFiles.template, 4) %>
`,<% } else { %>
templateUrl: './<%= dasherize(name) %>.component.html',<% } if(inlineStyle) { %>
styles: `
<%= indentTextContent(resolvedFiles.stylesheet, 4) %>
`<% } else { %>
styleUrl: './<%= dasherize(name) %>.component.<%= style %>'<% } %><% if(!!viewEncapsulation) { %>,
encapsulation: ViewEncapsulation.<%= viewEncapsulation %><% } if (changeDetection !== 'Default') { %>,
changeDetection: ChangeDetectionStrategy.<%= changeDetection %><% } %><% if(standalone) { %>,
imports: [CdkDrag, CdkDropList]<% } else { %>,
standalone: false<% } %>
})
export class <%= classify(name) %>Component {
todo = [
'Get to work',
'Pick up groceries',
'Go home',
'Fall asleep'
];
done = [
'Get up',
'Brush teeth',
'Take a shower',
'Check e-mail',
'Walk dog'
];
drop(event: CdkDragDrop<string[]>): void {
if (event.previousContainer === event.container) {
moveItemInArray(event.container.data, event.previousIndex, event.currentIndex);
} else {
transferArrayItem(event.previousContainer.data,
event.container.data,
event.previousIndex,
event.currentIndex);
}
}
}

View File

@@ -0,0 +1,11 @@
/**
* @license
* Copyright Google LLC All Rights Reserved.
*
* Use of this source code is governed by an MIT-style license that can be
* found in the LICENSE file at https://angular.dev/license
*/
import { Rule } from '@angular-devkit/schematics';
import { Schema } from './schema';
/** Scaffolds a new Angular component that uses the Drag and Drop module. */
export default function (options: Schema): Rule;

View File

@@ -0,0 +1,42 @@
"use strict";
/**
* @license
* Copyright Google LLC All Rights Reserved.
*
* Use of this source code is governed by an MIT-style license that can be
* found in the LICENSE file at https://angular.dev/license
*/
var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
return new (P || (P = Promise))(function (resolve, reject) {
function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
step((generator = generator.apply(thisArg, _arguments || [])).next());
});
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.default = default_1;
const schematics_1 = require("@angular-devkit/schematics");
const utils_1 = require("../../utils");
/** Scaffolds a new Angular component that uses the Drag and Drop module. */
function default_1(options) {
return (0, schematics_1.chain)([
(0, utils_1.buildComponent)(Object.assign({}, options), {
template: './__path__/__name@dasherize@if-flat__/__name@dasherize__.component.html.template',
stylesheet: './__path__/__name@dasherize@if-flat__/__name@dasherize__.component.__style__.template',
}),
options.skipImport ? (0, schematics_1.noop)() : addDragDropModulesToModule(options),
]);
}
/** Adds the required modules to the main module of the CLI project. */
function addDragDropModulesToModule(options) {
return (host) => __awaiter(this, void 0, void 0, function* () {
const isStandalone = yield (0, utils_1.isStandaloneSchematic)(host, options);
if (!isStandalone) {
const modulePath = yield (0, utils_1.findModuleFromOptions)(host, options);
(0, utils_1.addModuleImportToModule)(host, modulePath, 'DragDropModule', '@angular/cdk/drag-drop');
}
});
}
//# sourceMappingURL=index.js.map

View File

@@ -0,0 +1 @@
{"version":3,"file":"index.js","sourceRoot":"","sources":["index.ts"],"names":[],"mappings":";AAAA;;;;;;GAMG;;;;;;;;;;;AAYH,4BAaC;AAvBD,2DAAmE;AACnE,uCAKqB;AAGrB,4EAA4E;AAC5E,mBAAyB,OAAe;IACtC,OAAO,IAAA,kBAAK,EAAC;QACX,IAAA,sBAAc,oBACR,OAAO,GACX;YACE,QAAQ,EACN,kFAAkF;YACpF,UAAU,EACR,uFAAuF;SAC1F,CACF;QACD,OAAO,CAAC,UAAU,CAAC,CAAC,CAAC,IAAA,iBAAI,GAAE,CAAC,CAAC,CAAC,0BAA0B,CAAC,OAAO,CAAC;KAClE,CAAC,CAAC;AACL,CAAC;AAED,uEAAuE;AACvE,SAAS,0BAA0B,CAAC,OAAe;IACjD,OAAO,CAAO,IAAU,EAAE,EAAE;QAC1B,MAAM,YAAY,GAAG,MAAM,IAAA,6BAAqB,EAAC,IAAI,EAAE,OAAO,CAAC,CAAC;QAEhE,IAAI,CAAC,YAAY,EAAE,CAAC;YAClB,MAAM,UAAU,GAAG,MAAM,IAAA,6BAAqB,EAAC,IAAI,EAAE,OAAO,CAAC,CAAC;YAC9D,IAAA,+BAAuB,EAAC,IAAI,EAAE,UAAW,EAAE,gBAAgB,EAAE,wBAAwB,CAAC,CAAC;QACzF,CAAC;IACH,CAAC,CAAA,CAAC;AACJ,CAAC"}

View File

@@ -0,0 +1,10 @@
/**
* @license
* Copyright Google LLC All Rights Reserved.
*
* Use of this source code is governed by an MIT-style license that can be
* found in the LICENSE file at https://angular.dev/license
*/
import { Schema as ComponentSchema } from '@schematics/angular/component/schema';
export interface Schema extends ComponentSchema {
}

View File

@@ -0,0 +1,10 @@
"use strict";
/**
* @license
* Copyright Google LLC All Rights Reserved.
*
* Use of this source code is governed by an MIT-style license that can be
* found in the LICENSE file at https://angular.dev/license
*/
Object.defineProperty(exports, "__esModule", { value: true });
//# sourceMappingURL=schema.js.map

View File

@@ -0,0 +1 @@
{"version":3,"file":"schema.js","sourceRoot":"","sources":["schema.ts"],"names":[],"mappings":";AAAA;;;;;;GAMG"}

View File

@@ -0,0 +1,100 @@
{
"$schema": "http://json-schema.org/draft-07/schema",
"$id": "CdkSchematicsDragDrop",
"title": "Angular CDK Drag and Drop schematic",
"type": "object",
"properties": {
"path": {
"type": "string",
"format": "path",
"$default": {
"$source": "workingDirectory"
},
"description": "The path to create the component.",
"visible": false
},
"project": {
"type": "string",
"description": "The name of the project.",
"$default": {
"$source": "projectName"
}
},
"name": {
"type": "string",
"description": "The name of the component.",
"$default": {
"$source": "argv",
"index": 0
},
"x-prompt": "What should be the name of the component?"
},
"inlineStyle": {
"description": "Specifies if the style will be in the ts file.",
"type": "boolean",
"alias": "s"
},
"inlineTemplate": {
"description": "Specifies if the template will be in the ts file.",
"type": "boolean",
"alias": "t"
},
"standalone": {
"description": "Whether the generated component is standalone.",
"type": "boolean"
},
"viewEncapsulation": {
"description": "Specifies the view encapsulation strategy.",
"enum": ["Emulated", "None"],
"type": "string",
"alias": "v"
},
"changeDetection": {
"description": "Specifies the change detection strategy.",
"enum": ["Default", "OnPush"],
"type": "string",
"default": "Default",
"alias": "c"
},
"prefix": {
"type": "string",
"format": "html-selector",
"description": "The prefix to apply to generated selectors.",
"alias": "p"
},
"style": {
"description": "The file extension to be used for style files.",
"type": "string"
},
"skipTests": {
"type": "boolean",
"description": "When true, does not generate a test file."
},
"flat": {
"type": "boolean",
"description": "Flag to indicate if a dir is created.",
"default": false
},
"skipImport": {
"type": "boolean",
"description": "Flag to skip the module import.",
"default": false
},
"selector": {
"type": "string",
"format": "html-selector",
"description": "The selector to use for the component."
},
"module": {
"type": "string",
"description": "Allows specification of the declaring module.",
"alias": "m"
},
"export": {
"type": "boolean",
"default": false,
"description": "Specifies if declaring module exports the component."
}
},
"required": ["name"]
}